Cet article explore les possibilités offertes par la nouvelle fonctionnalité de personnalisation des éléments <select> dans les navigateurs modernes, en se concentrant sur les navigateurs basés sur Chromium. L'auteur, Patrick Brosset, présente plusieurs démonstrations créatives et amusantes utilisant cette fonctionnalité, comme une pile de dossiers personnalisés. Il explique les étapes et techniques utilisées pour créer ces démonstrations, en commençant par le code HTML de base et en passant par le CSS pour styliser les éléments. L'article souligne également la compatibilité avec les navigateurs non supportants, qui afficheront simplement des éléments <select> standards.

Cet article traite de l'importance de la propriété CSS z-index pour contrôler l'ordre d'affichage des éléments sur une page web. L'auteur, Amit Sheen, souligne les problèmes liés à l'utilisation de valeurs arbitraires et élevées de z-index, souvent appelées "magic numbers". Ces pratiques peuvent entraîner des conflits, des difficultés de maintenance et de débogage. L'article met en lumière l'importance d'une approche plus structurée pour éviter ces problèmes, bien qu'il ne traite pas directement des contextes d'empilement (stacking contexts).

Cet article de CSS-Tricks présente une méthode concise pour centrer un élément positionné absolument en CSS, utilisant seulement trois lignes de code. La technique exploite les propriétés place-self: center et inset: 0, qui fonctionnent sur tous les navigateurs. L'auteur explique que cette approche est plus idiomatique et réutilise les propriétés d'alignement familières, tout en offrant une flexibilité pour positionner les éléments de manière précise. Un bon rappel pour les amateurs de CSS!

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.