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
Tout est dans le titre
Tout est dans le titre
L'auteur résout le problème de l'affichage web des exposants et autres caractères "décalés", uniquement en utilisant des css