Fluidité Native
Les animations de scroll sont traitées par le GPU, garantissant 120fps sans une ligne de JavaScript.
.card { animation-timeline: view(); }
01. Performance
02. Logique
Container Queries
Le composant s'adapte à son parent. Redimensionnez le bloc pour voir la métamorphose.
@container (min-width: 350px) { ... }
Adaptatif
03. Design System
Couleurs Relatives
Modifiez une seule variable et tout le spectre de votre design s'ajuste automatiquement via oklch().
background: oklch(from var(--p) l c h);Base
Lumière
Ombre
Alpha
04. Alignement
Subgrid
Alignez les éléments de cartes indépendantes sur une grille commune. Plus de décalages visuels.
grid-template-rows: subgrid;Titre Court
Info.
Titre Long sur deux lignes
Détails.
05. Interaction
Anchor Positioning
Liez des éléments flottants à des cibles sans calculs de coordonnées JS complexes.
position-anchor: --cible;
top: anchor(bottom);Cible
Ancré nativement
06. Visuels
Masquage & Imbrication
Créez des effets de verre et des masques avec une syntaxe épurée directement dans le navigateur.
.glass { & :hover { blur: 10px; } }Survolez-moi