Fonctions CSS - Les mathématiques à la manière des scribes égyptiens

Bienvenue dans la nécropole de Gizeh des mathématiques CSS ! Tout comme les anciens Égyptiens utilisaient des mathématiques avancées pour construire des pyramides, nous pouvons utiliser les fonctions CSS pour créer des styles dynamiques, réactifs et flexibles. Découvre les fonctions mathématiques qui révolutionnent notre façon d'écrire du CSS !

Que sont les fonctions CSS ?

Les fonctions CSS sont des fonctions intégrées qui effectuent des calculs et renvoient des valeurs. Elles te permettent de créer des styles dynamiques sans JavaScript !

Les fonctions mathématiques les plus importantes :

• calc() - calculs de base
• min() - la plus petite valeur
• max() - la plus grande valeur
• clamp() - valeur dans une plage
• minmax() - pour CSS Grid

Analogie égyptienne : C'est comme un scribe égyptien effectuant des calculs précis pour la construction d'une pyramide - les mathématiques intégrées directement dans les plans !

calc() - Calculs de base

calc() te permet d'effectuer des opérations mathématiques avec différentes unités :

Syntaxe de base

1.element {
2  /* Addition */
3  width: calc(100% - 50px);
4
5  /* Soustraction */
6  height: calc(100vh - 80px);
7
8  /* Multiplication */
9  font-size: calc(16px * 1.5);
10
11  /* Division */
12  padding: calc(20px / 2);
13
14  /* Combinaisons */
15  margin: calc((100% - 960px) / 2);
16}

Règles importantes :

• Les espaces autour de + et - sont OBLIGATOIRES : calc(100% - 50px) correct, calc(100%-50px) incorrect
• Les espaces autour de * et / sont facultatifs
• Tu peux mélanger les unités (%, px, rem, vh, etc.)
• Tu peux imbriquer calc()

Exemples pratiques de calc()

1. Mise en page avec barre latérale

1.container {
2  display: flex;
3}
4
5.sidebar {
6  width: 250px;
7  flex-shrink: 0;
8}
9
10.main-content {
11  /* Largeur = 100% moins la barre latérale moins le gap */
12  width: calc(100% - 250px - 20px);
13}

2. Pleine hauteur moins l'en-tête et le pied de page

1.main {
2  /* 100vh moins la hauteur de l'en-tête (80px) et du pied de page (60px) */
3  min-height: calc(100vh - 80px - 60px);
4}

3. Padding réactif

1.section {
2  /* Le padding grandit avec la taille de l'écran */
3  padding: calc(20px + 2vw);
4  /* À 320px : 20px + 6.4px = 26.4px */
5  /* À 1920px : 20px + 38.4px = 58.4px */
6}

4. Grille avec gap

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
4  gap: 20px;
5  /* 3 colonnes, 2 gaps de 20px = 40px de gap total */
6}

5. Boîte à ratio d'aspect (avant la propriété aspect-ratio)

1.aspect-16-9 {
2  width: 100%;
3  /* 9/16 = 0.5625 = 56.25% */
4  padding-bottom: calc(9 / 16 * 100%);
5  position: relative;
6}
7
8.aspect-16-9 > * {
9  position: absolute;
10  top: 0;
11  left: 0;
12  width: 100%;
13  height: 100%;
14}

min() - La plus petite valeur

min() renvoie la plus petite valeur parmi celles fournies. Idéal pour définir des limites maximales !

1.element {
2  /* Jamais plus de 800px, mais peut être plus petit */
3  width: min(800px, 100%);
4
5  /* Équivalent à : */
6  width: 100%;
7  max-width: 800px;
8}

Exemples pratiques de min()

1. Max-width réactive

1.container {
2  /* Maximum 1200px, mais 90% sur les petits écrans */
3  width: min(1200px, 90%);
4  margin: 0 auto;
5}

2. Font-size réactive

1h1 {
2  /* Maximum 48px, mais s'adapte à l'écran */
3  font-size: min(48px, 5vw);
4}

3. Padding avec limite

1.section {
2  /* Le padding grandit, mais maximum 80px */
3  padding: min(80px, 5vw);
4}

4. Multi-colonnes avec min()

1.grid {
2  display: grid;
3  /* Colonnes minimum 250px, maximum parts égales */
4  grid-template-columns: repeat(auto-fit, min(250px, 100%));
5  gap: 20px;
6}

max() - La plus grande valeur

max() renvoie la plus grande valeur parmi celles fournies. Idéal pour définir des limites minimales !

1.element {
2  /* Jamais plus petit que 200px, mais peut être plus grand */
3  width: max(200px, 50%);
4
5  /* Équivalent à : */
6  width: 50%;
7  min-width: 200px;
8}

Exemples pratiques de max()

1. Min-width réactive

1.card {
2  /* Minimum 300px, mais peut grandir */
3  width: max(300px, 30%);
4}

2. Font-size avec minimum

1body {
2  /* Minimum 16px, mais grandit avec l'écran */
3  font-size: max(16px, 1vw);
4}

3. Espacement avec minimum

1.section {
2  /* Minimum 20px de padding, même sur les petits écrans */
3  padding: max(20px, 3vw);
4}

4. Colonnes de grille avec minimum

1.grid {
2  /* Colonnes minimum 200px */
3  grid-template-columns: repeat(auto-fit, minmax(max(200px, 25%), 1fr));
4}

clamp() - Valeur dans une plage

clamp() est la fonction la plus puissante - elle renvoie une valeur contrainte à une plage !

Syntaxe : clamp(minimum, préféré, maximum)

1.element {
2  /* Minimum 16px, préféré 2vw, maximum 32px */
3  font-size: clamp(16px, 2vw, 32px);
4}

Comment ça fonctionne :

1. Si préféré < minimum -> renvoie minimum
2. Si préféré > maximum -> renvoie maximum
3. Sinon -> renvoie préféré

Exemples pratiques de clamp()

1. Typographie fluide - MEILLEUR CAS D'USAGE

1h1 {
2  /* Taille de police de 24px à 64px, s'adapte en douceur */
3  font-size: clamp(24px, 4vw + 1rem, 64px);
4}
5
6h2 {
7  font-size: clamp(20px, 3vw + 1rem, 48px);
8}
9
10h3 {
11  font-size: clamp(18px, 2.5vw + 1rem, 36px);
12}
13
14p {
15  font-size: clamp(16px, 1vw + 0.5rem, 20px);
16}
17
18/* Un seul système typographique pour tous les écrans ! */

2. Largeur de conteneur

1.container {
2  /* De 320px à 1200px, s'adapte en douceur */
3  width: clamp(320px, 90%, 1200px);
4  margin: 0 auto;
5}

3. Système d'espacement

1:root {
2  /* Espacement fluide des petits aux grands écrans */
3  --spacing-xs: clamp(0.5rem, 1vw, 1rem);
4  --spacing-sm: clamp(1rem, 2vw, 1.5rem);
5  --spacing-md: clamp(1.5rem, 3vw, 2.5rem);
6  --spacing-lg: clamp(2rem, 4vw, 4rem);
7  --spacing-xl: clamp(3rem, 6vw, 6rem);
8}
9
10.section {
11  padding: var(--spacing-lg);
12  margin-bottom: var(--spacing-md);
13}

4. Hauteur de ligne

1p {
2  font-size: clamp(16px, 1vw + 0.5rem, 20px);
3  /* La hauteur de ligne est fluide aussi ! */
4  line-height: clamp(1.5, 0.5vw + 1.3, 1.8);
5}

5. Gap de grille

1.grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4  /* Gap fluide */
5  gap: clamp(1rem, 2vw, 3rem);
6}

6. Padding de bouton

1.button {
2  /* Le padding grandit avec la taille de l'écran */
3  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
4  font-size: clamp(14px, 1.5vw, 18px);
5}

Combinaisons avancées

calc() + min/max/clamp

1.element {
2  /* Largeur avec padding dynamique */
3  width: calc(min(1200px, 100%) - 2rem);
4
5  /* Hauteur avec minimum et décalage dynamique */
6  height: calc(max(400px, 50vh) - 80px);
7
8  /* Padding proportionnel avec limites */
9  padding: calc(clamp(1rem, 3vw, 3rem) * 0.5);
10}

Fonctions imbriquées

1.container {
2  /* Maximum 1400px, mais minimum 90%, avec padding */
3  width: calc(min(1400px, 90%) - clamp(1rem, 3vw, 3rem) * 2);
4}

Variables CSS + Fonctions

1:root {
2  --base-spacing: 1rem;
3  --multiplier: 2;
4  --max-spacing: 4rem;
5}
6
7.element {
8  /* Espacement dynamique avec des variables */
9  padding: clamp(
10    var(--base-spacing),
11    calc(var(--base-spacing) * var(--multiplier)),
12    var(--max-spacing)
13  );
14}

Système complet de typographie fluide

1:root {
2  /* Unités de viewport pour la mise à l'échelle */
3  --fluid-min-width: 320;
4  --fluid-max-width: 1920;
5
6  /* Tailles de police */
7  --fluid-xs: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
8  --fluid-sm: clamp(0.875rem, 0.75vw + 0.625rem, 1rem);
9  --fluid-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
10  --fluid-md: clamp(1.125rem, 1.5vw + 0.75rem, 1.5rem);
11  --fluid-lg: clamp(1.5rem, 2vw + 1rem, 2rem);
12  --fluid-xl: clamp(2rem, 3vw + 1.25rem, 3rem);
13  --fluid-2xl: clamp(2.5rem, 4vw + 1.5rem, 4rem);
14  --fluid-3xl: clamp(3rem, 5vw + 2rem, 5rem);
15}
16
17body {
18  font-size: var(--fluid-base);
19  line-height: clamp(1.5, 0.3vw + 1.4, 1.7);
20}
21
22h1 {
23  font-size: var(--fluid-3xl);
24  line-height: 1.1;
25}
26
27h2 {
28  font-size: var(--fluid-2xl);
29  line-height: 1.2;
30}
31
32h3 {
33  font-size: var(--fluid-xl);
34  line-height: 1.3;
35}
36
37.small {
38  font-size: var(--fluid-sm);
39}
40
41.large {
42  font-size: var(--fluid-lg);
43}

Autres fonctions CSS utiles

attr() - Récupérer un attribut

1.tooltip::after {
2  content: attr(data-tooltip);
3  /* Utiliser la valeur de l'attribut comme contenu */
4}

var() - Variables CSS

1:root {
2  --primary-color: #3498db;
3  --spacing: 20px;
4}
5
6.element {
7  color: var(--primary-color);
8  padding: var(--spacing);
9
10  /* Avec repli */
11  background: var(--secondary-color, #2ecc71);
12}

rgb(), rgba(), hsl(), hsla()

1.element {
2  /* RGB */
3  color: rgb(52, 152, 219);
4
5  /* RGBA avec alpha */
6  background: rgba(52, 152, 219, 0.5);
7
8  /* HSL (Teinte, Saturation, Luminosité) */
9  color: hsl(204, 70%, 53%);
10
11  /* HSLA */
12  background: hsla(204, 70%, 53%, 0.5);
13}

url() - Ressources externes

1.element {
2  background-image: url('pyramid.jpg');
3  list-style-image: url('hieroglyph.svg');
4}

Performance et support des navigateurs

Support des navigateurs :

• calc() - partout (depuis 2013)
• min(), max() - Chrome 79+, Firefox 75+, Safari 11.1+ (2020)
• clamp() - Chrome 79+, Firefox 75+, Safari 13.1+ (2020)

Performance :

• Les fonctions sont calculées UNIQUEMENT lorsque les valeurs changent
• Mieux que JavaScript pour les calculs simples
• Accélérées par le GPU lorsqu'elles sont utilisées avec transform

Replis pour les navigateurs plus anciens :

1.element {
2  /* Repli */
3  font-size: 20px;
4
5  /* Navigateurs modernes */
6  font-size: clamp(16px, 2vw, 32px);
7}
8
9/* Ou avec @supports */
10@supports (font-size: clamp(16px, 2vw, 32px)) {
11  .element {
12    font-size: clamp(16px, 2vw, 32px);
13  }
14}

Bonnes pratiques

1. Utilise clamp() pour la typographie fluide - un seul système pour tous les écrans
2. Combine avec les variables CSS - maintenance plus facile
3. Teste à différentes résolutions - en particulier les cas limites
4. Ajoute des replis - pour les navigateurs plus anciens
5. Documente les plages - les commentaires sont utiles pour les autres

1/* Bien documenté */
2h1 {
3  /* 24px @ 320px -> 64px @ 1920px */
4  font-size: clamp(24px, 1.5rem + 2.5vw, 64px);
5}

Résumé

Fonctions CSS - applications :

• calc() - calculs de base, mélange d'unités
• min() - limites maximales (max-width sans max-width)
• max() - limites minimales (min-width sans min-width)
• clamp() - valeurs dans une plage, typographie fluide

Avantages :

• Valeurs dynamiques sans JavaScript
• Réactivité automatique
• Moins de media queries
• Mise à l'échelle fluide

Meilleurs cas d'usage :

• Système de typographie fluide
• Espacement réactif
• Largeurs de conteneur
• Calculs de mise en page

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>accent-color</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>accent-color - stylisation des contrôles</h1>
10    <form class="egyptian-form">
11        <fieldset>
12            <legend>Choisis un temple</legend>
13            <label><input type="checkbox" checked> Karnak</label>
14            <label><input type="checkbox"> Louxor</label>
15            <label><input type="checkbox"> Abou Simbel</label>
16        </fieldset>
17        <fieldset>
18            <legend>Dieu préféré</legend>
19            <label><input type="radio" name="god" checked> Râ</label>
20            <label><input type="radio" name="god"> Anubis</label>
21            <label><input type="radio" name="god"> Isis</label>
22        </fieldset>
23        <fieldset>
24            <legend>Niveau de connaissances</legend>
25            <label>Débutant <input type="range" min="0" max="100" value="50"> Expert</label>
26            <label>Progression : <progress value="65" max="100">65%</progress></label>
27        </fieldset>
28    </form>
29</body>
30</html>

Souviens-toi : Les fonctions CSS sont comme les mathématiques des scribes égyptiens - des calculs précis intégrés directement dans les feuilles de style, te permettant de créer des designs dynamiques et réactifs sans JavaScript !