L’article analyse de manière nuancée les avantages et les inconvénients des loaders SVG par rapport aux loaders au format raster pour les interfaces web, en mettant l’accent sur la performance et l’esthétique : les SVG offrent une meilleure évolutivité, des fichiers souvent plus légers et peuvent être stylés ou animés via CSS/DOM, ce qui améliore l’adaptabilité à différentes résolutions, tandis que les images raster peuvent être plus simples pour des visuels complexes mais entraînent des compromis en taille et en clarté, ce qui influence le choix selon les besoins de design et de performance.

Ce billet de blog explique comment utiliser les sprites pour animer des éléments web, une technique empruntée aux jeux vidéo. Les sprites consistent à créer une seule image contenant chaque frame d'une animation, puis à afficher chaque frame successivement pour créer l'illusion d'animation. L'auteur détaille la mise en œuvre de cette technique avec CSS, en utilisant les propriétés object-fit et object-position pour contrôler l'affichage des différentes frames. Il partage également des cas d'utilisation et les compromis à considérer pour déterminer quand utiliser ou ne pas utiliser les sprites.

modern.css propose des extraits de code CSS modernes pour remplacer les anciennes astuces. La page compare les anciennes méthodes avec les nouvelles techniques natives, offrant des solutions plus propres et plus efficaces. Par exemple, centrer un élément avec display: grid et place-items: center remplace les hacks avec position: absolute et transform. Les snippets couvrent divers aspects du CSS, tels que les sélecteurs, la mise en page, les animations, les couleurs et la typographie, avec des indications de compatibilité des navigateurs.

L'article de Kevin Hamer sur CSS-Tricks explore des méthodes pour approximer la fonction contrast-color() en CSS, qui n'est pas encore largement supportée par les navigateurs. Il explique comment utiliser les espaces de couleur et d'autres fonctionnalités CSS pour déterminer si un texte doit être en blanc ou en noir pour un contraste optimal, en se basant sur les directives WCAG 2.2. L'auteur propose une solution utilisant la lumière perceptuelle (L*) de l'espace de couleur CIELAB, offrant une alternative plus lisible et maintenable aux formules complexes basées sur la luminance.

Les technologies anciennes du navigateur, notamment XPath et certaines parties du stack XML, restent utiles malgré l’abstraction apportée par les frameworks modernes, car elles permettent des opérations difficiles ou impossibles avec les outils courants comme les sélecteurs CSS, par exemple interroger le DOM selon la position relative des éléments ou extraire directement des valeurs complexes. L’article montre que combiner XPath et CSS peut fournir des requêtes plus puissantes et robustes, particulièrement pour les tests automatisés où XPath peut cibler des éléments même si les classes ou la structure changent, tout en soulignant que certaines technologies comme XSLT 1.0 sont en voie de dépréciation dans les navigateurs, ce qui pourrait réduire une partie de cet écosystème sans pour autant faire disparaître XPath lui-même.

L'article de Blake Lundquist sur Smashing Magazine explore l'utilisation de la nouvelle règle CSS @scope comme alternative aux conventions de nommage rigides (comme BEM) et aux abstractions lourdes (comme les frameworks CSS-in-JS). Il souligne les défis de maintenir des styles CSS dans des interfaces complexes, où les styles fuient souvent vers des zones non intentionnelles, entraînant des sélecteurs de plus en plus spécifiques. Les conventions de nommage comme BEM peuvent aider, mais elles sont souvent difficiles à maintenir dans des applications interactives. Les développeurs se tournent alors vers des frameworks comme Tailwind pour éviter la cascade CSS. Cependant, cette approche a aussi ses inconvénients, comme des configurations de build lourdes et des styles mélangés avec le markup. L'auteur suggère que @scope pourrait offrir une solution plus élégante en permettant de scoper les styles de manière plus intuitive et maintenable.

Ce billet explique comment générer des PDF à partir de HTML et CSS en utilisant Weasyprint, un outil Python. L'auteur, insatisfait par LaTeX, préfère utiliser des langages qu'il maîtrise mieux. Le tutoriel commence par un exemple simple de conversion HTML en PDF, en passant par l'ajout de styles CSS et diverses astuces pour personnaliser les documents. Il met l'accent sur l'importance des métadonnées et de l'accessibilité des PDF. J'ai découvert des astuces étonnantes : les types de page (page: xxx), la récupération du décompte (target-counter, non documentée dans la MDN !), les sélecteurs de page (:left :right), les règles de marge (@bottom-left @bottom-right), la position "running", etc.

Cet article explore le concept des "stacking contexts" en CSS, souvent mal compris et source de problèmes de mise en page. Il explique comment certains éléments HTML sont visuellement empilés les uns sur les autres grâce à un axe z imaginaire, créant une perception de profondeur. Les "stacking contexts" sont créés par des propriétés CSS comme position (avec z-index), opacity, transform, et contain. L'auteur souligne que les éléments sont d'abord empilés par contexte, puis par ordre de z-index au sein de chaque contexte. L'article propose des approches pratiques pour "déstacker" les éléments lorsque cela est nécessaire.

L'auteur partage son "CSS reset" personnalisé, expliquant pourquoi il préfère définir ses propres styles par défaut plutôt que d'utiliser ceux des navigateurs. Il détaille chaque règle CSS appliquée, comme la boîte de modèle border-box, la suppression des marges et des paddings par défaut, et la désactivation de l'ajustement automatique de la taille du texte sur mobile. Il utilise également des couches de cascade pour donner une faible spécificité à ses règles. Un partage utile pour les développeurs front-end cherchant à standardiser leurs projets.

Il s'agit d'un outil en ligne à qui vous donnez votre code CSS et qui est capable de repérer le code "daté" et de proposer des remplacements plus modernes

Découvrez quatre innovations CSS révolutionnaires : l'imbrication native (CSS Nesting), la gestion des couches (@layer), les requêtes de conteneur (Container Queries) et le sélecteur :has(). Ces fonctionnalités, désormais supportées par les navigateurs, transforment la conception des styles en offrant un code plus lisible, une gestion simplifiée des priorités et un responsive au niveau composant. Prêtes pour la production, elles marquent un tournant dans l'organisation et la modularité des styles CSS.

Ce billet de blog de Chris Coyier sur Frontend Masters explique comment créer des menus contextuels popover en utilisant le positionnement d'ancrage en CSS. L'auteur montre comment utiliser des éléments HTML comme <button> et <menu> (qui est en réalité une liste non ordonnée <ul>) pour créer un menu contextuel, avec des attributs comme command, commandfor et interestfor pour gérer l'ouverture et la fermeture du menu sans JavaScript. Le positionnement du menu est géré via des styles CSS avec des ancres nommées, permettant une animation fluide lors de l'ouverture et de la fermeture. L'article inclut également des considérations pour les retombées de positionnement et des liens vers des ressources supplémentaires.

Ce tutoriel explique comment utiliser CSS Subgrid pour aligner harmonieusement un catalogue de produits, même avec des images de ratios différents et des descriptions de longueurs variables. En créant une grille parente avec des rangées définies et en utilisant grid-template-rows: subgrid pour les éléments enfants, on assure un alignement parfait des titres et des boutons, évitant ainsi l'effet "escalier" peu professionnel. La solution propose une structure HTML sémantique avec des balises <article> pour chaque produit et un CSS qui définit une grille parente avec quatre rangées distinctes.

Ce guide explique comment utiliser CSS Subgrid pour aligner parfaitement des éléments dans des grilles complexes, comme des cartes de tarifs. Le Subgrid permet à un élément enfant d'adopter la grille de son parent, garantissant un alignement dynamique et précis. Le tutoriel détaille la structure HTML, le code CSS nécessaire, et les avantages de cette technique, comme la maintenance simplifiée et les performances optimisées. Un exemple pratique avec des cartes de tarifs est fourni, ainsi que des conseils pour optimiser avec LESS. Le guide recommande de maîtriser les bases de CSS Grid avant de se lancer dans le Subgrid.

Dans cet article de HTMHell, Darice de Cuba explique l'importance de nommer les classes CSS de manière générique et indépendante du design. Elle souligne que les noms de classes doivent refléter le contenu et non la présentation, afin de faciliter les modifications futures du CSS sans toucher au HTML. Elle donne des exemples de bonnes et mauvaises pratiques, et conclut en insistant sur l'importance de maintenir un code lisible et facile à modifier.

Cet article met en lumière l'utilisation excessive de JavaScript pour résoudre des problèmes qui pourraient être mieux gérés par CSS. L'auteur, Chizaram Ken, souligne que les lacunes de connaissances poussent souvent les développeurs à sur-ingénieriser des solutions, ce qui impacte négativement les performances. Par exemple, des fonctionnalités CSS comme content-visibility: auto et les unités de vue modernes (dvh, svh, lvh) offrent des solutions efficaces sans JavaScript, mais les développeurs continuent de privilégier des solutions JavaScript par habitude. L'article explore des problèmes spécifiques comme la virtualisation dans React, les requêtes de conteneur et les animations de défilement, en proposant des alternatives CSS et en discutant des cas où JavaScript reste pertinent. Un appel est lancé pour éviter d'utiliser useEffect et useState pour des problèmes de rendu, en insistant sur l'importance de comprendre les capacités natives du navigateur avant de recourir à des bibliothèques JavaScript.

L'article explore comment réduire la charge de travail de JavaScript en utilisant des fonctionnalités modernes de HTML et CSS. Il propose de remplacer certains patterns JavaScript par des méthodes natives, comme les éléments <details> et <summary> pour les accordéons, ou une ligne de CSS pour ajuster la taille des champs de formulaire. L'objectif est de diminuer la quantité de JavaScript nécessaire, améliorant ainsi les performances et l'expérience utilisateur. L'auteur promet également une bibliothèque de composants avec ces nouvelles approches.

Andy Clarke explore l'importance de "la mesure" en typographie, qui désigne la longueur d'une ligne de texte. Il explique comment cette notion, issue de l'imprimerie traditionnelle, peut influencer la mise en page web. En définissant la mesure comme une propriété CSS personnalisée (--measure: 60ch), il montre comment elle peut guider la conception de mises en page, de grilles et même de requêtes de conteneur, pour améliorer la lisibilité et l'adaptabilité des sites web. Des exemples pratiques sont disponibles dans son laboratoire.

Matt Zeunert explore les raisons pour lesquelles certaines pages web contiennent des documents HTML volumineux, souvent en raison de l'intégration de ressources comme des images, des CSS ou des polices de caractères en Base64. Il analyse divers cas, tels que les images intégrées via des data URLs, les CSS inline avec des sélecteurs complexes, et les polices de caractères embarquées, qui peuvent impacter les performances. L'article met en lumière les avantages et inconvénients de ces pratiques, notamment l'absence de mise en cache indépendante et la priorisation des ressources. Un outil, le DebugBear HTML Size Analyzer, a été amélioré pour gérer ces structures complexes.

Cet article de CSS-Tricks explore les fonctions trigonométriques inverses en CSS : asin(), acos(), atan() et atan2(), souvent considérées comme les fonctionnalités les moins aimées selon le State of CSS 2025. L'auteur, Juan Diego Rodríguez, explique comment ces fonctions permettent de retrouver un angle à partir d'une valeur trigonométrique, contrairement aux fonctions sin(), cos() et tan() qui font l'inverse. Il détaille leurs définitions, leurs domaines et plages de valeurs, ainsi que leurs applications pratiques, en mettant en avant l'utilité particulière de atan() et atan2() pour déterminer des angles dans divers contextes.