CSS

La fonction CSS random() ajoute des variations visuelles directement dans le navigateur, sans JavaScript ni boucles Sass. Brecht De Ruyte l’illustre avec des lettres légèrement inclinées, des cartes animées au scroll et des ombres adaptées à leur rotation. Pour garder une géométrie cohérente, une clé de cache peut synchroniser plusieurs propriétés, tandis que sibling-index() calcule la structure d’un éventail de cartes.

Ces effets conviennent surtout aux éléments décoratifs : l’article déconseille de randomiser les grilles, les textes courants ou les cibles interactives. Le déploiement navigateur étant en cours, il recommande une base stable avec @supports, ainsi que le respect de prefers-reduced-motion et des besoins des lecteurs d’écran.

Cette extension pour Chrome DevTools rend les animations CSS déclenchées par le défilement plus faciles à diagnostiquer : une minimap situe le scroller, l’élément et le sujet, tandis que des repères colorés montrent les plages d’activation et d’activité. Les valeurs se modifient en direct ; l’outil prend en charge ScrollTimeline, ViewTimeline et les éléments en position: sticky.

Deux limites viennent de Chrome : les unités relatives comme 90vh sont ramenées à des pixels calculés, et les éléments dans un iframe ne sont pas pris en charge. L’extension répond ainsi à un manque des DevTools, en attendant un éventuel support intégré.

Lea Verou propose de traiter les icônes comme des design tokens CSS : des propriétés personnalisées les associent aux pseudo-éléments, et des masques SVG les affichent sans ajouter de balisage. Les composants peuvent ainsi choisir ou remplacer une icône selon l’état, le thème ou le contexte, tout en centralisant les définitions dans le design system.

La technique a ses limites : le masquage convient surtout aux icônes monochromes, les URL et propriétés enregistrées ne se comportent pas de façon uniforme selon les navigateurs, et Safari nécessite des contournements. L’article détaille ces compromis et présente le package @nudeui/icons qui rassemble le système.

Chrome 154 introduit la propriété CSS frame-sizing: content-height qui permet à une iframe de s’ajuster dynamiquement à la hauteur de son contenu, sans scripts ni échanges de messages. Cette fonctionnalité nécessite que la page embarquée ajoute une meta-tag spécifique et autorise explicitement le domaine parent, ce qui limite son usage immédiat aux cas où les deux parties coopèrent. L’article détaille les usages concrets (paiement, widgets, formulaires dynamiques), les contraintes de compatibilité et les bonnes pratiques pour éviter les fuites d’information ou les sauts de layout.

OriginKit propose une galerie de composants web animés à copier ou à utiliser dans Framer. Les aperçus montrent des effets CSS et WebGL, avec une partie de la collection accessible gratuitement.

Ce plugin ajoute des classes Tailwind CSS pour définir des valeurs fluides entre plusieurs tailles d’écran. Il permet de garder les ajustements typographiques et d’espacement dans le vocabulaire utilitaire du projet.

Tailwind Clamp expose des valeurs CSS clamp() sous forme de classes utilitaires. Le plugin facilite la création d’échelles fluides de taille ou d’espacement sans multiplier les breakpoints.

Cet exemple rassemble des classes Tailwind CSS qui agrandissent la zone interactive d’un élément sans modifier son apparence. Cette technique aide à rendre les contrôles plus faciles à toucher, notamment sur mobile.

Subfont analyse les caractères réellement utilisés puis génère des fichiers de police réduits. Il ajoute aussi des indications de préchargement pour raccourcir le chemin critique d’affichage du texte.

Cette liste classe les extensions Stylelint par usage, des syntaxes spécifiques aux intégrations d’éditeur. Elle aide à construire une configuration adaptée aux conventions CSS d’un projet.

Ce plugin Stylelint recherche des pratiques CSS susceptibles de fragiliser le layout ou l’accessibilité. Ses configurations permettent d’intégrer ces vérifications à la qualité de code du projet.

Stylelint SCSS complète les règles CSS standard avec des contrôles sur la syntaxe SCSS. Il permet d’encadrer les constructions du préprocesseur dans une configuration de lint commune.

Ce plugin définit l’ordre du contenu et des propriétés dans les feuilles de style. Ses règles prennent en charge la correction automatique pour appliquer les conventions de l’équipe.

Utopia définit des échelles pour petits et grands écrans puis laisse le navigateur interpoler entre elles. Cette approche aide à construire un système typographique cohérent avec moins de breakpoints.

Uiverse rassemble des éléments d’interface créés par la communauté, avec du code HTML/CSS, Tailwind ou React. Une ressource pour étudier des styles et adapter des composants à son projet.

Ahmad Shadeed explore les situations où les enfants d’un conteneur doivent participer au layout de son parent. Les exemples expliquent l’intérêt de display: contents pour des compositions plus souples.