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.
Media 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 at qui limite la portée des styles à un sous-arbre DOM spécifique, avec une borne haute (scope root) et optionnellement une borne basse (scope limit). Résout le problème de fuite de styles.
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 at qui définit les styles de départ pour les transitions d'entrée d'éléments (display: none vers visible). Permet d'animer l'apparition d'éléments sans JavaScript.
Comme le rideau d'un théâtre : on définit la position de départ avant qu'il ne s'ouvre en douceur.
dialog {
opacity: 1; transition: opacity 0.3s;
}
@starting-style {
dialog { opacity: 0; }
}
dialog:not([open]) { 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 relativement à un autre (l'ancre) sans JS. Gère automatiquement le repositionnement quand l'espace manque (fallback positioning).
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;
top: anchor(bottom);
left: anchor(center);
position-try: 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.
Convention de nommage Block-Element-Modifier qui structure les classes CSS. Block = composant, Element = 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 media 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 media 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).
Permettent d'adapter le style d'un composant en fonction de la taille de son conteneur parent plutôt que du viewport. Déclarés via container-type: inline-size et @container.
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 (min-width: 400px) {
.card { display: flex; gap: 1rem; }
}
@container (max-width: 399px) {
.card { display: block; }
}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, Emotion). 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 element.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 Escape et backdrop intégrés. La méthode showModal() crée une modale accessible sans bibliothèque externe.
Comme une fenêtre de guichet : elle capte toute l'attention, bloque l'accès au reste, et se ferme proprement.
<dialog id="dlg">
<h2>Confirmation</h2>
<form method="dialog">
<button value="ok">OK</button>
</form>
</dialog>
<button onclick="dlg.showModal()">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.
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.
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.
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.
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 media queries, en exploitant la flexibilité native de CSS.
Inverted Triangle CSS : architecture qui organise le CSS en couches de spécificité croissante (Settings, Tools, Generic, Elements, 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. Nécessite color-scheme: light dark sur l'élément pour fonctionner.
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 media 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 media 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 HTML via l'attribut popover qui gère les popups, tooltips et menus sans JS. Le navigateur gère le positionnement dans la top layer, la fermeture au clic extérieur et l'accessibilité.
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>
<!-- S'ouvre/ferme automatiquement, -->
<!-- se ferme au clic extérieur -->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 redessine 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 timeline) ou à la visibilité d'un élément (view timeline) sans JavaScript. Remplace les libraries de scroll-animation.
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; } }
.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é.
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.
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 les transitions entre deux états du DOM (SPA) ou entre pages (MPA). Le navigateur capture un snapshot avant/après et anime la différence.
Comme un fondu enchaîné au cinéma entre deux scènes : le navigateur gère le morphing automatiquement.
/* Déclencher une transition */
document.startViewTransition(() => updateDOM());
/* Personnaliser l'animation */
::view-transition-old(hero) { animation: fade-out 0.3s; }
::view-transition-new(hero) { animation: fade-in 0.3s; }
.hero { view-transition-name: hero; }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.
Autres stacks