#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

#18328

Why I Write CSS in JavaScript

J’ai pas de mots.

Le commentaire qui résume bien la situation, c’est ça :

AKA : too lazy to learn CSS specificity
https://mxstbr.com/thoughts/css-in-js/

#18246

Pure CSS scroll-shadow effect

Ajouter une ombre lors du scroll. Sans JS.

Certaines pages mettent une ombre sous l’entête (qui est fixe) seulement lors du scroll du contenu principal. C’est généralement fait en JS en détectant la position du scroll.

Ici, pas de JS, juste du CSS.

C’est réalisé par une astuce et des pseudo-éléments.

L’ombre est attachée au ::after de l’en-tête.

Quand on scroll le contenu principal, ce qui se passe, c’est que c’est comme une fenêtre coulissante : le contenu qui scrolle en haut est toujours là, juste caché sous l’en-tête et invisible.

À ça, j’ajoute un masque : ce masque est un ::before sous la partie qui scrolle. Le ::before scrolle avec la page.
Quand la page est en haut, le ::before est visible (pas masqué). Quand la page scrolle, le ::before est caché.

Ensuite, il suffit d’utiliser les bons z-index : le masque est au dessus de l’ombre, mais en dessous de l’en-tête. Comme ça, quand il est visible, il masque l’ombre.
Quand on scroll, le masque disparaît sous l’en-tête et l’ombre devient visible.

https://codepen.io/lehollandaisvolant/pen/QYdzzm?editors=1100

#18189

How browser rendering works — behind the scenes – LogRocket

Un article qui explique succintement comment fonctionne un moteur de rendu d’un navigateur, en particulier comment il traite le JS, l’arbre DOM (le HTML) et le CSSOM (le CSS).

La connaissance de ceci permet de savoir où placer les différents éléments.

Par exemple : le HTML commence à charger, mais le JS est bloquant : dès qu’il y a du JS dans la page (inline, ou non), alors le parsage du HTML se pause : ceci, car le JS peut modifier le HTML. Il est donc inutile de parser un truc qui peut être changé par la suite.

Or, le JS peut également toucher au CSS. Pour ça, le CSSOM doit être prêt. Donc le CSS doit être parsé pour que le JS puisse être éxécuté, et le JS doit être exécuté si on peut que le HTML soit parsé.

Dit autrement, le navigateur doit avoir fini de charger dans cet ordre :
– le CSS
– le JS (se finit après le JS)
– le HTML (terminé à la fin, quand la dernière balise se ferme)

Aussi, si on veut que la page s’affiche vite pour que le lecteur le lise rapidement, il faut donc que le CSS soit fini le plus tôt possible pour que l’information (portée par le HTML) soit affichée correctement.
Enfin, vu que le JS est bloquant, l’information utile de la page doit être affichée avant l’exécution des scripts.

Du coup, on voit bien que le CSS doit être placé au début du document et le JS à la fin : https://lehollandaisvolant.net/?d=2015/08/27/18/46/54-pourquoi-mettre-le-javascript-a-la-fin-et-le-css-au-debut

https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10

#18159

Pure CSS floating label

Un "floating label" en CSS qui marche tout le temps (sans JS).

Ça utilise le :placeholder-shown, mais peu importe, c’est relativement bien supporté : https://caniuse.com/#feat=css-placeholder-shown

Ah et surtout, ça utilise un vrai "label" et pas le placeholder, justement (qui est là et nécessaire, mais vide). Ça reste donc accessible pour les lecteur d’écran. Le fait de placer un span dans le label ne doit pas changer quoi que ce soit de ce côté là.

https://codepen.io/lehollandaisvolant/pen/vvavWJ?editors=1100

#18157

CSS3 Grid Layout - Alsacreations

Purée, les Grid en CSS c’est trop bien !

J’avais déjà été ébloui par les flex-box et leur possibilités (voir là), mais les grid ne sont pas en reste non plus !

Par exemple, je veux faire un formulaire pour remplir sont adresse postale, sous la forme suivante :


|--------------------------|
| n° | nom de rue          |
|--------------------------|
| complément               |
|--------------------------|
| cp     | ville           |
|--------------------------|
| état        | pays       |
|--------------------------|

C’est à dire en respectant la disposition des champs. (un peu comme là)

Le truc, c’est que j’ai juste un seul <div> avec sept <input> qui se suivent. Je ne veux pas utiliser de <p> ou de <br/>.

La solution ? Les grid (comme dans Tron) !

Je déclare le <div> comme étant une grille, divisée en 10 sections de 10 % chacune sur la largeur. Pour les lignes, le retour à la ligne est automatique ici (mais le grid permet également de modifier ça comme on veut !).

Ensuite, je donne à chaque <input> sa position : numéro de ligne, numéro de colonne et un sorte de « colspan ».

J’en ai fait un codepen pour voir ça directement : https://codepen.io/lehollandaisvolant/pen/aPjBXK?editors=1100

Et tout est parfaitement aligné, responsive et flexible ! C’est ça qui est tellement mieux qu’avec des floats !

https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html