Fonctions CSS modernes - Partie 2

Un carrousel de photos qui s'arrête exactement sur l'image suivante, un formulaire aux couleurs de la marque, une variante plus claire de la couleur or au survol : il n'y a pas si longtemps, chacune de ces tâches exigeait une bibliothèque JavaScript ou le calcul des nuances à la main. Dans la deuxième partie de notre voyage à travers le CSS moderne, nous allons découvrir d'autres outils puissants : scroll-snap, @supports, accent-color et color-mix(). Chacun résout un problème qui nécessitait auparavant du JavaScript ou des contournements compliqués, tout comme les découvertes archéologiques en Égypte révèlent des techniques de plus en plus avancées des anciens bâtisseurs.

Scroll Snap - L'accrochage pendant le défilement

Scroll Snap est un mécanisme CSS qui permet de créer un effet d'accrochage à des points précis pendant le défilement. Avec lui, tu peux créer des carrousels, des galeries et des sections pleine page sans utiliser JavaScript.

Imagine un couloir dans une pyramide avec des chambres successives : scroll-snap fait que la vue s'arrête automatiquement à chaque chambre. Tu as besoin de deux propriétés : scroll-snap-type sur le conteneur qui défile, et scroll-snap-align sur ses enfants :

1/* Conteneur avec scroll-snap */
2.gallery {
3  display: flex;
4  overflow-x: auto;
5  scroll-snap-type: x mandatory;
6  /* mandatory - s'accroche toujours au point le plus proche */
7  /* proximity - s'accroche uniquement à proximité d'un point */
8  gap: 1rem;
9}
10
11/* Chaque élément s'accroche au début */
12.gallery-item {
13  scroll-snap-align: start;
14  /* Options : start, center, end */
15  flex-shrink: 0;
16  width: 300px;
17}
18
19/* Sections pleine page avec accrochage vertical */
20.fullpage-container {
21  height: 100vh;
22  overflow-y: auto;
23  scroll-snap-type: y mandatory;
24}
25
26.fullpage-section {
27  height: 100vh;
28  scroll-snap-align: start;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34/* Scroll padding - décalage pour les en-têtes fixes */
35.container {
36  scroll-snap-type: y mandatory;
37  scroll-padding-top: 80px;
38  /* Tient compte de la hauteur de l'en-tête */
39}

L'écriture scroll-snap-type: x mandatory signifie un défilement horizontal avec un arrêt obligatoire sur un point, et scroll-snap-align: start place ce point au début de chaque élément. Le conteneur lui-même doit défiler, c'est pourquoi il a overflow-x: auto. Pour les contenus longs, je te recommande proximity car mandatory impose toujours l'arrêt sur un point, ce qui gêne la lecture libre quand les sections sont longues ou inégales.

@supports - Détecter les capacités du navigateur

La règle @supports (également appelée feature queries) te permet de vérifier si le navigateur prend en charge une propriété CSS donnée avant de l'appliquer. C'est un outil d'amélioration progressive (progressive enhancement), qui consiste à construire l'expérience à partir des bases et à ajouter des fonctionnalités avancées là où elles sont disponibles.

C'est comme tester la résistance d'un matériau avant de construire : les anciens Égyptiens testaient eux aussi la pierre avant de l'utiliser pour bâtir une pyramide. La syntaxe se compose de @supports, d'une condition entre parenthèses et d'un bloc de styles :

1/* Utilisation de base de @supports */
2.layout {
3  display: block; /* Repli */
4}
5
6@supports (display: grid) {
7  .layout {
8    display: grid;
9    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
10    gap: 1rem;
11  }
12}
13
14/* Vérifier les Container Queries */
15@supports (container-type: inline-size) {
16  .card-wrapper {
17    container-type: inline-size;
18  }
19
20  @container (min-width: 400px) {
21    .card {
22      flex-direction: row;
23    }
24  }
25}
26
27/* Négation - si NON pris en charge */
28@supports not (aspect-ratio: 1 / 1) {
29  .square {
30    padding-top: 100%; /* Ancienne astuce pour les proportions */
31    height: 0;
32  }
33}
34
35/* Combiner des conditions */
36@supports (display: grid) and (gap: 1rem) {
37  .modern-grid {
38    display: grid;
39    gap: 1rem;
40  }
41}

Tu combines les conditions avec les mots not, and et or, et avec la fonction selector(), tu peux même vérifier la prise en charge d'un sélecteur, par exemple @supports selector(:has(a)). L'exemple avec aspect-ratio: 1 / 1 rappelle la propriété de la première partie qui impose des proportions, par exemple aspect-ratio: 16 / 9. Introduis toujours les nouveautés dans le même ordre : vérifie la prise en charge sur caniuse.com, écris une solution de repli, ajoute la version moderne dans @supports et teste dans plusieurs navigateurs.

accent-color - Styliser les contrôles de formulaire

La propriété accent-color te permet de changer la couleur d'accentuation des contrôles de formulaire natifs tels que les cases à cocher, les boutons radio, les curseurs de plage et les barres de progression. Auparavant, styliser ces éléments nécessitait de redéfinir entièrement leur apparence, alors que désormais, une seule ligne suffit :

1/* Couleur d'accentuation globale */
2:root {
3  accent-color: #d4af37; /* Doré comme les ornements égyptiens */
4}
5
6/* Contrôles spécifiques */
7input[type="checkbox"] {
8  accent-color: #c9a66b;
9  width: 20px;
10  height: 20px;
11}
12
13input[type="radio"] {
14  accent-color: #1e3a5f;
15}
16
17input[type="range"] {
18  accent-color: #30d5c8;
19}
20
21progress {
22  accent-color: #d4af37;
23}
24
25/* Couleurs différentes pour différentes sections */
26.form-section--gold {
27  accent-color: gold;
28}
29
30.form-section--lapis {
31  accent-color: #1e3a5f;
32}

La propriété est héritée, donc définie sur :root, elle modifie tous les contrôles à la fois, et les sections peuvent la redéfinir. Le navigateur veille lui-même au contraste à l'intérieur du contrôle, par exemple en choisissant une coche claire ou foncée dans la case à cocher. accent-color n'a aucun effet sur les champs de texte ni sur les boutons.

Tu disposes donc d'une échelle de possibilités, de la plus difficile à la plus facile : une case à cocher personnalisée créée de zéro (la case native cachée et les pseudo-éléments ::before et ::after), appearance: none avec une mise en forme manuelle, accent-color, et enfin color-scheme, qui adapte en un seul mot les contrôles à un thème sombre :

1/* Thème sombre pour toute la page, y compris les contrôles et les barres de défilement */
2:root {
3  color-scheme: dark;
4}
5
6/* Contrôle total : tu désactives l'apparence native et tu dessines la tienne */
7input[type="checkbox"].custom {
8  appearance: none;
9  width: 20px;
10  height: 20px;
11  border: 2px solid #d4af37;
12  border-radius: 4px;
13}

Après appearance: none, la case à cocher perd son apparence native, y compris la coche, tu dois donc dessiner toi-même l'état coché. C'est pourquoi il vaut mieux commencer par accent-color et ne descendre plus bas que si le projet l'exige vraiment.

color-mix() - Mélanger des couleurs en CSS

La fonction color-mix() te permet de mélanger deux couleurs selon des proportions définies directement en CSS. C'est un outil puissant pour créer des variantes de couleur, des versions semi-transparentes et des palettes de couleurs entières.

Pense à la façon dont les anciens Égyptiens mélangeaient les pigments : le lapis-lazuli avec du blanc donnait différentes nuances de bleu. color-mix() fonctionne exactement de la même manière. Tu indiques l'espace colorimétrique, la première couleur avec un pourcentage, puis la seconde couleur :

1/* Syntaxe de base */
2/* color-mix(in espace-colorimétrique, couleur1 pourcentage, couleur2) */
3
4/* Mélanger selon des proportions */
5.lighter {
6  background: color-mix(in srgb, #d4af37 70%, white);
7  /* 70 % doré + 30 % blanc */
8}
9
10.darker {
11  background: color-mix(in srgb, #d4af37 70%, black);
12  /* 70 % doré + 30 % noir */
13}
14
15/* Créer des versions semi-transparentes */
16.overlay {
17  background: color-mix(in srgb, #1e3a5f 50%, transparent);
18  /* 50 % d'opacité */
19}
20
21/* Générer une palette à partir d'une seule couleur de base */
22:root {
23  --brand: #d4af37;
24  --brand-light: color-mix(in srgb, var(--brand) 30%, white);
25  --brand-lighter: color-mix(in srgb, var(--brand) 15%, white);
26  --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
27  --brand-darker: color-mix(in srgb, var(--brand) 50%, black);
28}
29
30/* Effets au survol */
31.button {
32  background: var(--brand);
33}
34
35.button:hover {
36  background: color-mix(in srgb, var(--brand) 85%, black);
37}
38
39/* Mélanger dans l'espace oklch (meilleurs résultats visuels) */
40.gradient-step {
41  background: color-mix(in oklch, blue 60%, green);
42}

L'écriture color-mix(in srgb, blue 70%, white) donne 70% de bleu et 30% de blanc, soit un bleu plus clair, car le pourcentage manquant revient à la seconde couleur. Le mélange avec transparent crée une version semi-transparente, et l'espace oklch donne des transitions plus naturelles pour l'œil. Voilà à quoi ressemble l'évolution des couleurs en CSS : des noms comme red, en passant par les notations HEX et RGB, HSL et les variables CSS, jusqu'au mélange des couleurs dans le navigateur.

La fonction color-mix() combinée aux variables CSS crée un système de thématisation puissant où toute une palette de couleurs naît d'une seule couleur de base. Rappelle-toi aussi les outils des leçons précédentes : :is() reprend la spécificité du sélecteur le plus fort de sa liste, :where() a toujours une spécificité nulle, et @property enregistre des variables typées que l'on peut animer. Dans le bac à sable ci-dessous, fais défiler la galerie des chambres, change la couleur d'accentuation du formulaire et ajoute ta propre nuance à la palette.

Souviens-toi : le CSS moderne est le coffre à outils d'un maître bâtisseur, mais chaque nouveau ciseau, tu le vérifies d'abord avec @supports.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Fonctionnalités CSS modernes - partie 2</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="page">
11        <h1>Fonctionnalités CSS modernes - partie 2</h1>
12        <p class="subtitle">scroll-snap, @supports, accent-color, color-mix()</p>
13
14        <section>
15            <h2>Scroll Snap - galerie</h2>
16            <div class="snap-gallery">
17                <div class="snap-item" style="background:#d4af37">Chambre 1</div>
18                <div class="snap-item" style="background:#8b6914">Chambre 2</div>
19                <div class="snap-item" style="background:#c9a66b">Chambre 3</div>
20                <div class="snap-item" style="background:#b87333">Chambre 4</div>
21                <div class="snap-item" style="background:#1e3a5f">Chambre 5</div>
22            </div>
23        </section>
24
25        <section>
26            <h2>@supports - Amélioration progressive</h2>
27            <div class="supports-demo">
28                <div class="box">Élément 1</div>
29                <div class="box">Élément 2</div>
30                <div class="box">Élément 3</div>
31            </div>
32        </section>
33
34        <section>
35            <h2>accent-color - Formulaire</h2>
36            <form class="accent-form">
37                <label><input type="checkbox" checked> Option 1</label>
38                <label><input type="checkbox"> Option 2</label>
39                <label><input type="radio" name="r" checked> Radio A</label>
40                <label><input type="radio" name="r"> Radio B</label>
41                <label>Plage : <input type="range" min="0" max="100" value="60"></label>
42                <label>Progression : <progress value="70" max="100">70%</progress></label>
43            </form>
44        </section>
45
46        <section>
47            <h2>color-mix() - Palette de couleurs</h2>
48            <div class="color-palette">
49                <div class="color-swatch swatch-lighter">Plus clair</div>
50                <div class="color-swatch swatch-light">Clair</div>
51                <div class="color-swatch swatch-base">Base</div>
52                <div class="color-swatch swatch-dark">Foncé</div>
53                <div class="color-swatch swatch-darker">Plus foncé</div>
54            </div>
55        </section>
56    </div>
57</body>
58</html>