Designing better target sizes
▻https://ishadeed.com/article/target-size
via @b_b
#intégration #web #ergonomie #clic #UX #accessibilité #CSS
Designing better target sizes
▻https://ishadeed.com/article/target-size
via @b_b
#intégration #web #ergonomie #clic #UX #accessibilité #CSS
CSS Button Styles You Might Not Know - David Bushell
▻https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know
.button,
::file-selector-button {
inline-size: fit-content;
touch-action: manipulation;
user-select: none;
}
* {
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px solid magenta;
outline-offset: 2px;
}
}
Ce qui permet de découvrir que les Nesting CSS sont désormais acceptés par 85% des usagers :
▻https://caniuse.com/?search=nesting%20css
A Complete #CSS Tutorial: Mastering the Art of Web Styling
▻https://itcodestuff.com/a-complete-css-tutorial-mastering-the-art-of-web-styling
Hello Guys, Cascading Style Sheets (CSS) are an essential part of web development. They enable web designers to control the presentation and layout of web ... Read more
The truth about #CSS selector performance
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article.
Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance.
Avec un outil (pas encore testé) permettant de mesurer tout ça.
▻https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance
via ▻https://hachyderm.io/@cvennevik/111997002061348375
#web
How To #Center a Div
▻https://www.joshwcomeau.com/css/center-a-div
Before we wrap up, let’s summarize what we’ve learned by building a sort of decision tree, so that we can figure out when to use which method.
– If we want to horizontally center a single element without disturbing any of its siblings, we can use the Flow layout auto margin strategy.
If we have a piece of floating UI, like a modal or a banner, we can center it using Positioned layout and auto margins.
– If we want to center a stack of elements one on top of the other, we can use CSS Grid.
– If we want to center text, we can use text-align. This can be used in conjunction with any of the additional methods.
Finally, in most other situations, we can use Flexbox. It’s the most versatile method; it can be used to center one or multiple children, horizontally and/or vertically, whether they’re contained or overflowing.
#css
CSS : comment appliquer une autre font à certains caractères ?
Je travaille sur un projet de plusieurs centaines de pages avec beaucoup d’endroits où le numérique est là et peut être combiné à des lettres.
L’équipe design m’a demandé si on pouvait mettre une typo différente pour les chiffres. J’ai d’abord proposé le font-variant-numeric qui peut permettre de les gérer avec du tabular-num. Mais l’espacement n’est pas forcément idéal avec la font utilisée.
J’ai continué de creuser et j’ai trouvé comment utiliser une font spécifique uniquement pour certains caractères. J’ai fait un Codepen pour partager ;-) Comme indiqué dedans, il faudra s’y prendre autrement si vous passez par une font que vous appelez chez Google.
PS : j’ai mis le Arial Black en font pour les chiffres et je m’aperçois qu’on ne verra pas forcément la différence sur mobile (ça ne doit pas être dans les font déjà enregistrées sur les mobiles) mais sur un ordi, vous devriez voir
merci @aurelie
@font-face {
font-family: "NumericFont";
src: local("Arial Black");
/* https://fr.wikipedia.org/wiki/Table_des_caract%C3%A8res_Unicode_(0000-0FFF)
On peut faire de la même façon pour n'importe quel caractère */
unicode-range: U+30-39; /* chiffres de 0 à 9 */
}
The Complex But Awesome CSS border-image Property
▻https://www.smashingmagazine.com/2024/01/css-border-image-property
Did you know border-image property was such a powerful — and flexible — CSS property? Despite the challenge it takes to understand the syntax, there are ways to keep the code clean and simple. Plus, there is often more than one “right” way to get the same result. It’s a complicated and robust CSS feature.
via la-grange.net
plein de trucs sympa, merci !
Very complex indeed ^^
Mais des trucs bien sympas cf :
Our first experiment is to add a gradient overlay above an existing background. This is a fairly common pattern to improve the legibility of text by increasing the contrast between the text color and the background color.
.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
}
Our next example is a common design pattern where we want the background of an element to extend to the screen’s full width. We often refer to this as a “break-out” background because the element typically needs to break outside the constrained width of its parent container in order to stretch across the full screen.
.full-background {
border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}
Pour référence, c’est la personne qui partage ses tips sur ▻https://seenthis.net/messages/1001462
CodePen - CSS clip-path Editor
▻https://cdpn.io/stoumann/fullembedgrid/abZxoOM?animations=run&type=embed
un outil simple pour créer des règles CSS clip-path
visuellement
The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180
The untold history of web development:
1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites
(by @fireship_dev on Birdsite)
An Interactive Guide to #CSS #Grid
▻https://www.joshwcomeau.com/css/interactive-guide-to-grid
In this tutorial, I’m going to share the biggest lightbulb moments I’ve had in my own journey with CSS Grid. You’ll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it.
To break things down even further:
– justify — deals with columns.
– align — deals with rows.
– content — deals with the grid structure.
– items — deals with the DOM nodes within the grid structure.
Dans les #CSS Text Level 4, il y a l’alignement vertical (dans des tableaux) selon un caractère (la virgule ou le point des nombres décimaux par exemple):
▻https://www.w3.org/TR/css-text-4/#character-alignment
text-align: "." center
Choisir entre balance et pretty pour text-wrap - Alsacreations
▻https://www.alsacreations.com/astuce/lire/1920-Choisir-entre-balance-et-pretty-pour-text-wrap.html
Gestion des retours lignes automatique en CSS : utiliser les valeurs balance
et pretty
pour la propriété text-wrap
#CSS #text-wrap #pretty #balance #web_dev #présentation_texte #justifier #retour_ligne
Il est déconseillé de l’utiliser pour les grands paragraphes car cela peut entraîner une perte de performance, le navigateur ayant besoin d’effectuer plus de calculs que d’habitude.
En fait c’est plus net encore : text-wrap: balance
ne s’applique que sur les paragraphes de six lignes maximum. Ce n’est pas conçu pour maquetter des paragraphes (sa logique même, graphiquement, ne correspond pas à des paragraphes de texte courant), mais des titres et intertitres.
Suppression de l’AME : 3 500 médecins prêts à « désobéir » si le texte est voté
▻https://www.leparisien.fr/politique/suppression-de-lame-3-500-medecins-prets-a-desobeir-si-le-texte-est-vote-
Les refus de soins opposés aux bénéficiaires de la complémentaire santé solidaire et de l’aide médicale de l’État - Un testing portant sur une première prise de rendez-vous médical par téléphone auprès des généralistes, des ophtalmologues et des pédiatres
▻https://drees.solidarites-sante.gouv.fr/publications-communique-de-presse/les-dossiers-de-la-drees/les-refus-de-soins-opposes-aux
#Transition #animations: a practical guide | by Dongkyu Lee | Oct, 2023 | #UX Collective
▻https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659
6 principles for better transition animations
– Fade in and out with opacity
– Scale to add liveliness
– Maintain consistent directionality
– Balance speed
– Prioritize, order, and group
– Establish spatiality
According to some articles, a speed from 100ms to 500ms is ideal and suitable for most cases.
#css
New #Viewport Units
▻https://ishadeed.com/article/new-viewport-units
However, using the vh unit on mobile is buggy. The reason is that the viewport size won’t include the browser’s address bar UI. To solve that, we now have new viewport units. Let’s find out about them in this article.
#css
CSS { In Real Life } | Breaking Out of a Central Wrapper
▻https://css-irl.info/breaking-out-of-a-central-wrapper
▻https://css-irl.info/breaking-out-of-a-central-wrapper-05.webp
Using viewport units, we can force an element to break out of the wrapper, without changing our original markup!
.full-width {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}
▻https://caniuse.com/viewport-units => 96.73%
▻https://caniuse.com/?search=translate3d => 96.15%
On avait déjà référencé une notation équivalente (mais celle ci-dessus est sans doute plus facile à comprendre) :
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
Dans mon plugin Maquettes multiples, j’utilise différentes valeurs pour .spip_documents.max
selon qu’on est dans une colonne centrée ou décentrée. Ça peut devenir assez sioux.
La #CMU passe à 95% de remboursement (vs 100%) en loucedé ? | via Mammouth | 25.09.23
après vérification : pas exactement ; pas -5% mais y a bien rabotage :-)
The devil is in the details
Parmi les bénéficiaires de la CMU-C ayant eu recours aux soins en 2010, 74 % n’ont eu aucun reste à charge. 85 % ont eu moins de 10 euros à débourser sur l’ensemble de l’année, et 95 % moins de 65 euros, soit de l’ordre de 5 euros par mois.
En fait, on a discuté de cette histoire et clairement, ce n’est pas une généralité : on a rien trouvé, ni décret, ni arrêté passé en loucedé, que dalle à ce sujet, même pas une circulaire.
Par contre, il y a le fait que la CMU-C n’existe plus et que c’est maintenant la CSS (Complémentaire Santé Solidaire), ce qui s’explique en partie par le fait que la #CMU (dite socle) a disparu pour cause de généralisation de la #Puma (protection universelle maladie) depuis 2016 : « Toute personne qui travaille ou réside en France de manière stable et régulière est couverte par l’Assurance maladie. »
Le corollaire de tout ça, c’est que les règles d’actualisation ont changé. En gros, il peut y avoir des « ratés » du côté de la CAF qui n’envoie pas tout ou assez des infos nécessaires pour les maléficiaires du RSA… ce qui conduit à ces rattrapage.
La personne va vérifier son statut auprès de la Sécu.
@MMRnmd
Tu sais @Monolecte, après avoir réglé je me suis plongé dans DDG pendant 1 heure et moi non plus, je n’ai RIEN trouvé.
Cependant, ma fille m’a dit que c’est la 2nde fois depuis cet été qu’on lui demande de régler ces fameux 5%
Anyway, je vois mon médecin traitant demain, j’aurai le fin mot de l’histoire.
▻https://todon.eu/@MMRnmd/111126606439977065
@FoucPerotin@mamot.fr
Je signale juste ce que je vois : la CMU-C semble avoir été remplacée par un nouveau dispositif, ainsi que mentionné ici
▻https://www.service-public.fr/particuliers/vosdroits/F10027
Je pense qu’il peut être utile de vérifier ça.
Les questions relatives à la complémentaire à la CMU sont parfois délicates (expérience perso avec un SDF turc que nous parrainions, disons, et des problèmes quand il a été hospitalisé sans complémentaire, etc.)
▻https://mamot.fr/@FoucPerotin/111126851928035929
@Docteur_V@piaille.fr
@MMRnmd Je suis médecin généraliste, responsable syndical MG France et je n’ai entendu parler de rien. Ton pharmacien s’est trompé quelque part.
pour ce que j’ai compris lorsque l’on dépend la CSS payante (par prélèvement mensuel) on a en plus du non remboursé qui serait plafonné à 50 euros par an (un « forfait »), qu’on la paye ou pas. mais moi aussi je me débat avec les effets de cette réforme (où la complémentaire est devenu payante dans beaucoup de cas).
édit
▻https://piaille.fr/@MMRnmd@todon.eu
Il apparaît donc que la préparatrice en pharmacie a qui m’a fille a eu à faire s’est emmêlé les pinceaux.
Ce n’est pas 5% qui est ponctionné par la CPAM, depuis 2019 à la demande du gouvernement CASTEX, mais 50cts par boite délivrée jusqu’à hauteur maximum de 50€.
Et cette somme est censée être recouvrée par la CPAM et non par les pharmaciens.
Car, ma dit mon pharmacien ce matin, « si c’était à nous d’expliquer ça aux titulaires de la CMU, ça ferait une petite révolution, ils préfèrent le faire en fin d’année, ainsi, très peu de gens comprennent de quoi il sagit... »
Un peu comme les frai bancaires, qui sont ponctionnes le mois suivant et se perdent dans les lignes des débits.
Mea culpa donc d’avoir balancé ce chiffre de 5% ; ceci dit, 50€, c’est 5% de 1000€.
Et c’est bien une mesure décidée et appliquée en 2019 sous sa majesté Macron 1er.
C’est encore pas ça : au RSA, tu as la C2S gratuite et il est clairement spécifié que les bénéficiaires ne paient pas le forfait.
je voulais écrire CSS payante, je corrige
#CSS #Text balancing with text-wrap:balance
▻https://ishadeed.com/article/css-text-wrap-balance
Vivement que ça soit dispo dans Firefox !
Luckily, we now have experimental support for text-wrap: balance
#wrap
Utilisable illico presto : c’est typiquement le genre de css qui se dégrade parfaitement sans avoir rien à faire.
Tu veux dire que c’est de la 💩, @arno ?
Au contraire, je veux dire qu’on peut l’utiliser sans risque. (J’ai commencé à le déployer sur mes sites.)
Si ton navigateur ne le comprend pas, il ne se passe rigoureusement rien de différent de d’habitude. Mais si ton navigateur le comprend, tu as une amélioration énorme de tes titres (en gros, la première cible, c’est les titres).
Il y a d’autres styles, si tu les utilises sans faire attention, tu peux casser totalement ta maquette. Par exemple tu décides de faire un élément de maquette avec grid
au lieu de flex
; les navigateurs qui ne pigent pas grid
auront une maquette totalement explosée, et tu risques de ne même pas t’en rendre compte – actuellement Opera Mini comprend flex
, mais pas grid
.
Designing Accessible Text Over Images: Best Practices, Techniques, And Resources — Smashing Magazine
▻https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1
▻https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part2
En complément de ▻https://seenthis.net/messages/924372
la sécu assaisonne les pauvres - relevé aux marges de l’oiseau mort
ça me rappelle quand la sécu m’est tombé dessus pour une merde dans le traitement ortho [de l’enfant].
la salope me demandait à moi un trop perçu alors que c’était IMPOSSIBLE que je sois la source de l’erreur. ce sont les SOIGNANTS qui font les déclarations d’actes, pas moi !
et pareil j’avais du chercher partout comprendre la cotation en TO d’un foutu orthodontiste qui gagne 150k par an et faire bosser sa secrétaire pour arriver à PROUVER une erreur de SA PART qui ne pouvait PAS m’être imputée. je ne passe pas les actes sur ma vitale moi même hein.
mais la sale conne de la #cpam elle était FASCISTE DONC elle voyait aucun prb à me dire à moi de rendre 300 euros au lieu de demander à la soignante de vérifier sa compta !
et vous voyez pas le NOMBRE de VIES que vous BOUSILLEZ comme ça INJUSTEMENT en BROYANT DES GENS qui n’ont pour la plupart pas les moyens de défendre parce qu’ils sont PAS même AUTORISES à entrer dans leur propre dossier !!
pour ma part, je paume près de 200 euros de remboursement de frais de santé (une paille) et je ne suis pas certains après moultes démarches de récupérer un #indu en ma faveur de 200 balles résultant de prélèvements automatiques pour une couverture solidarité santé (#CSS, mais ils aiment pas la langue ordinaire, faut dire #C2S !) à laquelle j’étais de droit éligible gratos et de façon automatique du fait de dépendre du RSA socle durant la période concernée.
après déplacements, messages, coups de fils, courriers divers, tous suivis de non réponses (on me parle d’autre chose que ce qui motive mes démarches ah ah ah), j’ai l’impression de devoir entamer une procédure... pour que - comme Pôle, CAF et préfectures savent le faire - ils lâchent le morcif la veille d’une audience afin d’éviter une condamnation. grosse fatigue.
dernier contact en date :
moi, en guise de politesse un tant soit peu politique, une manie avec les employés qui font du phoning (I did some), quelque soit l’objet, et pour les commerciaux c’est le standard " non je suis pas disponible pour vos employeurs, désolé, et puisque vous ne pouvez sans doute pas faire grève, n’hésitez pas à prendre un arrêt maladie si vous avez une mutuelle qui vous couvre", après avoir pris un énième râteau dans les ratiches, je conclue , "bon courage à vous, ça ne doit pas être facile de claquer la porte au nez des gens comme ça madame"
l’agente qui m’a dit que c’est #normal que l’on me rembourse 40€ sur 220€ de frais de santé parce que c’est l’État mais pas eux qui fait payer chaque année 50 euros de #franchise sur les frais et que j’ai fait l’erreur d’aller au même labo d’imagerie que de coutume pour un truc éventuellement urgent mais qu’ils ont contrairement à l’habitude fait payer un dépassement : "mais non, rassurez-vous ! je suis très contente de mon métier, on aide les gens"
l’impression d’avoir affaire à un contrôleur sncf zélé qui fait tout pour te mettre à l’amende et que ça sourd, effectivement, le fascisme, l’obéissance infinie dans la bonne conscience à bloc.
Linting defensive and logical CSS with Stylelint plugins - LogRocket Blog
▻https://blog.logrocket.com/linting-defensive-logical-css-stylelint-plugins
En lien avec ▻https://ishadeed.com/article/defensive-css & ▻https://seenthis.net/messages/476044
#CSS : place-content
▻https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.
Ne rigole pas, je découvre donc seulement maintenant cette ligne qui va changer ma vie :
place-content: center
#CSS Tip: Learn CSS the easy one
▻https://css-tip.com
A small website where you can learn a new CSS #trick every day. All the CSS secrets are here (Flexbox, CSS Grid, Gradients, Colors, Animation, Masking, Selectors, etc). It takes one minute to read a tip.
Quelques trucs sympas comme ▻https://css-tip.com/horizontal-line-title ou ▻https://css-tip.com/css-ribbon
The problems with viewport units - Kevin Powell
▻https://www.youtube.com/watch?v=veEqYQlfNx8
Intéressant :
– les unité svh
et dvh
– le clamp avec le +1rem
pour la taille des polices.
#css
Lighthouse overview - Chrome Developers
▻https://developer.chrome.com/docs/lighthouse/overview
Est-ce que vous avez une opinion à propos de cet outil ?
Je me contente toujours de validator.w3.org et de Lynx (en plus de Firefox, Chrome et Safari sous des OS divers) pour tester mes sites. C’est déjá assez coûteux quand tu fabriques du code propre (validator) et des pages facilement accessibles (des textes bien structurés, pas de menus interminables en haut de page, des alt/titre pour les images et vidéos, des liens parlants etc.). Avec l’inspecteur de code de Firefox et les autres outils (SPIP) je me sens à l’aise, alors quel argument est-ce qu’il y a pour ajouter Lighthouse à ma boîte d’outils (dans ungoogled Chromium ) ?
Je m’en fous du nombre de visiteurs répertoriés car je ne travaille plus du tout pour les commerciaux, et toute la magie noire SEO ne m’intéresse plus que pour m’amuser.
Merci pour vos idées.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
Lighthouse logo
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
You can also use Lighthouse CI to prevent regressions on your sites.
Je les utilise. Par habitude j’utilise plutôt la version Web PageSpeed Insights :
►https://pagespeed.web.dev
mais il me semble que ce sont exactement les mêmes indicateurs.
En gros de base on obtient des scores très corrects avec un SPIP bien configuré. Et ça indique comment faire pour passer à plus de 90/100 relativement facilement.
Un intérêt : c’est souvent utile pour montrer à un client que ce qu’il réclame, ça va faire « du mal » à son site. Parce qu’expliquer « nan mais faut pas faire ça, c’est un mauvais usage du Web », tous les clients s’en foutent, il y a forcément un petit cousin, une boîte de comm, un spécialiste de je-ne-sais-quoi qui va revenir à la charge pour lui expliquer que « si si, c’est ça qu’il faut faire ». Alors tu fais un coup de PageSpeed sur ta version, tu fais conserve une copie d’écran, ensuite tu implémentes le truc en question, ou bien tu vas sur une page qui l’a déjà implémenté, et tu fais passer PageSpeed là-dessus, et tu montres les scores qui passent en dessous des 50/100 et les voyants qui deviennent rouges, c’est généralement très convaincant… :-)
Ah, c’est un truc pour les pros. Je ne me considère pas comme faisant partie de cette catégorie de créateurs de sites. #merci @arno
Pour moi qui ne fait des sites web que pour des « clients » qui me font confiance et qui ne se laissent pas influencer par les « petits cousins » cela veut dire que oui, c’est utile mais ...
– c’est l’outil que j’utiliserai après tous les autres tests
– s’il y aura un problème de rapidité d’affichage que je n’arriverai pas à cerner.
:-)