Lyra Rebane défend l’idée que beaucoup de sites n’ont pas besoin de JS ou de frameworks lourds pour offrir une expérience riche : modernes, HTML et CSS seuls suffisent souvent. L’article montre de nouveaux outils CSS (naming, nesting, pseudo-classes, color mixing, unités viewport dynamiques, etc.), des composants interactifs accessibles (via « \:checked », « \:has », « details/summary », etc.), et des effets visuels performants. L’auteur insiste aussi sur les bénéfices pour la performance, l’accessibilité, la vie privée, et le plaisir de coder léger, esthétique et fonctionnel.
Dans son article, Josh W. Comeau explore les défis et solutions pour créer des effets de décalage de couleurs dynamiques en CSS, notamment pour des animations de particules. Il explique d’abord comment générer des couleurs aléatoires en HSL pour une cohérence visuelle, mais souligne une limitation majeure : les navigateurs interpolent les couleurs en RGB, ce qui produit des teintes grisées et peu naturelles lors des transitions entre deux couleurs HSL. Par exemple, une transition entre rouge et turquoise passe par du gris, car les canaux RGB convergent vers des valeurs similaires. Pour contourner ce problème, il propose d’utiliser la propriété CSS filter: hue-rotate(), qui permet de faire tourner la teinte de manière fluide et naturelle autour de la roue chromatique, sans perte de saturation. Il partage aussi des astuces pour ajouter des effets de scintillement aléatoires aux particules, améliorant ainsi le réalisme de l’animation.
L’interpolation des couleurs en CSS permet de générer des couleurs intermédiaires entre deux points de couleur, offrant ainsi des palettes uniques, des dégradés fluides et des transitions harmonieuses. Cette technique est omniprésente en CSS : dans les dégradés (linear-gradient, conic-gradient), les animations, les transitions, les filtres, ou encore la fonction color-mix(). Elle repose sur une syntaxe formelle, comme in <espace-couleur> <méthode-interpolation-teinte>?, où l’on spécifie l’espace de couleur (rectangulaire : srgb, lab, oklab ; ou polaire : hsl, lch, oklch) et la méthode d’interpolation de la teinte (shorter, longer, increasing, decreasing). Les espaces polaires, comme oklch, se distinguent par leur représentation cylindrique (luminosité, chroma, teinte), permettant des interpolations circulaires de la teinte, à l’image d’une horloge où l’on choisit le chemin le plus court ou le plus long entre deux valeurs. Par exemple, color-mix(in lch longer hue, red, blue) utilise un arc plus long pour mélanger les couleurs, créant des effets visuels riches. Cette approche est particulièrement utile pour concevoir des dégradés dynamiques, des animations colorées ou des mélanges de couleurs innovants, enrichissant ainsi l’expérience visuelle des sites web.
Suite de https://meyerweb.com/eric/thoughts/2025/08/07/infinite-pixels/ , Eric Meyer explore dans ce billet les comportements inattendus et parfois incohérents entre navigateurs (Safari, Chrome, Firefox) lors de l’utilisation du mot-clé CSS infinity dans des calculs (calc()). Il teste son impact sur des propriétés comme text-indent, word-spacing, letter-spacing, z-index ou encore animation-duration. Résultat : selon le navigateur, les valeurs calculées varient énormément (de 33 millions de pixels à des nombres astronomiques), et certaines propriétés, comme z-index, voient leur valeur plafonner à 2147483647, rendant impossible un "au-delà de l’infini". Les animations avec une durée infinie deviennent inutilisables, surtout sur Safari, tandis que diviser un nombre fini par l’infini donne systématiquement 0, une rare harmonie entre les navigateurs. Une plongée ludique et technique dans les limites (ou leur absence) de CSS ! [
Eric Meyer, au détour d'un message sur Mastodon, est tombé sur une règle CSS intrigante : width: calc(infinity * 1px); Il a décidé de mener des tests avec Chrome, Safari et Firefox afin de voir quelles valeurs sont réellement utilisées, ce qui a donné des résultats assez étonnants.
L'article explore comment certaines propriétés CSS, bien que conçues pour améliorer la mise en page, peuvent nuire à l'accessibilité pour les utilisateurs de technologies d'assistance. Il met en lumière des problèmes subtils liés à l'utilisation de propriétés comme display et list-style, qui peuvent altérer la sémantique des éléments HTML, rendant les tableaux et les listes inaccessibles, notamment sur Safari avec VoiceOver. L'article propose des solutions, telles que l'utilisation de rôles ARIA pour préserver l'accessibilité, et offre une checklist pour garantir que les styles CSS ne compromettent pas l'accessibilité avant le déploiement d'un projet.
Amusant, il est possible d'utiliser les CSS dans les console.log en mettant un marqueur %c dans le message, et un 2e argument avec les CSS.
Par exemple console.log('%cCoucou le monde', 'color: blue; font-size: 20px;');
currentColor en CSS est un mot-clé dynamique représentant la valeur de la propriété color d'un élément. Utilisé pour les bordures, ombres, ou icônes SVG, il permet de synchroniser automatiquement ces propriétés avec la couleur du texte, facilitant ainsi la maintenance et la cohérence du style. Par exemple, en définissant border: 2px solid currentColor, la bordure adopte la couleur du texte et s'ajuste si celle-ci change. Cela évite la duplication de code et simplifie la création de thèmes. currentColor est bien supporté par tous les navigateurs, y compris Internet Explorer 9.
Un billet d'humeur... dont je plussoie la conclusion
L'auteur décrit l'utilisation de Stylelint pour vérifier la bonne application de conventions CSS. Il donne plusieurs exemples de conventions, et conclut avec une configuration complète.
Une astuce pour donner du style au texte alternatif des images - pratique si celles ci ne se chargent pas
L'article explore le mystère des hauteurs en pourcentage en CSS, un concept souvent déroutant pour les développeurs. Il explique que, contrairement à la largeur, la hauteur en CSS est calculée différemment, ce qui peut entraîner des comportements inattendus. Par exemple, définir une hauteur en pourcentage sur un élément peut ne pas fonctionner si la hauteur du parent dépend de celle de ses enfants, créant ainsi un calcul circulaire. l'auteur propose des solutions, comme l'utilisation de hauteurs explicites ou de techniques de mise en page modernes comme Flexbox et Grid, pour résoudre ces problèmes et obtenir des résultats prévisibles.
Il est possible d'appliquer des styles CSS à SVG. Il y a 3 cas principaux : SVG inline (facile à manipuler en CSS), SVG externe (limité), et SVG via
Ce tutoriel explore des techniques avancées pour personnaliser les styles de listes en CSS, en utilisant notamment les grilles CSS pour une mise en page flexible. Il aborde l'utilisation des attributs de données pour créer des puces personnalisées, les compteurs CSS pour styliser les listes ordonnées, et les variables CSS pour des styles spécifiques à chaque élément de liste. L'article propose également des solutions pour des listes multi-colonnes réactives et introduit l'utilisation du sélecteur ::marker pour un contrôle direct sur les marqueurs de liste.
L'article explore la propriété CSS border-image, souvent sous-utilisée malgré son potentiel créatif. Introduite il y a une décennie, cette propriété permet d'ajouter des images aux bordures des éléments, y compris les cellules de tableaux. L'auteur explique les différentes propriétés et valeurs de border-image, comme border-image-source, border-image-slice, et border-image-repeat, et montre comment les utiliser pour créer des effets visuels uniques sans compromettre les performances. Il encourage les développeurs à redécouvrir cette propriété pour enrichir leur boîte à outils de design.
Le guide complet sur le sujet
L'article montre comment créer un jeu de "devinez le drapeau" en JS natif et CSS, sans framework ni lib. L'auteur explique pas-à-pas ce qu'il fait... C'est très instructif
Tout est dans le titre
En résumé, remplacez tous les @import comme @import url("imported.css"); par <link rel="stylesheet" href="imported.css">
Ça a un gros impact sur les performances du site
À date (21 décembre 2024), c'est le guide ultime pour générer les triangles des infobulles uniquement en CSS