#19298

Why is CSS Frustrating? | CSS-Tricks

Putain oui :

CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you're never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself.

One rule of thumb for mitigating this is, never be more explicit than you need to be. Web pages are responsive by default. Writing good CSS means leveraging that fact instead of overriding it. Use percentages or viewport units instead of a media query if possible. Use min-width instead of width where you can. Think in terms of rules, in terms of what you really mean to say, instead of just adding properties until things look right. Try to get a feel for how the browser resolves layout and sizing, and make your changes and additions on top of that judiciously. Work with CSS, instead of against it.

Le CSS a effectivement cette particularité où modifier un truc agit sur plusieurs autres trucs.
Par exemple, mettre un élement en « display: inline » annule toute déclaration de width et de height. Un « margin: auto » a des effets surprenants dans le cas des éléments flex/grid ou autre (en tout cas, c’est surprenant la première fois, mais au final c’est parfaitement logique !)

Ensuite, il dit que les pages web sont responsives et auto-zoomantes par défaut, et c’est vrai : une seule ligne <meta> suffit à rendre votre page lisible sur mobile.
Le problème c’est que généralement en CSS on commence par tout fixer en taille, puis, on rajoute encore plus de CSS pour tout détacher et rendre ça responsive. L’ensemble fonctionne, ça n’est pas le problème, mais on se retrouve avec 3 000 lignes de CSS impossible à maintenir correctement.

Si j’avais mon conseil à dire : acceptez le fait que certains éléments aient des styles propres à eux : que les titres aient des marges, que les tableaux aient des bordures, que les listes à puces soient indentés, que les paragraphes soient espacés.
Ne mettez pas des hauteurs fixes : préférez min-height et laissez le contenu dicter la hauteur des éléments. Laissez la taille de l’écran dicter la largeur de vos éléments.

https://css-tricks.com/why-is-css-frustrating/

#18913

Styling Links with Real Underlines | CSS-Tricks

Tiens, je ne savais pas qu’on pouvait changer la couleur du « text-decoration: underline » ! Je sais que certains utilisent une bordure, mais là c’est vraiment la couleur d’un soulignement dont on parle.

Ah et la dernière chose dans l’article, là, où le soulignement évite les empattements (sur les « p », les « j » ou les « q »), c’est vraiment jolie *˛* (c’est une ligne de CSS, mais seulement pour Chrome pour l’instant)

https://css-tricks.com/styling-links-with-real-underlines/

#18819

::marker - CSS : Feuilles de style en cascade | MDN

Ah tiens, on peut maintenant styliser les puces des listes à puce, avec le pseudo-element ::marker :

li::marker {
    color: red;
}

Donnera une couleur rouge aux puces des listes (OL et UL).

https://developer.mozilla.org/fr/docs/Web/CSS/::marker

#18694

Note : thème sombre

Je suis en train de faire un thème sombre pour mon lecteur RSS (tweet)

Si effectivement c’est pas aussi simple qu’un simple « filter: invert(1); » en CSS, il y a une petite astuce qui assombrit tout en conservant les tons de couleur :

filter: hue-rotate(180deg) invert(1)

Comme ça, on inverse la luminosité et les couleurs, mais un petit « hue-rotate » de 180 degrés permet de retrouver les mêmes tons.

Si on part d’un bleu ciel, le invert(1) donne rose foncé. Ensuite un rose foncé avec le hue(rotate(180deg) donne un bleu-vert sombre : on reste dans le même ton.

https://lehollandaisvolant.net/?mode=links&id=20190607115704

#18595

Un chercheur trouve une mthode CSS pour suivre les mouvements de la souris, qui pourrait servir pister les internautes avec JS dsactiv

Purée…

C’est simple mais ça marche :

button:hover {
    background-image: url(image.png);
}

Avec ça, la requête vers "image.png" n’est faite que lors du :hover.
Ça permet de voir où l’utilisateur passe sa souris, par exemple sur quel produit, sur quel lien. C’est un peu du « eye tracking » de la souris.
Avec :active et :focus, c’est encore plus puisant.

Il existe la même méthode pour trouver les mots de passe des gens, avec

input[value=$"a"] { background: url(a.png); }

Si le champ finit par un "a", alors une requête vers a.png est faite.

En mettant une ligne CSS par lettre, les requêtes successives correspondent au mot de passe tapé.

Y a un module Firefox pour s’en protéger : https://addons.mozilla.org/en-US/firefox/addon/css-exfil-protection/?src=search

Via Korben : https://twitter.com/Korben/status/1126767360818331650

https://web.developpez.com/actu/260619/Un-chercheur-trouve-une-methode-CSS-pour-suivre-les-mouvements-de-la-souris-qui-pourrait-servir-a-pister-les-internautes-avec-JS-desactive/

#18500

Fixed Headers, On-Page Links, and Overlapping Content, Oh My! | CSS-Tricks

C’est un problème familier : quand on utilise des ancres dans les pages et qu’on a un menu (header) fixe, l’ancre peut être caché sous le menu quand on clic dessus.

Il y a une nouvelle propriété CSS qui permet de dire au navigateur que la zone de scroll doit recevoir une marge intérieure, égale à la hauteur du menu fixe par exemple :

body {
  scroll-padding-top: 70px; /* height of sticky header */
}

Ça ne marche que dans Chrome pour l’instant.

Pour les autres navigateurs, j’avais mis au point ceci : https://codepen.io/lehollandaisvolant/pen/JOOQeq (à l’aide d’un ::before et d’une marge négative).

https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

#18448

Sophisticated Partitioning with CSS Grid | Rob Weychert

Mouais enfin…

Grid c’est cool, mais quand on en vient à faire ça :

/* 2x1 partitions */

  .div3 .show:nth-child(3n+2),    /* div3 partition 02 of 03 */
  .div3 .show:nth-child(3n+3),    /* div3 partition 03 of 03 */
  .div5 .show:nth-child(15n+4),   /* div5 partition 04 of 15 */
  .div5 .show:nth-child(15n+5),   /* div5 partition 05 of 15 */
  .div5 .show:nth-child(15n+12),  /* div5 partition 12 of 15 */
  .div5 .show:nth-child(15n+15),  /* div5 partition 15 of 15 */
  .div6 .show:nth-child(12n+5),   /* div6 partition 05 of 12 */
  .div6 .show:nth-child(12n+6),   /* div6 partition 06 of 12 */
  .div6 .show:nth-child(12n+11),  /* div6 partition 11 of 12 */
  .div6 .show:nth-child(12n+12),  /* div6 partition 12 of 12 */
  .div7 .show:nth-child(14n+2),   /* div7 partition 02 of 14 */
  .div7 .show:nth-child(14n+3),   /* div7 partition 03 of 14 */
  .div8 .show:nth-child(16n+2),   /* div8 partition 02 of 16 */
  .div8 .show:nth-child(16n+5),   /* div8 partition 05 of 16 */
  .div8 .show:nth-child(16n+12),  /* div8 partition 12 of 16 */
  .div8 .show:nth-child(16n+13),  /* div8 partition 13 of 16 */
  .div9 .show:nth-child(9n+2),    /* div9 partition 02 of 09 */
  .div9 .show:nth-child(9n+5),    /* div9 partition 05 of 09 */
  .div9 .show:nth-child(9n+8),    /* div9 partition 08 of 09 */
  .div9 .show:nth-child(9n+9) {   /* div9 partition 09 of 09 */
    grid-column: auto / span 2;
  }

  .div3 .show:nth-child(3n+2) .headliner,
  .div3 .show:nth-child(3n+3) .headliner,
  .div5 .show:nth-child(15n+4) .headliner,
  .div5 .show:nth-child(15n+5) .headliner,
  .div5 .show:nth-child(15n+12) .headliner,
  .div5 .show:nth-child(15n+15) .headliner,
  .div6 .show:nth-child(12n+5) .headliner,
  .div6 .show:nth-child(12n+6) .headliner,
  .div6 .show:nth-child(12n+11) .headliner,
  .div6 .show:nth-child(12n+12) .headliner,
  .div7 .show:nth-child(14n+2) .headliner,
  .div7 .show:nth-child(14n+3) .headliner,
  .div8 .show:nth-child(16n+2) .headliner,
  .div8 .show:nth-child(16n+5) .headliner,
  .div8 .show:nth-child(16n+12) .headliner,
  .div8 .show:nth-child(16n+13) .headliner,
  .div9 .show:nth-child(9n+2) .headliner,
  .div9 .show:nth-child(9n+5) .headliner,
  .div9 .show:nth-child(9n+8) .headliner,
  .div9 .show:nth-child(9n+9) .headliner {
    font-variation-settings: "wdth" 900;
  }

… et donner une style spécifique à *chaque* div, autant ne pas utiliser grid et donner un height/width en pourcentage, ça reviendra au même.

L’idée d’un truc responsive, c’est pas seulement avoir un truc flexible, c’est aussi voir les éléments se réorganiser sur la page en fonction de la taille d’écran, et de façon optimale.

Grid et Flex sont très pratiques, c’est indéniable, mais y a beaucoup de masturbation de styles à leur sujet quand-même…

https://v6.robweychert.com/blog/2019/03/css-grid-sophisticated-partitioning/

#18423

Why can't I set the font size of a :visited link?

Tiens, j’ignorais ce mécanisme CSS protégeant la vie privée.

Par contre, est-ce que ça marche si j’utilise ça : https://developer.mozilla.org/fr/docs/Web/CSS/element  ?

En gros, ça permet de texturiser un div, par exemple, et de mettre cette texture en fond d’un autre élément (pratiquement pour faire des captures d’écran d’un nœud HTML).

Ensuite, je récupère la texture, je fais une analyse colorimétrique et je sais si le lien est gris ou bleu (visité ou non).

À voir comment fonctionne cette propriété : si elle prend vraiment une capture d’écran de la portion de page, ou si elle utilise l’arbre DOM/COM pour produire l’image.

https://jameshfisher.com/2019/03/08/why-cant-i-set-the-font-size-of-a-visited-link.html

#18402

font-feature-settings - CSS : Feuilles de style en cascade | MDN

Encore un petit bout de CSS sympa. En particulier le "tnum" qui permet d’aligner les chiffres verticalement :


1,23
2,34
3,45

Ici, par exemple, ça alignerait les unités les unes sous les autres, comme les dixièmes, les centièmes.

Par contre, je ne vois pas l’intérêt par rapport à une police à chasse fixe, et ceci ne fonctionne que pour les polices OpenType.

Peut-être en combinaison de l’unité 'ch' ?

https://developer.mozilla.org/fr/docs/Web/CSS/font-feature-settings

#18397

:empty - CSS : Feuilles de style en cascade | MDN

C’est tellement pratique ça !

Par exemple, je mets un <div id="error"></div> sur ma page, et si y a une erreur, JS/AJAX met l’erreur dedans. Si y a pas d’erreur, le nœud reste vide.

Ben suffit de faire ça :
#error { background: red }
#error:empty { display: none;}

Pas d’erreur ? Le nœud est vide, il est caché.
Une erreur ? Le nœud n’est pas vide, il s’affiche.

Pas besoin de s’emmerder à ajouter du JS pour faire des if/else, ni d’ajouter une classe, ni d’ajouter un nœud dynamiquement ou de le virer en cas d’absence d’erreur.

Si le code est conçu correctement, une erreur vide c’est une chaîne vide, et donc le :empty reste valable.

Vraiment, en plus de grid/flex (qui sont des grosses nouveautés du CSS), ce genre de petits truc est sympa aussi.

Même remarque pour le ":placeholder-shown" (sur un input/textarea). Il permet de contourner le "bug" qui fait qu’on peut pas utiliser de « input[value=""] » car la valeur détectée par CSS est celle de la source HTML, pas celle du DOM, et ajouter du texte dans un champ ne déclenche pas ce sélecteur CSS.

Et bien d’autres…

https://developer.mozilla.org/fr/docs/Web/CSS/:empty

#18384

Note CSS, pseudo-éléments et icônes web-fonts

En HTML/CSS, Si vous utilisez des icônes avec une web-font (donc dans un fichier woff/woff2 dédié aux icônes), et que vous affichez les icônes dans un pseudo-élément avec la propriété "content" alors, il est possible que vous fassiez comme moi :

::before, ::after {
    font-family: icons.woff;
}

Comme ça, tous les pseudo-éléments de la page, pour peu qu’ils aient un « content: », utiliseront la police des icônes.

Sauf que, et c’est pas intuitif, il faut savoir que le contenu de l’attribut « alt » des images est affiché avec un pseudo-élément (au moins dans Firefox).

Donc lui aussi va utiliser la police dédiée aux icônes, ce qui n’est pas une bonne chose : généralement les icônes sont encodés sur 3 ou 4 octets, et ça risque d’afficher un charabia d’unicode invalide.

Faut donc ajouter :

img::after, img::before {
    font-family: initial;
}

Ou, si vous voulez combiner ces deux déclarations CSS en une seule :

:not(img)::before, :not(img)::after {
    font-family: icons.woff;
}

Ça appliquera la police des icônes sur tous les éléments, sauf les images.

… par contre, ça ne tiendra pas compte des autres éléments qui ont un attribut de remplacement (les area et certains input). Du coup, je propose ça :

:not([alt])::before, :not([alt])::after {
    font-family: icons.woff;
}

Application sur tous les pseudo-éléments qui n’ont pas d’attribut « alt ».

https://lehollandaisvolant.net/?mode=links&id=20190302174443