4.1 Formulaires modernes Activer la personnalisation native d’un select Styliser le menu déroulant du select Styliser l’icône native du select Styliser l’icône de sélection dans les options Styliser le contenu affiché dans le bouton du select Utiliser du HTML enrichi dans les options Positionner le menu du select avec anchor Empêcher le menu déroulant de sortir de l’écran Repositionner le menu si l’espace manque
4.2 Sélecteurs structurels modernes Styliser un parent selon un enfant présent Regrouper plusieurs sélecteurs spécificité réduite Styliser plusieurs éléments sans créer de conflits Exclure plusieurs sélecteurs en même temps Cibler un élément selon sa position et son type Styliser selon la direction du texte Styliser selon la langue du contenu
4.3 Sélecteurs d’état modernes Styliser un élément lorsqu’il est ouvert Styliser un popover lorsqu’il est ouvert Styliser un dialog modal actif Styliser un champ validé par l’utilisateur Styliser un champ invalidé par l’utilisateur Styliser un champ si valeur dans la plage autorisée Styliser un champ hors plage Styliser un champ rempli automatiquement Styliser un custom element une fois chargé Styliser un conteneur contenant une ancre active Styliser un élément au focus clavier Styliser un conteneur contenant un élément focus
4.4 Pseudo‑éléments modernes Styliser la puce d’une liste Styliser les fautes d’orthographe détectées Styliser les erreurs grammaticales Créer un style de surlignage personnalisé Styliser le texte ciblé par une ancre Styliser le bouton d’un input file Styliser le contenu d’un élément details Styliser l’arrière‑plan d’un dialog Styliser une partie interne d’un composant Web Styliser un élément passé dans un slot
4.5 Anchor positioning Définir un élément comme ancre Attacher un élément à une ancre Positionner un élément selon un point précis Utiliser la taille de l’ancre Choisir la zone préférée Définir l’ordre des tentatives Définir les zones alternatives
4.6 View transitions Styliser l’ancienne vue Styliser la nouvelle vue Grouper plusieurs éléments Styliser une paire d’images Activer une transition sur changement de page Contrôler durée et timing Transition sur un élément précis Transition sur changement d’état
4.7 Scroll et layout Activer un scroll fluide vers une zone Activer un scroll fluide dans un conteneur Alignement automatique Contrôler le rebond Styliser les marqueurs de scroll Styliser les boutons de scroll Forcer un ratio fixe Contrôler le recadrage Changer la zone visible Aligner contenu et items Adapter un style selon la taille d’un conteneur Définir une marge interne au scroll
4.8 Fonctions CSS Limiter une valeur entre un min et un max Choisir la plus petite valeur parmi plusieurs Choisir la plus grande valeur parmi plusieurs Combiner plusieurs unités dans un calcul Utiliser des fonctions trigonométriques Utiliser le modulo dans un calcul Arrondir une valeur dans un calcul Obtenir le signe d’une valeur Calculer l’hypoténuse entre deux valeurs Élever une valeur à une puissance Calculer une racine carrée
5.1 Display 5.2 Flexbox 5.3 Grid 5.4 Position 5.5 Background 5.6 Dimensions 5.7 Filters 5.8 Typo 5.9 Border 5.10 Transform 5.11 Transition 5.12 Animation 5.13 Text clip 5.14 Overflow et scroll 5.15 Cursor 5.16 Blend mode
6.1 Layout Empiler des éléments avec un espacement constant Créer un stack compact Grouper des éléments avec wrap contrôlé Diviser l’espace en deux zones équilibrées Basculer entre layout horizontal et vertical Créer un layout centré avec header et footer fixes Créer un contenu centré dans le main Créer un scroll horizontal fluide Créer une grille responsive automatique
6.2 UI Créer une carte minimaliste Créer une carte avec fond doux Aligner une image et un texte proprement Aligner un media en haut Grouper un input et un bouton Créer un input group compact Créer un tooltip minimal sans JS Créer un tooltip arrondi Créer une sidebar flexible Créer une sidebar fluide
6.3 Typo Gérer l’espacement vertical automatiquement Créer un flow compact Supprimer l’espace vertical des polices Appliquer un trim partiel
6.4 Utilitaires Centrer un élément dans un conteneur Limiter la largeur d’un contenu Cacher un élément visuellement mais le garder accessible
12.1 Structure Structure minimale Structure avec main Structure complète de page Section pour regrouper un thème Article pour contenu autonome Aside pour contenu connexe Nav pour navigation Figure et figcaption Blockquote Address Details et summary
12.2 Accessibilité Image informative Image décorative Bouton accessible Zone avec titre associé Formulaire avec label lié Champ obligatoire annoncé Liste de navigation structurée Skip link et CSS associé État dynamique ARIA Élément décoratif ignoré Tableau accessible
12.3 SEO Titre et description SEO Canonical Meta robots Open Graph de base Hreflang Données structurées JSON LD
12.4 Favicons et manifest Safari favicon index et sous pages iOS apple touch icon index et sous pages Chrome Edge Firefox favicon WebP optionnel Manifest index et sous pages