Mis à jour ces 90 derniers jours 11 nouvelles · 9 révisées
Pseudo-classe relationnelle surnommée 'sélecteur parent'. Permet de cibler un élément en fonction de ses descendants, frères ou états internes sans JavaScript.
Comme dire 'la maison QUI A un jardin' : on sélectionne le parent selon ce qu'il contient.
/* Card avec image = layout horizontal */
.card:has(img) { display: flex; }
/* Form avec champ invalide = bordure rouge */
form:has(:invalid) { border: 2px solid red; }
/* Label quand son input est focus */
label:has(+ input:focus) { color: blue; }Cas d'usage : Adapter dynamiquement les styles parents selon le contenu ou l'état des enfants, sans JS.
Pseudo-classe fonctionnelle qui accepte une liste de sélecteurs et adopte la spécificité du sélecteur le plus spécifique de la liste. Simplifie les sélecteurs longs et répétitifs.
Comme un raccourci postal : au lieu d'écrire 3 adresses séparées, on les groupe en une seule ligne.
/* Avant : 3 règles répétitives */
article h1, article h2, article h3 { color: navy; }
/* Après : condensé avec :is() */
article :is(h1, h2, h3) { color: navy; }Cas d'usage : Factoriser des sélecteurs CSS répétitifs pour réduire la taille et améliorer la lisibilité.
Identique à :is() en fonctionnalité mais avec une spécificité toujours à 0. Parfait pour les styles de base facilement surchargeables.
Comme une suggestion écrite au crayon : facile à effacer et remplacer par quelque chose d'autre.
/* Spécificité 0 : facile à surcharger */
:where(article, section, aside) h2 {
font-size: 1.5rem;
}
/* N'importe quel sélecteur peut surcharger */
.custom h2 { font-size: 2rem; }Cas d'usage : Définir des styles reset ou utilitaires de base qui doivent être facilement surchargeables.
Depuis Chrome 135 (annonce du 24 mars 2025), appearance: base-select sur select et ::picker(select) rend la liste déroulante entièrement stylable ; les <option> acceptent du HTML riche (images, SVG). <selectedcontent>, unique enfant d'un <button> placé en tête du <select>, affiche un clone de l'option choisie. Disponibilité limitée, non Baseline ; repli automatique sur le select natif.
Une vitrine de pâtisserie à la place d'un menu texte : on voit ce qu'on choisit.
<select>
<button><selectedcontent></selectedcontent></button>
<option><img src="fr.svg" alt=""> Français</option>
<option><img src="en.svg" alt=""> English</option>
</select>
<style>
select, ::picker(select) { appearance: base-select; }
select::picker-icon { transition: rotate .3s; }
select:open::picker-icon { rotate: 180deg; }
selectedcontent img { display: none; }
</style>Cas d'usage : Sélecteurs de langue, de statut ou d'avatar accessibles et natifs, sans bibliothèque de « custom select » en JavaScript.
Règle qui déclare une fonction CSS nommée --nom(), avec paramètrès typés, valeurs par défaut et descripteur result ; on l'appelle ensuite comme n'importe quelle fonction. Le résultat peut dépendre d'un @média interne. Disponibilité limitée, non Baseline.
Une recette de cuisine réutilisable : mêmes gestes, ingrédients différents.
@function --transparent(--color <color>, --alpha <number>: 0.8)
returns <color> {
result: oklch(from var(--color) l c h / var(--alpha));
}
@function --double(--value) {
result: calc(var(--value) * 2);
}
.btn {
background: --transparent(var(--brand), 0.5);
padding: --double(8px); /* 16px */
}Cas d'usage : Design systems : factoriser les conversions de couleur, d'espacement ou de tailles fluides sans préprocesseur.
Média queries qui détectent les préférences utilisateur du système : prefers-color-scheme (thème), prefers-reduced-motion (animations), prefers-contrast (contraste élevé).
Comme un restaurant qui adapte automatiquement le menu selon les allergies déclarées du client.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
@media (prefers-color-scheme: dark) {
:root { --bg: #1a1a1a; --fg: #eee; }
}
@media (prefers-contrast: more) {
.btn { border: 2px solid; }
}Cas d'usage : Respecter les préférences système pour l'accessibilité, le confort visuel et les performances.
Règle at qui enregistre une custom property avec un type, une valeur initiale et un comportement d'héritage. Permet d'animer des variables CSS et d'ajouter une validation de type.
Comme déclarer le type d'une variable en TypeScript : on précise ce qu'elle peut contenir et sa valeur par défaut.
@property --hue {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.element {
--hue: 0deg;
background: hsl(var(--hue) 80% 50%);
transition: --hue 0.5s;
}
.element:hover { --hue: 120deg; }Cas d'usage : Animer des dégradés ou des couleurs via des transitions sur des custom properties typées.
Règle @scope qui limite la portée des styles à un sous-arbre DOM, avec une borne haute (racine) et optionnellement une borne basse (limite). Elle ajoute un critère de cascade, la proximité de portée. Baseline « Newly available » depuis mars 2026.
Comme une clôture de jardin avec une zone interdite au fond : les règles s'appliquent dans l'espace délimité.
@scope (.card) to (.card-footer) {
p { color: navy; }
a { text-decoration: underline; }
}
/* Les <p> dans .card-footer ne sont pas affectés */Cas d'usage : Isoler les styles d'un composant sans Shadow DOM ni convention de nommage comme BEM.
Règle @starting-style qui définit les styles de départ d'une transition d'entrée (display: none vers visible). Combinée à transition-behavior: allow-discrète, elle anime aussi la sortie. Baseline « Newly available » depuis août 2024.
Comme le rideau d'un théâtre : on définit la position de départ avant qu'il ne s'ouvre en douceur.
dialog[open] {
opacity: 1;
transition: opacity 0.3s, overlay 0.3s allow-discrete,
display 0.3s allow-discrete;
@starting-style { opacity: 0; }
}
dialog { opacity: 0; }Cas d'usage : Animer l'ouverture de modales, popovers et éléments passant de display:none à visible.
Feature query CSS qui teste le support d'une propriété ou valeur avant de l'appliquer. Permet l'amélioration progressive en servant des styles de fallback aux navigateurs plus anciens.
Comme vérifier si un appareil a le bon adaptateur avant de le brancher, avec un plan B si ce n'est pas le cas.
.grid {
display: flex; /* Fallback */
}
@supports (grid-template-columns: subgrid) {
.grid {
display: grid;
grid-template-columns: subgrid;
}
}Cas d'usage : Utiliser des fonctionnalités CSS modernes avec fallback gracieux pour les navigateurs qui ne les supportent pas.
Représentation parallèle au DOM que le navigateur construit pour les technologies d'assistance. Chaque noeud contient un rôle, un nom, un état et une valeur accessibles.
Comme le plan d'évacuation d'un bâtiment : une vue simplifiée qui ne montre que les infos essentielles pour naviguer.
<!-- Le navigateur crée un noeud accessible : -->
<!-- Role: button, Name: 'Envoyer', State: enabled -->
<button aria-label="Envoyer le formulaire">
<svg>...</svg>
</button>Cas d'usage : Pour comprendre et déboguer ce que les lecteurs d'écran communiquent réellement aux utilisateurs.
API CSS qui positionne un élément par rapport à un autre (l'ancre) sans JavaScript, avec repli automatique quand l'espace manque. Livrée dans Chrome 125, elle est Baseline « Newly available » depuis janvier 2026 (Firefox 147, Safari 26). Les noms actuels sont position-area et position-try-fallbacks.
Comme un post-it attaché à un objet spécifique sur un bureau : il suit l'objet et se déplace si l'espace manque.
.trigger { anchor-name: --btn; }
.tooltip {
position: fixed;
position-anchor: --btn;
position-area: block-end center; /* sous le bouton */
position-try-fallbacks: flip-block;
}Cas d'usage : Positionner des tooltips, popovers et menus contextuels par rapport à leur déclencheur sans Floating UI.
Attributs WAI-ARIA qui définissent le rôle d'un élément pour les technologies d'assistance. Ils complètent ou remplacent la sémantique native quand le HTML seul ne suffit pas.
Comme un badge nominatif qui précise la fonction de quelqu'un dans une équipe, même si son titre officiel est différent.
<div role="alert">Erreur de saisie</div>
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<div role="tabpanel">Contenu</div>
</div>Cas d'usage : Quand un composant custom (onglets, modal, menu) ne peut pas utiliser d'éléments HTML natifs.
Propriété aspect-ratio qui maintient un rapport largeur/hauteur fixe sur un élément. Remplace le hack du padding-top en pourcentage pour les conteneurs responsives.
Comme un cadre photo qui garde toujours les mêmes proportions, quelle que soit sa taille.
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.avatar {
aspect-ratio: 1;
border-radius: 50%;
}Cas d'usage : Maintenir les proportions des vidéos, images et cartes sans le hack du padding-bottom.
Approche où chaque classe CSS fait exactement une chose (une propriété, une valeur). Le CSS total est borné car les classes sont réutilisées partout. Tailwind et UnoCSS l'implémentent.
Comme un alphabet : un nombre fini de lettres pour écrire une infinité de mots.
/* Atomic classes */
.d-flex { display: flex; }
.ai-center { align-items: center; }
.p-4 { padding: 1rem; }
.bg-blue { background: blue; }
<div class="d-flex ai-center p-4 bg-blue">Cas d'usage : Grands projets où la taille du CSS doit rester constante même si le nombre de composants augmente.
Propriété backdrop-filter qui applique des effets graphiques (flou, saturation) à la zone derrière un élément. Crée des effets de verre dépoli (glassmorphism) sans image.
Comme une vitre dépolie dans une salle de bain : on voit les formes à travers mais pas les détails.
.glass-panel {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
}Cas d'usage : Créer des navbars ou panneaux en glassmorphism qui laissent transparaître le contenu en fond.
Repère d'interopérabilité porté par le WebDX Community Group. Une fonctionnalité est « Newly available » quand elle marche dans les dernières versions des quatre navigateurs de référence (Chrome, Edge, Firefox, Safari, mobile compris), puis « Widely available » 30 mois plus tard. Les fonctionnalités sont regroupées par année (Baseline 2024, 2025, 2026).
Le panneau « accessible à tous » sur un bâtiment : pas besoin de vérifier chaque porte.
/* Réflexe : vérifier le statut sur MDN / caniuse avant d'adopter */
/* Widely available → utilisable sans repli */
.card { container-type: inline-size; } /* depuis fév. 2023 */
/* Newly available → amélioration progressive */
@supports (anchor-name: --a) {
.tip { position-anchor: --a; } /* Baseline janv. 2026 */
}Cas d'usage : Décider en équipe quelles nouveautés CSS/HTML entrent dans la base commune et lesquelles restent en amélioration progressive.
Convention de nommage Block-Élément-Modifier qui structure les classes CSS. Block = composant, Élément = partie interne (__), Modifier = variante (--).
Comme un système d'adresse : Pays__Ville--Quartier identifie précisément chaque zone.
/* Block */
.card {}
/* Element */
.card__title {}
.card__body {}
/* Modifier */
.card--featured {}
.card__title--large {}Cas d'usage : Organiser le CSS de projets moyens à grands pour éviter les conflits de nommage et clarifier les relations.
Points de rupture dans les média queries où le layout change pour s'adapter à la taille de l'écran. Les breakpoints modernes sont basés sur le contenu plutôt que sur des appareils spécifiques.
Comme les vitesses d'une boîte de transmission : on passe à la vitesse supérieure quand le régime l'exige.
:root {
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
}
@media (min-width: 768px) {
.sidebar { display: block; }
}Cas d'usage : Adapter les layouts aux différentes tailles d'écran dans une approche mobile-first.
Mécanisme @layer qui organise les styles en couches ordonnées dans la cascade. La dernière couche déclarée a priorité, indépendamment de la spécificité des sélecteurs.
Comme des calques dans Photoshop : chaque couche a une priorité claire, le calque du dessus gagne.
@layer reset, base, components, utilities;
@layer reset { * { margin: 0; } }
@layer base { a { color: blue; } }
@layer components { .btn { color: white; } }
@layer utilities { .text-red { color: red; } }Cas d'usage : Gérer la priorité CSS dans un design system complexe sans guerres de spécificité.
Fonction CSS qui contraint une valeur entre un minimum et un maximum avec une valeur préférée fluide. clamp(min, preferred, max) remplace les combinaisons de min()/max().
Comme un thermostat : la température varie librement entre une borne basse et une borne haute.
h1 {
/* De 1.5rem à 3rem, fluide entre */
font-size: clamp(1.5rem, 4vw, 3rem);
}
.container {
width: clamp(320px, 90%, 1200px);
}Cas d'usage : Typographie fluide et largeurs adaptatives sans média queries ni calculs complexes.
API asynchrone navigator.clipboard qui permet de lire et écrire dans le presse-papiers de manière sécurisée. Remplace le vieux document.execCommand('copy') avec gestion des permissions.
Comme un presse-papiers sécurisé de bureau : on peut copier et coller, mais avec l'autorisation du propriétaire.
// Copier du texte
await navigator.clipboard.writeText('Copié !');
// Lire le presse-papiers
const text = await navigator.clipboard.readText();
// Copier une image
const blob = await fetch(url).then(r => r.blob());
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);Cas d'usage : Bouton 'Copier le code' dans une documentation ou un snippet de code.
Fonction CSS qui mélange deux couleurs dans un espace colorimétrique donné. Permet de créer des variantes (hover, disabled) à partir d'une couleur de base sans calcul manuel.
Comme mélanger deux pots de peinture dans les proportions voulues pour obtenir la teinte parfaite.
.btn {
--bg: #3b82f6;
background: var(--bg);
}
.btn:hover {
background: color-mix(in oklch, var(--bg), black 20%);
}
.btn:disabled {
background: color-mix(in oklch, var(--bg), gray 50%);
}Cas d'usage : Générer des variantes de couleur (hover, active, disabled) dynamiquement depuis un token unique.
Couches indépendantes gérées par le GPU pour le compositing. Les éléments promus en couche composite (via transform, opacity, will-change) sont animés sans affecter les autres couches.
Comme des calques transparents empilés : on peut bouger un calque sans redessiner les autres.
/* Promouvoit l'élément en couche composite */
.animated {
transform: translateZ(0); /* hack de promotion */
/* Mieux : */
will-change: transform;
}
/* Vérifier dans DevTools > Layers */Cas d'usage : Comprendre pourquoi certaines animations sont fluides (compositing) et d'autres saccadent (reflow).
Propriété qui informe le navigateur qu'un élément est indépendant du reste du document pour le layout, le paint ou le style. Permet au moteur de rendu d'optimiser en isolant les recalculs.
Comme un aquarium scellé : ce qui se passe dedans n'affecte pas l'extérieur et vice versa.
/* Isolation complète sauf la taille */
.widget { contain: content; }
/* Equivalent à layout + style + paint */
/* Isolation totale */
.fixed-size-widget { contain: strict; }
/* Equivalent à size + layout + style + paint */Cas d'usage : Améliorer les performances de rendu d'éléments indépendants (widgets, cartes, items de liste).
Adaptent le style d'un composant à la taille de son conteneur plutôt qu'au viewport, via container-type: inline-size et @container. Les requêtes de taille sont Baseline « Widely available » (disponibles partout depuis février 2023). Les requêtes de style style() et scroll-state() sont plus récentes et à support variable.
Comme un meuble modulable qui change de forme selon la taille de la pièce où il est placé, pas de la maison entière.
.card-wrapper { container-type: inline-size; }
@container (width >= 400px) {
.card { display: flex; gap: 1rem; }
}
/* unités relatives au conteneur */
.card h2 { font-size: max(1.2rem, 1rem + 2cqi); }Cas d'usage : Rendre un composant vraiment réutilisable en l'adaptant à son contexte local, pas au viewport global.
Propriété contain qui isole un sous-arbre du DOM pour le layout, le style et le painting. Le navigateur peut optimiser le rendu en sachant que les changements ne déborderont pas.
Comme des murs coupe-feu dans un bâtiment : un incendie dans une zone n'affecte pas les autres.
.widget {
contain: layout style paint;
}
/* Raccourci pour tout sauf size */
.card {
contain: content;
}
/* Strict = size + content */
.isolated { contain: strict; }Cas d'usage : Optimiser les performances de rendu de composants indépendants dans un dashboard ou un feed infini.
Propriété CSS qui permet au navigateur de sauter le rendu des éléments hors viewport. content-visibility: auto diffère le layout et le painting, améliorant drastiquement le temps de rendu initial.
Comme un théâtre qui ne monte le décor d'une scène que quand les acteurs y arrivent.
.article-section {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
/* Le navigateur saute le rendu des sections
hors viewport et réserve 500px d'espace */Cas d'usage : Pages longues avec beaucoup de contenu (blog, feed, documentation) pour réduire le temps de rendu initial.
Technique d'inlining du CSS nécessaire au rendu above-the-fold directement dans le <head> HTML. Le reste du CSS est chargé de manière asynchrone pour ne pas bloquer le premier rendu.
Comme mettre les ingrédients de l'entrée en premier sur le plan de travail et préparer le dessert plus tard.
<head>
<style>/* Critical CSS inliné */
.header { display: flex; }
.hero { height: 100vh; }
</style>
<link rel="preload" href="full.css" as="style"
onload="this.rel='stylesheet'">
</head>Cas d'usage : Optimiser le FCP et LCP en éliminant le CSS bloquant le rendu pour le contenu visible initialement.
Le chemin critique de rendu CSS identifie les ressources CSS qui bloquent le premier affichage. Optimiser ce chemin implique d'inliner le CSS critique et de différer le reste.
Comme le chemin critique en gestion de projet : les tâches sur ce chemin déterminent le délai total.
<!-- 1. CSS critique inliné -->
<style>/* Above-the-fold styles */</style>
<!-- 2. CSS non-critique en async -->
<link rel="preload" href="styles.css" as="style">
<noscript><link rel="stylesheet" href="styles.css"></noscript>Cas d'usage : Réduire le temps de First Contentful Paint en éliminant le CSS render-blocking.
Système qui scope automatiquement les classes CSS à un composant via un hash unique au build. On importe les styles comme un objet JS et les noms de classes sont générés automatiquement.
Comme des badges nominatifs uniques dans une conférence : impossible que deux personnes aient le même.
/* Button.module.css */
.primary { background: blue; }
// Button.tsx
import styles from './Button.module.css';
const Button = () => (
<button className={styles.primary}>OK</button>
);
/* Rendu: class="Button_primary_x7ks2" */Cas d'usage : Projets React/Vue avec bundler pour isoler les styles par composant sans convention de nommage.
Mécanisme ::part() qui expose des éléments internes du Shadow DOM au style externe. L'attribut part='nom' sur l'élément interne permet au CSS parent de le cibler.
Comme des boutons de réglage sur la façade d'un appareil : on peut les ajuster sans ouvrir le boîtier.
/* Dans le Shadow DOM du composant */
<button part="btn">Click</button>
/* CSS externe */
my-component::part(btn) {
background: blue;
color: white;
}Cas d'usage : Permettre la personnalisation contrôlée du style d'un Web Component sans casser l'encapsulation.
Approche qui écrit le CSS directement en JavaScript (styled-components, Émotion). Les styles sont scopés au composant, peuvent utiliser des variables JS et sont générés au runtime ou au build.
Comme un chef qui prépare la sauce directement dans le plat au lieu de la préparer séparément.
import styled from 'styled-components';
const Button = styled.button<{ $primary?: boolean }>`
background: ${p => p.$primary ? 'blue' : 'gray'};
color: white;
padding: 0.5rem 1rem;
`;Cas d'usage : Applications React avec styles dynamiques basés sur les props ou le thème.
Méthodologie Composition-Utility-Block-Exception qui embrasse la cascade CSS. Utilise les compositions pour le layout, les utilities pour les tokens, les blocks pour les composants, et les exceptions pour les variantes.
Comme un architecte qui planifie les pièces (composition), choisit les matériaux (utilities), meuble chaque pièce (blocks) et ajuste les détails (exceptions).
/* Composition : layout */
.flow > * + * { margin-top: var(--flow-space); }
/* Utility : token */
.text-primary { color: var(--primary); }
/* Block : composant */
.card { /* styles spécifiques */ }
/* Exception */
.card[data-variant='featured'] { /* override */ }Cas d'usage : Projets qui veulent tirer parti de la cascade CSS plutôt que la combattre.
API native du navigateur permettant de définir de nouvelles balises HTML avec leur propre comportement. Le nom doit contenir un tiret pour éviter les collisions avec les éléments natifs.
Comme créer une nouvelle pièce de Lego sur mesure qui s'emboîte parfaitement avec les pièces standard.
class UserAvatar extends HTMLElement {
connectedCallback() {
const name = this.getAttribute('name');
this.innerHTML = `<img alt="${name}">`;
}
}
customElements.define('user-avatar', UserAvatar);Cas d'usage : Construire des composants framework-agnostic partageables entre React, Vue et Angular.
Variables CSS déclarées avec -- et utilisées via var(). Elles cascadent, sont héritées et peuvent être modifiées dynamiquement en JS, contrairement aux variables Sass.
Comme des réglages centralisés dans une télécommande : on change une valeur et tous les appareils s'adaptent.
:root {
--color-primary: #3b82f6;
--spacing: 1rem;
}
.btn {
background: var(--color-primary);
padding: var(--spacing);
}
.dark { --color-primary: #60a5fa; }Cas d'usage : Créer un système de design tokens avec thèmes clair/sombre modifiables en runtime.
Attributs personnalisés préfixés par data-* qui stockent des informations supplémentaires sur un élément HTML. Accessibles en JS via élément.dataset et ciblables en CSS via [data-*].
Comme des post-it collés sur des dossiers : ils ajoutent des infos sans modifier le contenu du dossier.
<button data-action="delete" data-id="42">
Supprimer
</button>
<script>
btn.addEventListener('click', (e) => {
const { action, id } = e.target.dataset;
});
</script>Cas d'usage : Stocker des métadonnées légères sur les éléments pour le JS sans polluer les attributs HTML standards.
Permet de définir un Shadow DOM directement en HTML via <template shadowrootmode='open'>, sans JavaScript. Le navigateur attache automatiquement le shadow root au parsing.
Comme un meuble livré déjà monté au lieu d'un kit à assembler soi-même.
<my-card>
<template shadowrootmode="open">
<style>p { color: blue; }</style>
<p><slot></slot></p>
</template>
Contenu visible
</my-card>Cas d'usage : SSR de Web Components : le contenu encapsulé est rendu côté serveur sans flash de contenu non stylisé.
Élément natif <dialog> qui gère les modales avec piège de focus, fermeture Échap et arrière-plan intégrés. showModal() crée une modale accessible sans bibliothèque. Baseline « Widely available » depuis mars 2022 ; l'attribut closedby (any, closerequest, none) est plus récent.
Comme une fenêtre de guichet : elle capte toute l'attention, bloque l'accès au reste, et se ferme proprement.
<dialog id="dlg" closedby="any">
<h2>Confirmation</h2>
<form method="dialog">
<button value="ok">OK</button>
</form>
</dialog>
<button commandfor="dlg" command="show-modal">Ouvrir</button>Cas d'usage : Remplacer les modales custom par l'élément natif pour une accessibilité et une gestion du focus automatiques.
API native du navigateur qui permet de rendre des éléments déplaçables via draggable='true'. Les événements dragstart, dragover et drop orchestrent le transfert de données.
Comme déplacer des fichiers sur un bureau : on attrape, on glisse, et on lâche à destination.
<div draggable="true"
ondragstart="e.dataTransfer.setData('text', e.target.id)">
Glisse-moi
</div>
<div ondrop="drop(e)" ondragover="e.preventDefault()">
Zone de dépôt
</div>Cas d'usage : Implémenter des interfaces de réorganisation (kanban, tri de listes) ou d'upload de fichiers.
Élément sémantique qui regroupe les contrôles de recherche ou de filtrage et porte implicitement le rôle ARIA search (landmark). Il remplace <form role="search">. Baseline « Widely available », disponible partout depuis octobre 2023.
L'enseigne « Accueil / Renseignements » au-dessus du comptoir : on sait à quoi il sert avant d'y aller.
<header>
<h1>Site de films</h1>
<search>
<form action="/recherche">
<label for="q">Trouver un film</label>
<input type="search" id="q" name="q">
<button type="submit">Rechercher</button>
</form>
</search>
</header>Cas d'usage : Barre de recherche du site ou filtres d'une liste : un point de repère de plus pour les lecteurs d'écran.
Attribut fetchpriority qui indique au navigateur la priorité relative d'une ressource (high, low, auto). Permet d'optimiser le LCP en priorisant l'image hero ou en dépriorisant les ressources secondaires.
Comme marquer un colis 'URGENT' à la poste : il passe devant les autres dans la file de traitement.
<!-- Image LCP prioritaire -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">
<!-- Image carousel non critique -->
<img src="slide3.jpg" fetchpriority="low" alt="Slide">
<!-- Script non critique -->
<script src="analytics.js" fetchpriority="low"></script>Cas d'usage : Accélérer le LCP en priorisant le chargement de l'image principale au-dessus du fold.
Propriété qui fait grandir un champ de formulaire (input, textarea, select) avec son contenu au lieu d'une taille fixe. Baseline « Newly available » depuis juin 2026. Les bornes se posent avec min-width/max-width ; un width fixe annule l'effet.
Un sac extensible qui prend la forme de ce qu'on y met.
textarea, input {
field-sizing: content; /* défaut : fixed */
min-width: 5ch; /* bornes : jamais width fixe */
max-width: 40ch;
}
textarea { max-height: 12lh; }
/* la textarea grandit en ligne, puis en hauteur, puis défile */
/* <textarea>Tapez ici…</textarea> */Cas d'usage : Champs de commentaire ou de chat qui s'ajustent sans script « auto-resize » ni recalcul de scrollHeight.
Modèle de layout unidimensionnel qui distribue l'espace entre les items d'un conteneur sur un axe principal. Parfait pour l'alignement, la distribution et le reordonnancement d'éléments.
Comme des passagers dans un bus : ils se répartissent sur une rangée, avec plus ou moins d'espace entre eux.
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.item { flex: 1; }Cas d'usage : Aligner des éléments dans une navbar, centrer du contenu, ou distribuer des cartes sur une ligne.
Application de clamp() aux marges, paddings et gaps pour un espacement qui varie fluidement avec le viewport. Crée un rythme visuel cohérent sur toutes les tailles d'écran.
Comme un accordéon : l'espace entre les plis s'adapte naturellement quand on l'étire ou le compresse.
:root {
--space-s: clamp(0.75rem, 0.5rem + 1vw, 1rem);
--space-m: clamp(1.5rem, 1rem + 2vw, 2.5rem);
--space-l: clamp(2rem, 1.5rem + 3vw, 4rem);
}
section { padding: var(--space-l); gap: var(--space-m); }Cas d'usage : Appliquer un système d'espacement proportionnel qui élimine la majorité des breakpoints de layout.
Technique qui fait varier la taille du texte de manière fluide entre un minimum et un maximum en utilisant clamp() et des unités viewport, sans breakpoints.
Comme un élastique qui s'étire proportionnellement sans jamais être trop court ni trop long.
h1 {
font-size: clamp(2rem, 1rem + 3vw, 4rem);
}
p {
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
}
/* Échelle fluide sans aucune media query */Cas d'usage : Avoir une typographie qui s'adapte parfaitement à tous les viewports sans sauts brusques entre breakpoints.
Fonction de valeur qui choisit entre plusieurs branches selon une condition : style() (valeur d'une propriété personnalisée), média() ou supports(), avec un else. Elle se niche dans calc() ou d'autres fonctions. Disponibilité limitée, non Baseline : toujours fournir une déclaration de repli avant.
Un interrupteur trois positions au niveau de la valeur elle-même, sans dupliquer la règle.
.card {
--scheme: ice;
padding: 1em; /* repli pour les navigateurs sans if() */
background: if(
style(--scheme: ice): linear-gradient(#caf0f8, white);
style(--scheme: fire): linear-gradient(#ffc971, white);
else: none
);
margin: if(media(width < 700px): 0 auto; else: 20px auto);
}Cas d'usage : Composants pilotés par des tokens (data-theme, variantes) sans multiplier les sélecteurs ni les requêtes conteneur.
Système de layout bidimensionnel qui organise le contenu en lignes et colonnes simultanément. Plus puissant que Flexbox pour les layouts de page complexes avec zones nommées.
Comme un tableau Excel : on définit lignes et colonnes, puis on place le contenu dans les cellules.
.layout {
display: grid;
grid-template: "header header" auto
"sidebar main" 1fr
"footer footer" auto / 250px 1fr;
}
.header { grid-area: header; }Cas d'usage : Créer des layouts de page complets, dashboards ou galeries avec placement précis en deux dimensions.
Élément <template> dont le contenu est parsé mais pas rendu ni exécuté. On le clone via JS pour instancier des fragments de DOM à la demande, de manière performante.
Comme un patron de couture : il n'est pas un vêtement en soi, mais on peut en fabriquer autant qu'on veut.
<template id="card-tpl">
<div class="card"><slot name="title"></slot></div>
</template>
<script>
const tpl = document.getElementById('card-tpl');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);
</script>Cas d'usage : Définir des structures réutilisables côté HTML pour les Web Components ou le rendu dynamique.
interpolate-size: allow-keywords autorise l'animation entre une longueur et une taille intrinsèque (auto, max-content, fit-content) : le fameux « animer height: auto ». calc-size() l'active implicitement pour une valeur. Propriété héritée, à poser sur :root. Disponibilité limitée : pas encore Baseline.
Un store qui se déroule en douceur jusqu'à sa longueur naturelle, au lieu de tomber d'un coup.
:root { interpolate-size: allow-keywords; }
.panel {
height: 2.5rem;
overflow: hidden;
transition: height 0.4s ease;
}
.panel:hover, .panel:focus-within {
height: max-content; /* animé, un côté doit rester numérique */
}Cas d'usage : Accordéons et panneaux dépliables sans mesurer scrollHeight en JavaScript ni bricoler grid-template-rows: 0fr/1fr.
Philosophie de layout où les composants s'adaptent à leur contenu et leur contexte grâce à Grid, Flexbox et fonctions intrinsèques (min(), max(), clamp()) plutôt que des breakpoints fixes.
Comme de l'eau qui prend naturellement la forme de son récipient, sans qu'on ait besoin de la mouler.
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(1rem, 3vw, 2rem);
}Cas d'usage : Créer des layouts qui fonctionnent partout sans écrire de média queries, en exploitant la flexibilité native de CSS.
Attributs qui donnent à un <button> un comportement déclaratif sur un élément cible : commandfor (id de la cible) et command (toggle-popover, show-modal, close…). Les commandes personnalisées commencent par -- et déclenchent un événement command. Baseline « Newly available » depuis décembre 2025.
Une télécommande avec des boutons étiquetés : « ouvrir », « fermer », sans câbler chaque fil soi-même.
<button commandfor="dlg" command="show-modal">Ouvrir</button>
<dialog id="dlg">
<button commandfor="dlg" command="close">Fermer</button>
</dialog>
<button commandfor="photo" command="--rotate">Pivoter</button>
<img id="photo" src="photo.jpg" alt="">
<script>
photo.addEventListener('command', (e) => {
if (e.command === '--rotate') photo.style.rotate = '90deg';
});
</script>Cas d'usage : Ouvrir modales et popovers sans JavaScript, et brancher des actions maison via un seul écouteur command.
Inverted Triangle CSS : architecture qui organise le CSS en couches de spécificité croissante (Settings, Tools, Generic, Éléments, Objects, Components, Utilities). Élimine les guerres de spécificité.
Comme un entonnoir inversé : on part du plus générique (reset) pour aller vers le plus spécifique (utilities).
/* 1. Settings */ /* Variables */
/* 2. Tools */ /* Mixins */
/* 3. Generic */ /* Reset, box-sizing */
/* 4. Elements */ /* h1, a, p (sans classes) */
/* 5. Objects */ /* Layout patterns */
/* 6. Components */ /* .card, .btn */
/* 7. Utilities */ /* .u-hidden, .u-flex */Cas d'usage : Architecturer le CSS d'un projet conséquent pour une maintenabilité à long terme.
Régions de page identifiées par des balises sémantiques (<header>, <nav>, <main>, <footer>) ou des rôles ARIA. Les lecteurs d'écran permettent de naviguer directement entre ces repères.
Comme les chapitres d'un livre : on peut sauter directement au chapitre voulu via la table des matières.
<header><!-- banner --></header>
<nav><!-- navigation --></nav>
<main><!-- main --></main>
<aside><!-- complementary --></aside>
<footer><!-- contentinfo --></footer>Cas d'usage : Structurer chaque page pour que les utilisateurs de technologies d'assistance puissent s'orienter rapidement.
Le Light DOM est le contenu enfant visible dans le markup HTML principal. Le Shadow DOM est l'arbre encapsulé interne du composant. Les slots projettent le Light DOM dans le Shadow DOM.
Le Light DOM c'est le courrier qu'on met dans la boîte aux lettres (visible), le Shadow DOM c'est le mécanisme interne de tri.
<!-- Light DOM (écrit par l'utilisateur) -->
<my-tabs>
<div slot="tab">Onglet 1</div>
<div slot="panel">Contenu 1</div>
</my-tabs>
<!-- Shadow DOM (interne au composant) -->
<!-- <div class="tabs"><slot name="tab"></slot></div> -->Cas d'usage : Comprendre la composition des Web Components pour correctement styliser et accéder aux éléments.
Fonction CSS qui retourne la première valeur en mode clair et la seconde en mode sombre. Elle nécessite color-scheme: light dark sur l'élément. Baseline « Newly available » depuis mai 2024.
Comme un interrupteur jour/nuit qui bascule automatiquement l'éclairage de la pièce.
:root {
color-scheme: light dark;
}
body {
background: light-dark(#fff, #1a1a1a);
color: light-dark(#111, #eee);
}Cas d'usage : Implémenter un thème clair/sombre sans média query ni classes JS pour les valeurs de couleur.
Zones de page qui annoncent automatiquement leurs changements aux lecteurs d'écran via aria-live. 'polite' attend une pause, 'assertive' interrompt immédiatement.
Comme un fil d'actualités en direct à la radio : les infos urgentes interrompent le programme, les autres attendent la pause.
<!-- Notifications non-urgentes -->
<div aria-live="polite">3 résultats trouvés</div>
<!-- Alertes urgentes -->
<div role="alert">Erreur : email invalide</div>
<!-- Équivalent à aria-live="assertive" -->Cas d'usage : Annoncer les résultats de recherche dynamiques, messages d'erreur ou confirmations sans rechargement de page.
Attribut loading='lazy' sur <img> et <iframe> qui diffère le chargement jusqu'à ce que l'élément approche du viewport. Natif, sans JS, il réduit le temps de chargement initial.
Comme un serveur de restaurant qui ne prépare le dessert que quand le client a fini le plat principal.
<!-- Images sous le fold : lazy -->
<img src="photo.jpg" loading="lazy" alt="Photo">
<!-- Image hero : eager (par défaut) -->
<img src="hero.jpg" loading="eager" alt="Hero">
<!-- Iframe lazy -->
<iframe src="video.html" loading="lazy"></iframe>Cas d'usage : Sur toutes les images en dessous du fold pour réduire le poids initial de la page.
Propriétés CSS basées sur le flux de lecture (inline/block) au lieu de la direction physique (left/right/top/bottom). margin-inline-start remplace margin-left et s'adapte automatiquement aux langues RTL.
Comme dire 'devant' et 'derrière' au lieu de 'nord' et 'sud' : ça s'adapte selon l'orientation.
.element {
margin-block: 1rem; /* haut/bas */
padding-inline: 2rem; /* gauche/droite en LTR */
border-inline-start: 3px solid;
inset-inline: 0; /* left + right */
}Cas d'usage : Construire des interfaces internationalisables qui supportent les langues RTL (arabe, hébreu) sans CSS additionnel.
Approche de design qui commence par le layout mobile puis ajoute de la complexité via min-width média queries pour les écrans plus grands. Le CSS de base sert le mobile.
Comme construire une maison en commençant par les fondations solides (mobile) avant d'ajouter les étages (desktop).
/* Base : mobile */
.grid { display: flex; flex-direction: column; }
/* Tablette */
@media (min-width: 768px) {
.grid { flex-direction: row; flex-wrap: wrap; }
}
/* Desktop */
@media (min-width: 1024px) {
.grid { flex-wrap: nowrap; }
}Cas d'usage : Tout projet web moderne, vu que la majorité du trafic vient du mobile.
Syntaxe CSS native permettant d'imbriquer les sélecteurs enfants directement dans leur parent, comme en Sass. Utilise & pour référencer le sélecteur parent.
Comme des poupées russes : chaque règle est contenue dans sa parente, reflétant la structure HTML.
.card {
padding: 1rem;
& .title { font-size: 1.5rem; }
&:hover { box-shadow: 0 2px 8px #0003; }
@media (width > 768px) {
padding: 2rem;
}
}Cas d'usage : Écrire du CSS organisé et lisible sans préprocesseur, en groupant les styles liés.
Espace colorimétrique perceptuellement uniforme basé sur la luminosité (L), la chrominance (C) et la teinte (H). Modifier une dimension ne change pas la perception des autres, contrairement à HSL.
Comme un nuancier professionnel où chaque crayon a exactement la même luminosité perçue, contrairement à HSL.
:root {
--primary: oklch(0.6 0.2 250); /* bleu */
--success: oklch(0.6 0.2 145); /* vert, même luminosité */
--danger: oklch(0.6 0.2 25); /* rouge, même luminosité */
}Cas d'usage : Construire une palette de couleurs harmonieuse avec une luminosité perçue constante entre teintes.
L'élément <picture> avec <source> permet de servir différentes images selon le format supporté, la taille d'écran ou la densité de pixels. Le navigateur choisit la meilleure option automatiquement.
Comme un restaurant qui adapte la taille des portions selon l'appétit du client.
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<source media="(min-width: 800px)" srcset="lg.jpg">
<img src="fallback.jpg" alt="Description">
</picture>Cas d'usage : Servir des images modernes (AVIF, WebP) avec fallback et adapter la résolution au viewport.
API native via l'attribut popover qui gère popups, infobulles et menus sans JavaScript : couche supérieure, fermeture au clic extérieur, accessibilité. Baseline « Newly available » depuis avril 2024 pour l'attribut ; la valeur hint, pensée pour les infobulles au survol, a un support variable.
Comme une bulle de dialogue dans une BD : elle apparaît au-dessus de tout et disparaît quand on passe à la case suivante.
<button popovertarget="info">Aide</button>
<div id="info" popover>
<p>Informations utiles ici</p>
</div>
<!-- Avec l'API Invoker Commands (Baseline déc. 2025) : -->
<button commandfor="info" command="toggle-popover">Aide</button>Cas d'usage : Créer des tooltips, dropdowns et menus contextuels sans dépendance JS ni bibliothèque de positionnement.
Le reflow recalcule la géométrie de tous les éléments affectés (layout). Le repaint redessiné les pixels sans changer la géométrie. Le reflow est bien plus coûteux car il déclenche aussi un repaint.
Repaint = repeindre un mur (couleur). Reflow = abattre un mur et réaménager toute la pièce.
/* Déclenche REFLOW (coûteux) */
element.style.width = '200px'; // layout change
element.style.margin = '10px'; // layout change
/* Déclenche REPAINT seulement */
element.style.color = 'red'; // visuel seulement
element.style.opacity = '0.5'; // visuel seulementCas d'usage : Déboguer les animations lentes en identifiant si le problème vient du reflow ou du repaint.
Logiciel qui lit le contenu de l'écran à voix haute en s'appuyant sur l'arbre d'accessibilité. NVDA, JAWS (Windows) et VoiceOver (macOS/iOS) sont les plus répandus.
Comme un guide audio dans un musée qui décrit chaque oeuvre pour les visiteurs qui ne peuvent pas les voir.
<!-- Bien : texte alt descriptif -->
<img src="graph.png" alt="Ventes en hausse de 20% au T3">
<!-- Mal : alt vide ou générique -->
<img src="graph.png" alt="image">Cas d'usage : Tester l'accessibilité en activant VoiceOver ou NVDA pour vérifier que le parcours utilisateur est compréhensible.
Propriétés CSS qui forcent le scroll à s'arrêter sur des points précis. Le conteneur définit scroll-snap-type et les enfants définissent scroll-snap-align.
Comme un carrousel de diapositives qui clique en place sur chaque slide au lieu de s'arrêter n'importe où.
.carousel {
display: flex; overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 1rem;
}
.slide {
scroll-snap-align: start;
flex: 0 0 100%;
}Cas d'usage : Créer des carrousels, galeries horizontales ou sections plein écran avec accrochage natif sans JS.
API CSS qui lie une animation au défilement (scroll()) ou à la visibilité d'un élément (view()) sans JavaScript. Livrée dans Chrome 115 et Safari 26, elle n'est pas encore Baseline : Firefox ne la propose qu'en préversion. À déployer en amélioration progressive avec @supports.
Comme un livre pop-up dont les éléments se déploient au fur et à mesure qu'on tourne les pages.
@keyframes reveal { from { opacity: 0; } }
@supports (animation-timeline: view()) {
.element {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
}Cas d'usage : Créer des animations de révélation au scroll, barres de progression de lecture, ou parallaxe sans JS.
Utilisation de balises HTML qui décrivent le sens du contenu plutôt que son apparence. Les éléments comme <article>, <nav>, <aside> communiquent la structure aux navigateurs, lecteurs d'écran et moteurs de recherche.
Comme les panneaux de signalisation routière : un panneau 'hôpital' dit ce que c'est, pas juste 'bâtiment bleu'.
<article>
<header><h1>Titre</h1></header>
<section><p>Contenu</p></section>
<footer><time>2024</time></footer>
</article>Cas d'usage : Sur chaque page web pour améliorer le SEO, l'accessibilité et la maintenabilité du code.
Sous-arbre DOM encapsulé attaché à un élément hôte. Le CSS et le JS internes sont isolés du document principal, évitant les conflits de styles et de noms.
Comme un appartement dans un immeuble : chaque logement a sa propre décoration sans affecter les voisins.
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>p { color: blue; }</style>
<p><slot></slot></p>`;
}
}Cas d'usage : Créer des composants UI réutilisables avec encapsulation totale des styles dans un design system.
Point d'insertion dans le Shadow DOM où le contenu externe (Light DOM) est projeté. Les slots nommés permettent de distribuer plusieurs blocs de contenu à des emplacements précis.
Comme les espaces réservés dans un cadre photo : chaque emplacement accueille une image différente.
<!-- Shadow DOM du composant -->
<slot name="header">Titre par défaut</slot>
<slot>Contenu par défaut</slot>
<!-- Utilisation -->
<my-card>
<h2 slot="header">Mon Titre</h2>
<p>Mon contenu projeté</p>
</my-card>Cas d'usage : Permettre la personnalisation du contenu d'un Web Component tout en gardant le style encapsulé.
API qui indique au navigateur, dans un <script type="speculationrules"> JSON, quelles pages précharger (prefetch) ou pré-rendre entièrement (prerender) pour une navigation quasi instantanée. Livrée dans Chrome 109, les règles par document (where) dans Chrome 121. L'eagerness (immédiate, eager, moderate, conservative) règle l'agressivité. Non Baseline : Firefox et Safari ne l'implémentent pas entièrement.
Le serveur qui prépare votre café dès qu'il vous voit vous diriger vers le comptoir.
<script type="speculationrules">
{
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "selector_matches": ".no-prerender" } }
]
},
"eagerness": "moderate"
}]
}
</script>Cas d'usage : Sites multipages (e-commerce, médias) où le clic suivant est prévisible : LCP proche de zéro sur la page cible.
Valeur grid-template-rows/columns: subgrid qui permet à un item Grid d'hériter les pistes de son parent. Les enfants imbriqués s'alignent sur la grille parente, résolvant l'alignement cross-card.
Comme des étagères imbriquées qui s'alignent parfaitement sur la structure du meuble parent.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}Cas d'usage : Aligner les titres, contenus et footers de cartes sur une même grille, même si les contenus varient.
Mécanisme qui contrôle l'ordre de navigation au clavier. tabindex='0' rend un élément focusable dans l'ordre du DOM, tabindex='-1' permet le focus programmatique uniquement.
Comme les numéros de file d'attente : ils déterminent dans quel ordre chaque personne sera servie.
<!-- Focusable dans l'ordre du DOM -->
<div tabindex="0" role="button">Action</div>
<!-- Focus programmatique seulement -->
<div tabindex="-1" id="modal-title">Titre</div>
<!-- JAMAIS : tabindex positif -->
<!-- <div tabindex="5"> NE PAS FAIRE -->Cas d'usage : Gérer le focus dans les modales, menus déroulants et composants interactifs custom.
Raccourci qui retire l'espace vertical parasite au-dessus et en dessous d'un texte, dû à la hauteur de ligne et aux métriques de police. text-box-trim choisit les bords à rogner, text-box-edge la référence (cap, ex, alphabetic, text). Baseline « Newly available » depuis août 2026.
Recadrer une photo au ras du sujet au lieu de garder les marges blanches du tirage.
h1 {
text-box: trim-both cap alphabetic;
/* le bloc colle aux majuscules et à la ligne de base */
}
.btn {
text-box: trim-both ex alphabetic; /* centrage optique */
}Cas d'usage : Boutons et titres alignés au pixel avec des icônés ou des bordures, quelle que soit la police chargée.
Propriété qui pilote l'algorithme de retour à la ligne. balance équilibre le nombre de caractères par ligne (limité à quelques lignes : six sur Chromium, dix sur Firefox), idéal pour les titres. pretty accepte un calcul plus lent pour éviter les orphelins en fin de paragraphe (Chrome 117). stable évite le reflow pendant l'édition. text-wrap est « Widely available » depuis mars 2024, avec des nuances selon la valeur.
Le typographe qui recompose une ligne pour qu'un mot ne se retrouve pas seul en bas de page.
h1, h2, blockquote {
text-wrap: balance; /* titres courts : lignes équilibrées */
}
p {
text-wrap: pretty; /* corps de texte : pas d'orphelin */
}
[contenteditable] {
text-wrap: stable; /* les lignes avant le curseur ne bougent pas */
}Cas d'usage : Titres de landing pages, citations, cartes : un rendu typographique propre sans <br> manuels ni JavaScript.
Animer avec transform (translate, scale, rotate) utilise le GPU et évite le reflow, contrairement à top/left qui déclenche un recalcul de layout coûteux à chaque frame.
Comme glisser une photo sur un bureau (transform) vs déplacer tous les meubles pour faire de la place (top/left).
/* BON : animé par le GPU, 60fps */
.element {
transition: transform 0.3s;
}
.element:hover { transform: translateX(100px); }
/* MAUVAIS : déclenche reflow à chaque frame */
.element:hover { left: 100px; }Cas d'usage : Toute animation de position, taille ou rotation pour garantir 60fps sans janking.
Approche qui compose les styles via des classes atomiques à usage unique directement dans le HTML. Tailwind CSS est le framework le plus populaire de cette approche.
Comme des briques Lego standardisées : on assemble des petites pièces pour construire n'importe quoi.
<!-- Tailwind utility classes -->
<button class="bg-blue-500 text-white px-4 py-2
rounded-lg hover:bg-blue-600
transition-colors duration-200">
Envoyer
</button>Cas d'usage : Prototypage rapide et projets avec design system bien défini qui bénéficient du co-location styles/markup.
API qui anime automatiquement le passage entre deux états du DOM. document.startViewTransition() (même document, SPA) est Baseline « Newly available » depuis octobre 2025. La variante inter-documents (@view-transition { navigation: auto }) reste à disponibilité limitée.
Comme un fondu enchaîné au cinéma entre deux scènes : le navigateur gère le morphing automatiquement.
// SPA : Baseline depuis octobre 2025
document.startViewTransition(() => updateDOM());
/* CSS
.hero { view-transition-name: hero; }
::view-transition-old(hero) { animation: fade-out 0.3s; }
::view-transition-new(hero) { animation: fade-in 0.3s; }
// MPA (disponibilité limitée) :
@view-transition { navigation: auto; }
*/Cas d'usage : Animer les changements de page ou les transitions de composants pour une UX fluide type app native.
Modèles d'interaction standardisés par le W3C pour les widgets complexes (onglets, menus, combobox). Chaque pattern définit les rôles, propriétés et gestion clavier attendus.
Comme des recettes de cuisine normalisées : tout le monde utilise les mêmes étapes pour que le résultat soit prévisible.
<div role="combobox" aria-expanded="false"
aria-haspopup="listbox">
<input aria-autocomplete="list">
<ul role="listbox" hidden>
<li role="option">Option 1</li>
</ul>
</div>Cas d'usage : Quand on construit un composant interactif custom pour garantir une UX clavier et lecteur d'écran cohérente.
Propriété CSS qui informe le navigateur qu'une propriété va changer, lui permettant d'optimiser le rendu à l'avance (promotion en couche composite). À utiliser avec parcimonie.
Comme prévenir un serveur qu'on va commander un plat complexe : il peut commencer la préparation.
.animated {
will-change: transform;
transition: transform 0.3s;
}
.animated:hover {
transform: scale(1.05);
}
/* Retirer après animation si ajouté via JS */Cas d'usage : Optimiser les animations qui saccadent en promouvant l'élément sur sa propre couche composite.
Propriété writing-mode qui définit la direction du flux de texte : horizontal (horizontal-tb), vertical de droite à gauche (vertical-rl) ou de gauche à droite (vertical-lr).
Comme choisir d'écrire sur une page de gauche à droite, de haut en bas, ou en colonnes verticales comme en japonais.
.vertical-label {
writing-mode: vertical-rl;
text-orientation: mixed;
}
.japanese-text {
writing-mode: vertical-rl;
}Cas d'usage : Supporter du contenu en japonais/chinois vertical ou créer des labels verticaux dans des graphiques.