Een kleine pagina vormgeven

De bakkerijpagina uit de HTML-cursus krijgt kleuren, afstanden en indeling uit ongeveer 40 regels CSS en de HTML verandert helemaal niet.

Begin met keuzes, niet met regels

Maak een paar keuzes voordat je regels schrijft: één accentkleur, een tekstkleur en een achtergrond met voldoende contrast, één lettertypelijst, een basisgrootte en een afstandsstap die overal terugkomt (bijvoorbeeld 8, 16 en 24 pixels). Een pagina die een paar waarden hergebruikt, oogt rustig en doordacht; een pagina waarop elk blok een eigen net iets andere marge heeft, oogt rommelig, ook als niemand kan zeggen waarom. CSS heeft hiervoor een functie: aangepaste eigenschappen.

Aangepaste eigenschappen

Een aangepaste eigenschap is een zelfbedachte naam die met twee koppeltekens begint en een waarde bevat: --accent: #1a5fb4;. Definieer je keuzes eenmaal op :root, het html-element, en gebruik ze overal met var(): background: var(--accent);. Aangepaste eigenschappen erven over zoals teksteigenschappen, zodat elk element de waarden kan lezen die op het hoofdelement zijn gedefinieerd. De accentkleur van de hele site veranderen betekent nu één regel bewerken. Je kunt een eigenschap ook opnieuw definiëren binnen een mediaquery, bijvoorbeeld om kleuren om te wisselen voor 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; }

De stylesheet van boven naar beneden lezen

In de stylesheet hierboven gebruik je iets uit bijna elk hoofdstuk. Het hoofdelement bevat de keuzes. Met body stel je lettertype, regelhoogte en kleuren eenmaal in en via overerving komen ze in elke alinea terecht. De kop is een flexrij met regelomloop, zodat het menu op een smalle telefoon onder de naam komt in plaats van samengedrukt te worden. main heeft een max-width en margin: 0 auto, zodat regels leesbaar blijven en de inhoud op brede schermen gecentreerd staat. De kaarten gebruiken het auto-fill-gridpatroon, zodat ze zonder mediaquery van één naar meerdere kolommen omlopen, en afbeeldingen zijn vloeiend. De knop krijgt een hoverkleur en, net zo belangrijk, een zichtbare focusomlijning voor toetsenbordgebruikers.

Controleer op echte schermen

CSS testen betekent kijken. Open de pagina in een smal venster (320 pixels voor de WCAG-reflowcontrole) en een breed venster en let op zijwaarts scrollen en tekst die de randen raakt. Zoom naar 200 procent. Ga met Tab door de pagina en zorg dat je altijd ziet waar de focus is. Controleer tekst- en knopcontrast in de ontwikkelaarstools. Zet de donkere modus of verminderde beweging van je systeem aan als je daarvoor opmaak hebt gemaakt. In de ontwikkelaarstools van de browser kun je elke waarde direct veranderen en het blokmodel van elk element bekijken. Dat is de snelste manier om te achterhalen waarom iets staat waar het staat.

Vanaf hier schaal je dezelfde onderdelen op naar elke site. Grotere projecten verdelen de stylesheet over bestanden, geven classes namen naar wat een component is (kaart, knop, sitekop) en houden een korte lijst gedeelde aangepaste eigenschappen bij. Maar de onderliggende regels zijn die uit deze negen hoofdstukken.