Note : selecteur d’attribut CSS et ::after/::before

#17431

J’en ai peut-être déjà parlé, mais je trouve qu’on n’exploite pas assez certaines perles en CSS.

Par exemple, dans mon lecteur RSS en JS, quand j’ouvre un post, il est marqué comme lu automatiquement.
Dans ma liste de flux, chaque flux est suivi par un bouton qui affiche le nombre d’éléments non lus pour ce site. Chaque flux, dans une liste <li> a un attribut « data-nb-unread » qui contient donc le nombre de posts non lus.
Quand un flux est ouvert, le JS décrémente ce nombre et c’est comme ça qu’un flux est marqué comme lu (il n’y a pas de boucle qui recompte à chaque fois le nombre de posts : le gain de perfs est énorme).

Pour afficher le bouton, plutôt d’ajouter un <span> qui contient le nombre, qu’il faut donc également décrémenter, j’utilise désormais ça :

li[data-nbunread]::after {
    content: attr[data-nb-unread];
}

Ce que ce CSS fait, c’est ajouter un ::after sur chaque <li> (donc pour chaque site) et y placer le contenu de l’attribut « data-nb-unread » du même <li>. Très pratique : le ::after est directement mis à jour par le navigateur quand l’attribut changer.

On peut faire mieux.

Par soucis de clarté, je n’affiche le nombre de flux QUE sur les lignes où ce nombre est différent de 0. Les flux qui n’ont pas de posts non-lus n’ont donc pas de bouton avec « 0 ».

Le code devient :

li:not([data-nb-unread="0"])::after {
	content: '('attr(data-nbrun)')';
}

Ça permet donc d’afficher le bouton sur tous les flux où l’attribut « data-nb-unread » n’est pas égal à 0.

Le sélecteur d’attribut est très puissant et fonctionne un peu comme les regex.
Par exemple, si un lien est en anglais, il peut posséder un attribut « lang » :

<a href="//site.com/page_en_allemand.html" lang="de-de">lien</a>

En CSS, on peut ajouter un petit drapeau allemand :

li:[lang="^=de"])::after {
    content: "";
    background: src(drapeau/allemagne.jpg) no-repeat;
}

Ici le « ^= » signifie « qui débute par … », mais il y en a d’autres (que l’ont peut tous combiner avec le :not() si l’on souhaite.

https://developer.mozilla.org/fr/docs/Web/CSS/attr
https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut

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

What’s wrong with CSS-in-JS? | Brad Frost

#17373

J'ai jamais été fan du full-CSS-in-JS, et je rejoins ce que disait Daniel Glazman ici : les arguments généralement invoqués pour dire "non au CSS" ne tiennent juste pas debout et tendent même plutôt à démontrer que CSS a de bon nombre de points communs avec des langages de programmation !

Le mieux quand on vient se greffer sur un projet déjà existant c'est évidement de respecter la structure de l'existant, mais s'il est nécessaire de tout recommencer ou de créer un truc nouveau, je préfère utiliser les différentes techno pour ce qu'elles ont été prévues :

- HTML pour le code source de la page et le contenu
- CSS pour la décoration
- JS pour l'interaction et l'interface .

On peut utiliser JS pour modifier le CSS ou le HTML, mais généralement c'est à éviter.
Quand il faut modifier ce qui s'affiche à l'écran, je ne touche pas aux éléments HTML : je fais switcher des classes et je laisse le CSS faire le reste.

Ça me semble être la solution la plus propre : sans CSS le HTML s'affiche et le contenu est visible, et sans JS aussi, donc le contenu reste accessible. Ce n'est pas toujours la solution la plus légère par contre...

CSS Variables

#17299

Une intro simple pour les variables CSS.

J’aime particulièrement l’idée tout en bas avec les media-queries.

https://flaviocopes.com/css-variables/

Third party CSS is not safe - JakeArchibald.com

#17274

Maieuh…

Il est possible de faire un keylogger en CSS…

L’article, globalement, suggère (à juste titre) que si on utilise des scripts externes, ça revient à donner les clés de son site à quelqu’un d’autre (celui qui gère ledit script : JS peut tout faire sur la page, en fait, y compris remplir des champs, modifier des formulaires, faire des requêtes…).

Utiliser des styles externes semble moins risqué, mais il reste tout de même possible de faire beaucoup de choses… Le keylogger est juste un exemple.

La conclusion à tirer est qu’il faut tout héberger chez soi. Et surtout, comme d’hab, faire attention à ce qu’on récupère : un fichier CSS téléchargé puis hébergé sur son site peut très bien lui-même faire des includes() ailleurs, y compris sur des images, des svg…

https://jakearchibald.com/2018/third-party-css-is-not-safe/

Ultra-light JS/CSS image slider

#17232

Hop, à nouveau tous les scripts / lib de sliders que je trouve sont trop lourds, trop complets, demandent jQuery…

… du coup j’ai pondu un slider très simple en quelques lignes de JS & CSS.

Rien de complexe, mais c’est ultra-léger, sans dépendances, et ça marche.
Et c’est assez simple à comprendre pour que vous puissiez ajouter ce que vous voulez vous-même :).

CSS3 structural pseudo-class selector tester

#17219

Un testeur pour les "n+x" dans les nth-child en CSS.

Essayez par exemple "4n", "4n+1", "-n+2", "-n-2", etc.

Pour mémo :
— sélectionner du ixième jusqu’à la fin : « n + x »
— sélectionner du début jusqu’à ixième : « -n + x »
— sélectionner du 3e jusqu’au 7e : nth-child(n+3):nth-child(-n+7)

(ce dernier n’est pas testable dans l’outil du lien)

http://lea.verou.me/demos/nth.html

Using CSS Counters - Pine

#17062

Un petit article sur les compteurs CSS.

C’est très pratique ! Perso je les utilise pour les h2, h3, h4 : ça me fait des documents avec des sections numérotées.

Ensuite, j’utilise JS pour récupérer tous les headings, et en faire un sommaire. Et j’utilise de nouveau les compteurs CSS.

Exemple : https://codepen.io/lehollandaisvolant/pen/wJgGdR (tout à la fois).
Exemple en live sur mon site :
http://lehollandaisvolant.net/tuto/bin/
http://lehollandaisvolant.net/tuto/responsive-css/
http://lehollandaisvolant.net/tuto/pagespd/

Je devrais peut-être en faire un article dédié, c’est tellement cool comme astuce !

(lien via)

https://pineco.de/using-css-counters/

Happier HTML5 Form Validation - daverupert.com

#16989

However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page.

Heu, ça doit être Chrome, parce que je n’ai pas ça sous Firefox.

Les champs se mettent en rouge que quand je clique dessus (et reste quand j’en sors), mais il n’y a rien qui se met en rouge avant d’avoir interagit avec.

Sinon on peut utiliser un [value=""] couplé avec un :not(:placeholder-shown)

(Oubliez pas que pour le sélecteur d’attribue, le CSS cible la valeur de l’attribut dans le code source, pas à l’objet du DOM. Donc un champ vide au chargement et qu’on remplirait, réagirait toujours au [value=""] parce que le code source (reçu) est vide, mais la variable se trouve en mémoire. Il faut passer par JS pour synchroniser les deux, d’où la méthode du [value=""] (champ vide, pas encore touché) couplé avec le :not(:placeholder-shown) (champ remplis, pas encore touché non plus).

http://daverupert.com/2017/11/happier-html5-forms/