L’article de CSS-Tricks présente sept exemples concrets de view transitions, une fonctionnalité CSS moderne permettant d’animer les changements de vue entre pages ou éléments. L’auteur explique d’abord le principe de base, notamment l’activation via la règle @view-transition et l’utilisation de types d’animations personnalisés, tout en respectant les préférences de réduction de mouvement des utilisateurs. Il détaille ensuite la structure technique pour appliquer des animations entrantes et sortantes via des pseudo-éléments comme ::view-transition-old(root) et ::view-transition-new(root).

L’article propose des recettes prêtes à l’emploi, comme l’effet pixelate dissolve qui combine flou et fondu pour une transition visuelle originale. Chaque exemple inclut le code nécessaire et des explications sur leur implémentation, avec une attention particulière portée à la compatibilité navigateur (tous les principaux navigateurs supportent désormais les view transitions, bien que certaines animations puissent varier). L’auteur encourage à expérimenter ces techniques pour enrichir l’expérience utilisateur tout en restant accessible aux débutants.

L’article explique comment gérer l’état visuel d’une interface directement en CSS plutôt qu’en JavaScript, notamment pour des interactions simples comme des panneaux, des icônes ou des thèmes. Il présente le checkbox hack, une technique où une case à cocher masquée sert de machine à états, déclenchant des changements de style via le pseudo-sélecteur :checked et les combinateurs de frères. Avec l’arrivée de :has(), cette méthode devient plus flexible, permettant de placer la case n’importe où dans le DOM tout en contrôlant des éléments précédents.

L’auteur illustre cette approche avec un exemple de bascule entre thèmes clair et sombre, utilisant color-scheme et la fonction light-dark() pour adapter dynamiquement les couleurs. Bien que pratique, cette technique repose sur des sélecteurs comme #id, dont l’impact sur les performances est à considérer. L’article souligne aussi l’importance d’utiliser hidden plutôt que disabled pour masquer la case, tout en notant ses limites en termes d’accessibilité.

Le principe d’animation squash and stretch (écrasement et étirement), issu des 12 principes de base de Disney, consiste à déformer un objet en mouvement pour lui donner une apparence plus dynamique et réaliste. L’auteur illustre ce concept avec une balle qui s’aplatit à l’impact et s’allonge lors du rebond, tout en soulignant l’importance de modérer l’effet pour éviter un rendu exagéré.

L’application concrète sur le web concerne souvent des icônes SVG, comme des flèches qui s’étirent et s’amincissent au survol. Cette technique, subtile mais efficace, améliore l’interactivité perçue. L’article propose un tutoriel pour implémenter ce effet, en partant d’un code SVG simple et en utilisant des bibliothèques JavaScript pour faciliter l’animation.

Cette page explique comment créer un sélecteur de plage de dates en CSS, principalement grâce à la syntaxe :nth-child(n of selector). L’auteure montre comment cette méthode permet de cibler des éléments spécifiques parmi un groupe, comme le deuxième élément d’une classe donnée, plutôt que le deuxième enfant global. Un exemple concret illustre la construction d’un calendrier où l’utilisateur peut sélectionner une plage de dates, avec une gestion partielle en JavaScript pour ajuster dynamiquement les dates choisies. L’approche combine CSS moderne et un peu de logique JavaScript pour une interaction fluide.

L’article de CSS-Tricks explore les alternatives à l’utilisation excessive de la déclaration !important en CSS, souvent employée pour forcer la priorité d’une règle mais qui complique la maintenance des projets. L’auteur souligne que cette méthode contourne le système de cascade naturel, rendant le code moins prévisible et plus difficile à gérer, notamment dans des équipes ou des projets évolutifs. Plutôt que de recourir à !important, il recommande des solutions comme l’ajustement de la spécificité des sélecteurs, l’ordre des règles ou l’utilisation de couches de cascade pour obtenir des résultats plus propres et durables. L’article aborde aussi les mécanismes de priorité en CSS, où la spécificité et l’ordre des déclarations déterminent quelles règles s’appliquent, tout en mettant en garde contre les effets pervers d’une surutilisation de !important.

La fonction CSS shape() permet de créer des formes complexes (lignes, arcs, courbes) avec une syntaxe plus lisible et flexible que path(), en s’appuyant sur des commandes proches du SVG mais compatibles avec les unités et fonctions CSS comme calc() ou var(), ce qui facilite la création de formes dynamiques et responsives ([CSS-Tricks][1]) ; elle s’utilise principalement avec clip-path pour découper visuellement un élément (la forme agit comme un “emporte-pièce”), ou avec offset-path pour animer un élément le long d’un tracé ([CSS-Tricks][1]) ; chaque forme est définie comme une suite d’instructions partant d’un point initial (from) puis enchaînant des segments (line, arc, curve), permettant de construire progressivement des formes sophistiquées tout en restant manipulables et combinables avec les autres propriétés CSS

Découvrez comment créer un menu "drill-down" (navigation imbriquée) avec des éléments HTML <details> et <summary>, permettant d'afficher des sous-menus imbriqués comme des poupées russes. L'article explique comment structurer le HTML pour une navigation à plusieurs niveaux, puis utilise la règle CSS @scope pour limiter le style aux éléments pertinents, évitant ainsi les conflits de style. Une solution élégante pour des interfaces compactes et interactives.

Josh Comeau révèle comment créer un effet visuel subtil où l’en-tête d’un site semble changer de couleur en défilant, grâce à des éléments "bloqueurs" en CSS. En utilisant position: sticky et des calques transparents (un bleu pour l’intro, un blanc pour le contenu), il simule un changement d’opacité sans JavaScript. Une astuce simple mais bluffante pour ajouter du polish à un site !

Présentation de quatre fonctionnalités CSS modernes qui permettent de gérer des animations et interactions avancées directement dans le navigateur, réduisant fortement le besoin de JavaScript. L’article met notamment en avant View Transitions, qui permet de créer facilement des transitions animées entre pages ou états d’interface, et Scroll-Driven Animations, qui synchronisent les animations avec la position de défilement pour réaliser des effets comme le parallaxe ou l’apparition d’éléments. Il explique aussi animation-composition, qui combine plusieurs transformations sans écraser les valeurs existantes, et @property, qui introduit des variables CSS typées et animables, rendant possibles des transitions fluides sur des propriétés complexes comme les dégradés ou les couleurs.

Cet article présente des astuces pour améliorer l'expérience utilisateur des interfaces. Il aborde des détails comme l'équilibrage du texte avec text-wrap: balance, l'harmonisation des bordures avec des rayons concentriques, l'animation contextuelle des icônes, l'affinage du rendu textuel sur macOS avec antialiased, l'utilisation de chiffres tabulaires pour une largeur uniforme, et l'importance des animations interruptibles pour une interaction fluide. Ces techniques, bien que subtiles, contribuent grandement à la qualité perçue d'une interface.

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.