Fonctions CSS modernes - Partie 1

Le CSS moderne est un véritable trésor d'outils qui te permettent de créer des sites web plus flexibles, plus lisibles et plus réactifs. Dans ce chapitre, tu vas découvrir quatre fonctions puissantes : clamp(), aspect-ratio, :is() et :where(). Chacune résout un problème spécifique avec lequel les développeurs se sont débattus pendant des années - tout comme les architectes de l'Égypte antique résolvaient les problèmes de construction de leurs pyramides.

La fonction clamp() - Des valeurs flexibles

La fonction clamp() te permet de définir une valeur qui s'ajuste automatiquement à l'espace disponible, sans jamais dépasser les limites spécifiées. Elle prend trois arguments : la valeur minimale, la valeur préférée et la valeur maximale.

C'est comme construire les colonnes d'un temple - elles ont des hauteurs minimale et maximale, mais s'adaptent à l'espace entre elles.

1/* Syntaxe : clamp(minimum, préféré, maximum) */
2
3/* Typographie fluide - la police grandit avec le viewport */
4h1 {
5  font-size: clamp(1.5rem, 4vw, 3rem);
6  /* Minimum 1.5rem, préféré 4vw, max 3rem */
7}
8
9/* Largeur de conteneur flexible */
10.container {
11  width: clamp(300px, 80%, 1200px);
12  margin: 0 auto;
13}
14
15/* Padding réactif */
16.section {
17  padding: clamp(1rem, 3vw, 4rem);
18}
19
20/* Espacement fluide entre les éléments */
21.grid {
22  gap: clamp(0.5rem, 2vw, 2rem);
23}

La fonction clamp() est particulièrement utile pour la typographie fluide, où la taille de la police s'ajuste en douceur à la largeur de l'écran sans avoir besoin de media queries.

La propriété aspect-ratio - Conserver les proportions

La propriété aspect-ratio te permet de conserver les proportions d'un élément quelle que soit sa taille. Auparavant, forcer des proportions nécessitait des astuces avec padding-top - désormais, une seule ligne de CSS suffit.

Pense aux proportions des pyramides - leur angle d'inclinaison devait être parfait pour que la structure soit stable. De même, aspect-ratio garantit des proportions parfaites pour tes éléments.

1/* Carré - proportions 1:1 */
2.avatar {
3  width: 100px;
4  aspect-ratio: 1 / 1;
5  border-radius: 50%;
6  object-fit: cover;
7}
8
9/* Vidéo - proportions 16:9 */
10.video-container {
11  width: 100%;
12  aspect-ratio: 16 / 9;
13  background: #000;
14}
15
16/* Photo - proportions 4:3 */
17.photo {
18  width: 100%;
19  aspect-ratio: 4 / 3;
20  object-fit: cover;
21}
22
23/* Carte avec proportions conservées */
24.card-image {
25  width: 100%;
26  aspect-ratio: 3 / 2;
27  object-fit: cover;
28  border-radius: 8px;
29}

La pseudo-classe :is() - Simplifier les sélecteurs

La pseudo-classe :is() te permet de regrouper plusieurs sélecteurs en un seul, ce qui réduit considérablement les répétitions dans le code CSS. Au lieu d'écrire une longue liste de sélecteurs, tu peux tous les placer à l'intérieur de :is().

C'est comme les hiéroglyphes abrégés - au lieu de dessiner chaque symbole séparément, nous utilisons un seul symbole pour représenter un groupe.

1/* Sans :is() - beaucoup de répétitions */
2header h1, header h2, header h3,
3nav h1, nav h2, nav h3,
4footer h1, footer h2, footer h3 {
5  color: gold;
6}
7
8/* Avec :is() - concis et lisible */
9:is(header, nav, footer) :is(h1, h2, h3) {
10  color: gold;
11}
12
13/* Styliser les liens dans différents contextes */
14:is(article, section, aside) a:hover {
15  text-decoration: underline;
16  color: #c9a66b;
17}
18
19/* Listes imbriquées */
20:is(ol, ul) :is(ol, ul) {
21  margin-left: 1.5rem;
22  font-size: 0.9em;
23}

Une caractéristique importante de :is() - elle adopte la spécificité du sélecteur le plus élevé de la liste. Si :is(h1, .title, #main) contient un ID, le sélecteur entier aura la spécificité d'un ID.

La pseudo-classe :where() - Des sélecteurs sans spécificité

La pseudo-classe :where() fonctionne de manière identique à :is(), mais avec une différence cruciale - elle a toujours une spécificité de 0. Cela en fait l'outil idéal pour créer des resets CSS et des styles par défaut qui peuvent être facilement surchargés.

1/* :where() - spécificité 0 */
2:where(header, nav, footer) a {
3  color: inherit;
4  text-decoration: none;
5}
6
7/* Facile à surcharger avec un sélecteur de classe classique */
8.nav-link {
9  color: gold; /* Ceci l'emporte sur la règle ci-dessus */
10}
11
12/* Reset du style de liste - facile à surcharger */
13:where(ul, ol) {
14  list-style: none;
15  padding: 0;
16  margin: 0;
17}
18
19/* Comparaison :is() vs :where() */
20/* :is() - spécificité élevée (comme #id) */
21:is(#main, .content) p {
22  color: #333;
23}
24
25/* :where() - spécificité nulle */
26:where(#main, .content) p {
27  color: #333; /* Facile à surcharger */
28}

Règle pratique : utilise :is() lorsque tu veux conserver la spécificité du sélecteur, et :where() lorsque tu crées des styles de base/par défaut qui doivent pouvoir être facilement surchargés.

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 1</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Fonctionnalités CSS modernes</h1>
12        <p class="subtitle">clamp(), aspect-ratio, :is(), :where()</p>
13
14        <section>
15            <h2>Typographie fluide avec clamp()</h2>
16            <p class="fluid-text">Ce texte s'adapte en douceur grâce à clamp().</p>
17            <p class="fluid-small">Le texte plus petit utilise aussi clamp().</p>
18        </section>
19
20        <section>
21            <h2>Galerie avec aspect-ratio</h2>
22            <div class="gallery">
23                <div class="gallery-item ratio-16-9">16:9</div>
24                <div class="gallery-item ratio-1-1">1:1</div>
25                <div class="gallery-item ratio-4-3">4:3</div>
26            </div>
27        </section>
28
29        <section>
30            <h2>Sélecteurs simplifiés avec :is()</h2>
31            <article>
32                <h3>Titre de l'article</h3>
33                <p>Paragraphe dans l'article avec un <a href="#">lien</a>.</p>
34            </article>
35            <nav>
36                <h3>Navigation</h3>
37                <p>Paragraphe dans la navigation avec un <a href="#">lien</a>.</p>
38            </nav>
39        </section>
40
41        <section>
42            <h2>Reset avec :where()</h2>
43            <ul class="custom-list">
44                <li>Élément 1</li>
45                <li>Élément 2</li>
46                <li>Élément 3</li>
47            </ul>
48        </section>
49    </div>
50</body>
51</html>