Dare stile a una piccola pagina

La pagina della panetteria del corso di HTML prende colori, spaziature e layout da circa 40 righe di CSS, e l'HTML non cambia per niente.

Comincia dalle decisioni, non dalle regole

Prima di scrivere regole, prendi poche decisioni: un colore d'accento, un colore del testo e uno sfondo con abbastanza contrasto, un elenco di caratteri, una dimensione di base e un passo di spaziatura che si ripete ovunque (per esempio 8, 16 e 24 pixel). Una pagina che riusa pochi valori sembra calma e voluta; una pagina in cui ogni riquadro ha un margine un po' diverso sembra disordinata anche quando nessuno sa dire perché. Il CSS ha uno strumento fatto apposta: le proprietà personalizzate.

Proprietà personalizzate

Una proprietà personalizzata è un nome che inventi tu, che comincia con due trattini e contiene un valore: --accent: #1a5fb4;. Definisci le tue decisioni una volta sola su :root, cioè l'elemento html, e usale ovunque con var(): background: var(--accent);. Le proprietà personalizzate si ereditano come le proprietà del testo, quindi ogni elemento può leggere quelle definite sulla radice. Ora cambiare il colore d'accento di tutto il sito significa modificare una riga. Puoi anche ridefinire una proprietà dentro una media query, per esempio per scambiare i colori con 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; }

Leggere il foglio di stile dall'alto in basso

Il foglio di stile qui sopra usa qualcosa di quasi ogni unità. La radice contiene le decisioni. body imposta una volta il carattere, l'interlinea e i colori, e l'ereditarietà li porta in ogni paragrafo. L'intestazione è una riga flex che va a capo, così su un telefono stretto il menu scende sotto il nome invece di essere schiacciato. main ha un max-width e margin: 0 auto, che mantengono le righe leggibili e centrano il contenuto sugli schermi larghi. Le schede usano lo schema di griglia auto-fill, quindi passano da una colonna a diverse senza media query, e le immagini sono fluide. Il pulsante ha un colore al passaggio del mouse e, cosa altrettanto importante, un contorno di focus visibile per chi usa la tastiera.

Controllalo su schermi veri

Testare il CSS significa guardare. Apri la pagina in una finestra stretta (320 pixel per il controllo di reflow WCAG) e in una larga, e cerca lo scorrimento laterale e il testo che tocca i bordi. Ingrandisci al 200 per cento. Scorri la pagina con Tab e assicurati di vedere sempre dove si trova il focus. Controlla il contrasto di testo e pulsanti negli strumenti per sviluppatori. Attiva la modalità scura o il movimento ridotto del sistema, se hai previsto uno stile per loro. Gli strumenti per sviluppatori del browser ti permettono di cambiare qualsiasi valore dal vivo e di vedere il modello a riquadri di ogni elemento: è il modo più rapido per capire perché qualcosa si trova dove si trova.

Da qui, gli stessi pezzi crescono fino a qualsiasi sito. I progetti più grandi dividono il foglio di stile in più file, danno alle classi il nome di ciò che è un componente (scheda, pulsante, intestazione del sito) e tengono un breve elenco di proprietà personalizzate condivise, ma le regole di fondo sono quelle di queste nove unità.