10 astuces CSS modernes à connaître

1. Typographie fluide avec clamp()

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Une taille qui s’adapte à l’écran sans media query. Notre générateur clamp calcule la valeur idéale pour vous.

2. Le sélecteur parent :has()

.card:has(img) { padding-top: 0; }

Enfin un « sélecteur parent » : styliser un élément selon ce qu’il contient.

3. Container queries

@container (min-width: 400px) { .card { display: flex; } }

Adapter un composant à la taille de son conteneur, pas seulement à celle de l’écran.

4. aspect-ratio

.video { aspect-ratio: 16 / 9; }

5. gap pour Flexbox

.row { display: flex; gap: 1rem; }

Fini les marges bricolées entre les éléments.

6. inset

position: absolute; inset: 0;

7. accent-color

input[type="checkbox"] { accent-color: #2563eb; }

8. La fonction min() / max()

width: min(100%, 1200px);

9. Le mode sombre natif

@media (prefers-color-scheme: dark) { :root { --bg: #0f172a; } }

10. Respecter prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Mettez-les en pratique

Explorez nos générateurs CSS pour appliquer ces techniques sans effort, du Flexbox au Grid.

Découvrir nos outils CSS gratuits