# CSS · Veille technologique [Source canonique]() Mise en page, styles adaptatifs et fonctionnalités natives de présentation du Web. ## [MicroKit : 54 micro-interactions React, CSS et Tailwind à copier]() MicroKit rassemble des interactions prêtes à copier — boutons animés, onglets, champs et effets au survol — avec des versions React ou CSS et Tailwind. Chaque composant se récupère séparément en JavaScript ou TypeScript, sans installer de package ; 26 des 54 n’ont aucune dépendance, tandis que 28 utilisent lucide-react. Le code est sous licence MIT et les variantes Tailwind sont prévues pour les versions 3 et 4. Côté Next.js App Router, la plupart des composants restent compatibles avec les server components ; ceux qui utilisent état, ref ou gestionnaire d’événement nécessitent « use client ». 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Fontastic Space : comparer les polices et leurs métriques]() Fontastic Space compare des Google Fonts côte à côte, avec superposition anatomique, métriques OpenType et scores de compatibilité. L’exemple Playfair Display + DM Sans met en regard hauteur d’x, hauteur des capitales et largeur des chaînes, puis propose des règles CSS prêtes à reprendre. Les scores s’appuient sur plusieurs cadres d’analyse typographique, mais restent un repère : l’outil permet aussi de vérifier visuellement le rendu dans un paragraphe ou une bannière avant de choisir une paire. 2026-10-28 · [Markdown]() · [Ressource originale]() ## [Fallback Font Generator : réduire le CLS des polices]() Cet outil ajuste une police système pour qu’elle ressemble davantage à la police de marque pendant le chargement. Il génère les règles `@font-face` nécessaires, notamment `size-adjust`, `ascent-override`, `descent-override` et `line-gap-override`, à partir d’un aperçu comparatif et de réglages visuels. L’approche cible le décalage de mise en page causé par les différences de métriques entre polices. Le CSS obtenu peut être copié dans le projet ; la page précise toutefois que l’outil n’est pas pris en charge par Safari. 2026-10-27 · [Markdown]() · [Ressource originale]() ## [Interop 2027 : dix propositions CSS, de l’accessibilité aux animations]() Josh W. Comeau passe en revue dix propositions envisagées pour Interop 2027 : fonctions CSS, formes de bordure personnalisées, requêtes liées aux ancres et au défilement, ordre de lecture, animations de dimensions intrinsèques ou décorations de grille. Plusieurs répondent à des problèmes concrets, comme synchroniser la navigation au clavier avec une mise en page responsive via `reading-flow`, ou dessiner les séparateurs de grille sans cellules DOM vides. Ces propositions n’ont pas toutes le même degré de maturité. En octobre 2026, plusieurs sont disponibles dans Chromium, mais pas encore dans Firefox ni Safari ; `inherit()` n’est implémenté dans aucun navigateur. L’article montre où l’amélioration progressive est envisageable, avec des garde-fous comme `@supports` pour les transitions de 2026-10-27 · [Markdown]() · [Ressource originale]() ## [CSS \`random()\` : doser l’imperfection dans les interfaces]() 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. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [CSS Scroll-Triggered Animations : visualiser et ajuster les plages]() 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é. 2026-10-22 · [Markdown]() · [Ressource originale]() ## [CSS : gérer les icônes comme des tokens de design]() 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. 2026-10-22 · [Markdown]() · [Ressource originale]() ## [Chrome : ajuster automatiquement la hauteur d’une iframe selon son contenu]() 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. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [OriginKit : parcourir et réutiliser des composants animés]() 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. 2026-07-19 · [Markdown]() · [Ressource originale]() ## [Fluid Tailwind CSS : créer des interfaces adaptatives]() 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. 2026-03-26 · [Markdown]() · [Ressource originale]() ## [Tailwind Clamp : utiliser \`clamp()\` avec des classes Tailwind]() 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. 2026-03-26 · [Markdown]() · [Ressource originale]() ## [Étendre la zone cliquable d’un contrôle avec Tailwind CSS]() 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. 2026-03-15 · [Markdown]() · [Ressource originale]() ## [Subfont : générer des sous-ensembles de polices adaptés aux pages]() 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. 2025-02-25 · [Markdown]() · [Ressource originale]() ## [L’écosystème Stylelint : configurations, plugins et intégrations]() 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. 2024-12-23 · [Markdown]() · [Ressource originale]() ## [Defensive CSS : détecter les pièges de layout avec Stylelint]() 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. 2024-12-23 · [Markdown]() · [Ressource originale]() ## [Stylelint SCSS : ajouter des règles propres au préprocesseur]() 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. 2024-12-23 · [Markdown]() · [Ressource originale]() ## [Stylelint Order : uniformiser l’ordre des déclarations CSS]() 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. 2024-12-23 · [Markdown]() · [Ressource originale]() ## [Utopia : construire des échelles fluides de texte et d’espacement]() 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. 2024-10-15 · [Markdown]() · [Ressource originale]() ## [Uiverse : explorer des éléments d’interface réutilisables]() 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. 2024-10-13 · [Markdown]() · [Ressource originale]() ## [Utiliser display: contents pour composer des layouts CSS]() 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. 2024-09-13 · [Markdown]() · [Ressource originale]() Page 1 / 2 [Suivant]()