Mettre en forme une petite page

La page de la boulangerie du cours HTML reçoit ses couleurs, ses espacements et sa mise en page d'environ 40 lignes de CSS, sans que le HTML change du tout.

Commencer par des choix, pas par des règles

Avant d'écrire des règles, fais quelques choix : une couleur d'accent, une couleur de texte et un fond assez contrastés, une liste de polices, une taille de base, et un pas d'espacement qui se répète partout (par exemple 8, 16 et 24 pixels). Une page qui réutilise quelques valeurs paraît calme et réfléchie ; une page où chaque boîte a sa propre marge légèrement différente paraît brouillonne, même si personne ne sait dire pourquoi. CSS a une fonctionnalité faite pour cela : les propriétés personnalisées.

Les propriétés personnalisées

Une propriété personnalisée est un nom que tu inventes, qui commence par deux tirets et contient une valeur : --accent: #1a5fb4;. Définis tes choix une seule fois sur :root, qui est l'élément html, et utilise-les partout avec var() : background: var(--accent);. Les propriétés personnalisées sont héritées comme les propriétés de texte : chaque élément peut donc lire celles définies sur la racine. Changer la couleur d'accent de tout le site revient alors à modifier une seule ligne. Tu peux aussi redéfinir une propriété dans une media query, par exemple pour changer de couleurs avec prefers-color-scheme: dark.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

Lire la feuille de style de haut en bas

La feuille de style ci-dessus utilise quelque chose de presque chaque unité. La racine contient les choix. body règle une seule fois la police, l'interligne et les couleurs, et l'héritage les transmet à chaque paragraphe. L'en-tête est une ligne flex qui passe à la ligne : sur un téléphone étroit, le menu descend sous le nom au lieu d'être écrasé. main a une max-width et margin: 0 auto, ce qui garde des lignes lisibles et centre le contenu sur les grands écrans. Les cartes utilisent le motif de grille auto-fill : elles passent d'une colonne à plusieurs sans media query, et les images sont fluides. Le bouton reçoit une couleur au survol et, tout aussi important, un contour de focus visible pour les utilisateurs du clavier.

Vérifier sur de vrais écrans

Tester du CSS, c'est regarder. Ouvre la page dans une fenêtre étroite (320 pixels pour le contrôle de redistribution des WCAG) et dans une fenêtre large, et cherche le défilement horizontal et le texte qui touche les bords. Zoome à 200 pour cent. Parcours la page avec Tab et vérifie que tu vois toujours où se trouve le focus. Vérifie le contraste du texte et des boutons dans les outils de développement. Active le mode sombre ou le réglage de réduction des animations de ton système si tu as prévu des styles pour eux. Les outils de développement du navigateur permettent de changer n'importe quelle valeur en direct et de voir le modèle de boîte de n'importe quel élément : c'est le moyen le plus rapide de comprendre pourquoi quelque chose se trouve là où il est.

À partir de là, les mêmes briques s'appliquent à n'importe quel site. Les projets plus importants découpent la feuille de style en fichiers, nomment les classes d'après ce qu'est un composant (carte, bouton, en-tête du site) et gardent une courte liste de propriétés personnalisées partagées, mais les règles de fond sont celles de ces neuf unités.