Responsief webontwerp

Met responsief webontwerp kan één HTML-pagina zich aanpassen als de beschikbare ruimte verandert. Een rechtop gehouden telefoon, een gedraaide tablet en een desktopvenster waarvan de grootte is veranderd, moeten allemaal leesbare tekst, bruikbare bedieningselementen en passende afbeeldingen tonen. Je ontwerpt voor een doorlopend bereik van breedtes, ook tussen de bekende apparaatformaten.

Ethan Marcotte introduceerde de term in 2010 rond drie technieken: vloeiende lay-outs, flexibele afbeeldingen en mediaquery's. Flexbox, grid, containerquery's en opmaakcode voor responsieve afbeeldingen breiden die gereedschapskist nu uit. Elk lost een ander deel van de taak op; een pagina heeft meer nodig dan één instelling.

Tel de juiste pixels

Een CSS-pixel is een lay-outeenheid, niet per se één punt op het scherm. CSS definieert 96px als gelijk aan 1in; op een scherm garandeert die verhouding geen gemeten fysieke inch. Een scherm met een hoge pixeldichtheid gebruikt meerdere apparaatpixels voor elke CSS-pixel. De apparaatpixelverhouding beschrijft die verhouding.

Een telefoon van 390 CSS-pixels breed met een verhouding van 3 is 1.170 apparaatpixels breed. Een breedtequery ziet nog steeds 390px. De extra punten helpen om scherpe tekst en afbeeldingen te tekenen; ze geven een lay-out niet driemaal zoveel ruimte. Dit onderscheid is belangrijk als je later afbeeldingsbestanden kiest.

De viewport is het browsergebied waarin de pagina wordt weergegeven, zonder de werkbalken van de browser zelf. Als je een venster van grootte verandert of een apparaat draait, verandert de beschikbare ruimte. Op telefoons kan ook de zichtbare hoogte veranderen wanneer werkbalken verschijnen of verdwijnen.

Geef mobiele browsers de bedoelde breedte door

Mobiele browsers kunnen een niet-ingestelde pagina indelen in een brede virtuele viewport, meestal ongeveer 980 CSS-pixels, en die daarna verkleinen tot de schermgrootte. Op een telefoon van 390px is de schaal ongeveer 0,4. Tekst die is ingesteld op 16px ziet er dan ongeveer 6,4px hoog uit en een query voor een smalle breedte komt mogelijk nooit overeen omdat de lay-outviewport nog steeds breed is.

Zet dit in de <head> van het document:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width vraagt om de apparaatbreedte in CSS-pixels. initial-scale=1 begint op normaal zoomniveau. Laad de pagina na het toevoegen opnieuw in een browserweergave ter grootte van een telefoonscherm en controleer zowel de tekst als de actieve breedtequery's.

Laat zoomen beschikbaar. Voeg geen user-scalable=no of maximum-scale=1 toe. Lezers met een verminderd gezichtsvermogen moeten inhoud kunnen vergroten; tekst moet tot 200% kunnen worden vergroot zonder verlies van inhoud of functionaliteit. Sommige mobiele browsers negeren zoombeperkingen, maar de pagina moet zoomen zelf ondersteunen.

Controleer ook de lay-out

De viewportmetatag verandert een box met een vaste breedte niet. Een .page met width: 960px steekt nog steeds buiten een viewport van 390px uit. Verander starre breedtes in vloeiend schaalbare breedtes met grenzen, maak media flexibel en pas de lay-out aan waar de inhoud dat nodig heeft.

Om een zeer kleine mobiele pagina te onderzoeken, controleer je eerst de <head> op de viewportmetatag. Om een pagina te onderzoeken die normaal van grootte is maar horizontaal scrolt, inspecteer je de boxen die buiten de beschikbare breedte vallen. Deze symptomen wijzen op verschillende oorzaken.

Kies een eenheid door je af te vragen wat de afmeting moet volgen. Een kolom volgt meestal het omsluitende blok. De binnenruimte van een knop kan de tekst van de knop volgen. De regellengte van een alinea volgt het lettertype. Met de juiste referentie werken veranderingen samen.

Percentages en het boxmodel

Een box met width: 50% is 300px breed in een omsluitend blok van 600px en 180px breed in een blok van 360px. Ook procentuele binnenruimte en marges, inclusief de waarden boven en onder, gebruiken bij gewone horizontale tekst de breedte van het omsluitende blok. Zo is padding-top: 10% in een bovenliggend element van 600px breed 60px.

Hoogte werkt anders. Een procentuele hoogte heeft een bepaalde referentiehoogte nodig. Als de hoogte van een gewoon bovenliggend element uit de inhoud volgt, gedraagt height: 50% zich meestal als auto. Laat tekstboxen meegroeien met hun inhoud in plaats van ze met procentuele hoogtes te regelen.

Gebruik een vloeiend schaalbare container met een maximum:

.page {
  box-sizing: border-box;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Op een smal scherm vult de box de beschikbare breedte, met binnenruimte aan de binnenkant. Op een breed scherm stopt die bij 70rem en centreren de automatische marges in de inlinerichting de box. Bij een grootte van 16px voor het hoofdelement is de maximale buitenbreedte 1.120px. border-box neemt binnenruimte en randen op in de opgegeven breedte; bij content-box zouden 100% breedte plus binnenruimte overlopen. Een vaste width: 70rem zou krimpen ook verhinderen.

Een omhullend element van 340px breed met border-box en 16px binnenruimte aan elke kant houdt bijvoorbeeld 308px over voor de inhoud als er geen rand is. De opgegeven breedte beschrijft de buitenkant van deze box. Als je dezelfde declaratie omzet naar content-box, is alleen de inhoud al 340px en wordt de buitenbreedte 372px. Door deze afzonderlijke breedtes in de ontwikkelaarstools te inspecteren, zie je gemakkelijker of binnenruimte de oorzaak is van overlopende inhoud.

Laat tekstinstellingen doorwerken

Laat de lettergrootte van het hoofdelement op de standaardwaarde van de lezer staan of gebruik een percentage zoals 100%. Bij een grootte van 16px voor het hoofdelement is 1.5rem 24px; bij 20px is die 30px. Een vaste html { font-size: 16px; } verhindert dat de voorkeur voor de standaardlettergrootte doorwerkt in afmetingen die relatief zijn aan het hoofdelement.

Voor font-size gebruikt em de lettergrootte van het bovenliggende element. Geneste lijsten die elk op 1.2em zijn ingesteld, vermenigvuldigen die grootte daarom: 16px wordt 19,2px en daarna 23,04px. Gebruik rem als alle nestniveaus dezelfde grootte moeten behouden.

In andere eigenschappen gebruikt em de eigen lettergrootte van het element. Een knop met padding: 0.5em 1em krijgt meer binnenruimte als de tekst groeit. Zo blijft de tussenruimte in verhouding zonder apart breekpunt.

Voor alinea's biedt max-width: 65ch een nuttige grens voor de leesbaarheid. De eenheid meet de breedte van “0” en telt in een proportioneel lettertype dus niet precies het aantal tekens. Ongeveer 45–75 tekens per regel is een gangbare richtlijn voor de leesbaarheid; controleer het werkelijke lettertype en de tekst in de browser.

Viewporteenheden volgen de viewport van de browser, ook als een element in een kleinere box staat. 1vw is 1% van de viewportbreedte; 1vh is 1% van de hoogte. vmin gebruikt de kleinste afmeting en vmax de grootste. In een viewport van 800px breed is 50vw 400px. In een viewport van 300px hoog is 70vh 210px.

Deze referentie is belangrijk. Een zijbalk kan in een venster van 1.400px slechts 260px breed zijn. Een kindelement met width: 50vw vraagt om 700px en past dus niet in die zijbalk. Gebruik een percentage als het kindelement het bovenliggende element moet volgen. Geef voor een gewoon blok over de volle breedte de voorkeur aan width: 100%: 100vw kan de breedte van een desktopschuifbalk omvatten en horizontaal scrollen veroorzaken.

Kies welke mobiele hoogte je bedoelt

Werkbalken van mobiele browsers kunnen het zichtbare paginagebied verkleinen. De eenheden voor viewporthoogte onderscheiden drie toestanden:

Gewoon vh komt overeen met de grote viewport. Er bestaan ook breedtevarianten zoals svw, lvw en dvw. Voor een hoge openingssectie stelt min-height: 100svh een stabiel minimum in, terwijl langere inhoud kan groeien. Bij een vaste height loopt inhoud buiten de sectie als die hoger wordt. Dynamische eenheden kunnen veranderingen van de werkbalken volgen, maar updates kunnen in stappen plaatsvinden en de lay-out laten bewegen.

Kies de hoogtereferentie op basis van het gedrag dat je nodig hebt. Een stabiele openingssectie kan de kleine viewport gebruiken, ook nadat de werkbalken verdwijnen; die hoeft niet opnieuw uit te rekken alleen omdat er meer ruimte zichtbaar wordt. Een paneel dat die veranderende ruimte moet volgen, kan dynamische eenheden gebruiken, waarbij je de mogelijke beweging accepteert. In beide gevallen laat een minimumhoogte extra inhoud de sectie in de normale documentstroom verlengen.

Begrens een vloeiend schaalbare waarde

min() kiest de kleinste waarde en kan een breedte begrenzen: width: min(100%, 40rem) vult het bovenliggende element totdat de breedte 40rem bereikt. max() kiest de grootste waarde en geeft een ondergrens. clamp() geeft achtereenvolgens een ondergrens, een voorkeurswaarde en een bovengrens.

.title {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Bij een grootte van 16px voor het hoofdelement is de ondergrens 16px, de voorkeursgrootte 8px plus 2% van de viewportbreedte en de bovengrens 32px. Loop de grenzen na:

1. Bij 375px is de voorkeursgrootte 15,5px, dus geldt het minimum van 16px.
2. Bij 1.000px is de voorkeursgrootte 28px, binnen de grenzen.
3. Bij 1.400px is de voorkeursgrootte 36px, dus geldt het maximum van 32px.

Dezelfde functies accepteren berekeningen zoals min(100% - 2rem, 70rem). Gebruik verenigbare lengtewaarden en spaties rond het minteken.

Tekst waarvan de grootte alleen in vw is ingesteld, kan op smalle schermen heel klein en op brede schermen enorm worden. Bij zoomen op een desktop wordt de viewport ook smaller in CSS-pixels, wat de vergroting van die tekst teniet kan doen. Neem een deel op dat relatief is aan de lettergrootte en stel bruikbare grenzen in. Test daarna de tekstvergroting: een gemengde rem/vw-expressie garandeert op zichzelf geen volledige vergroting tot 200%.

Een mediaquery past CSS toe als aan een voorwaarde over de uitvoer, viewport of voorkeuren van de lezer is voldaan. De browser controleert opnieuw als relevante omstandigheden veranderen, zodat stijlen kunnen wisselen wanneer je een venster van grootte verandert, zonder de pagina opnieuw te laden.

.heading { font-size: 1.25rem; }

@media (min-width: 40em) {
  .heading { font-size: 2rem; }
}

Bij de gebruikelijke browserstandaard van 16px is 40em gelijk aan 640px. Vanaf die breedte geldt de grotere kop. In mediaquery's gebruiken em en rem de oorspronkelijke lettergrootte van de browser, niet een door de maker op <html> ingestelde grootte. Bij een lezer met een standaardgrootte van 20px vindt dezelfde omschakeling plaats bij 800px.

Lees voorwaarden nauwkeurig

min-width omvat de grenswaarde: 600px komt overeen met min-width: 600px. Ook max-width omvat de grenswaarde. Bereiksyntaxis maakt de vergelijking expliciet:

@media (width >= 600px) { /* wider layout */ }
@media (600px <= width < 900px) { /* middle band */ }

Als je max-width: 600px combineert met min-width: 600px, komen beide overeen bij 600px. Met 599px en 600px ontstaat juist een gat bij fractionele breedtes zoals 599,5px. Query's met oplopende minimumbreedtes voorkomen dat gat; aanvullende bereiken zoals < 600px en >= 600px zijn een andere mogelijkheid.

Mediatypen geven de uitvoer aan: screen, print of de standaardwaarde all. @media print kan navigatie verwijderen en donkere tekst op wit papier gebruiken. Je kunt voorwaarden op nuttige manieren combineren:

only heeft in huidige browsers geen nuttig effect. Breedte en hoogte beschrijven de viewport; orientation: portrait betekent dat de hoogte minstens gelijk is aan de breedte. Andere kenmerken testen invoernauwkeurigheid, aanwijzen zonder activering, resolutie, minder beweging en kleurenschema. Een liggende viewport vertelt je niet of de lezer een muis heeft.

Een praktische voorwaarde is @media (hover: hover) and (pointer: fine): die vereist een primair invoerapparaat dat zonder activering kan aanwijzen en nauwkeurig kan richten. Een smal venster dat met een muis wordt bediend, kan overeenkomen, terwijl een breed apparaat dat vooral aanraakbediening gebruikt dat mogelijk niet doet. Gebruik de query voor optionele aanwijzereffecten; houd de onderliggende handeling beschikbaar via de normale bedieningselementen van de pagina.

Houd de cascade in het oog

Een mediaquery verhoogt de specificiteit van een selector niet. In een gewoon stijlblad met even specifieke regels krijgt de latere overeenkomende declaratie voorrang. Als de basisregel voor .heading na de regel voor bredere schermen hierboven staat, krijgt die ook bij brede schermen voorrang. Zet basisregels eerst en de query's die ze veranderen daarna.

Je kunt ook in HTML een voorwaarde toevoegen. <link rel="stylesheet" href="print.css" media="print"> past de regels toe bij het afdrukken, maar een browser kan het bestand nog steeds met lagere prioriteit downloaden. Het media-attribuut van een <source>-element gebruikt voorwaarden om een afbeeldingsbron te kiezen.

Mobile-first-CSS begint met de smalle lay-out als gewone regels buiten alle query's. Query's voor minimumbreedtes voegen vervolgens veranderingen toe wanneer de ruimte dat toelaat. Dit past bij de normale documentstroom: blokken stapelen al verticaal, zodat de basispagina vaak weinig lay-outcode nodig heeft.

Desktop-first-CSS begint met regels voor brede schermen en gebruikt query's voor maximumbreedtes om die terug te draaien. Beide benaderingen kunnen werken, maar mobile-first maakt de basis en elke latere verandering meestal gemakkelijker te volgen.

Bouw vanuit één kolom

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Bij een standaardgrootte van 16px vinden de veranderingen plaats bij 640px en 1.024px. Een viewport van 500px toont één kolom. Bij 800px komt de eerste query overeen en ontstaan twee kolommen. Bij 1.200px komen beide query's overeen; de latere regel geeft drie kolommen.

De query voor grotere breedtes schakelt de eerdere query niet uit. Als je de volgorde omdraait, staat de regel voor 40em als laatste en brengt die de brede lay-out terug tot twee kolommen. Zet query's met oplopende minimumbreedtes in oplopende volgorde als ze dezelfde eigenschap met dezelfde specificiteit veranderen.

Zoek het breekpunt in de inhoud

Een breekpunt is een punt waarop een query de lay-out verandert. Begin met de werkelijke inhoud in een smal venster en maak dat langzaam breder. Let op navigatie die onhandig naar een volgende regel loopt, alinea's die te lang worden of kaarten die verder uitrekken dan een bruikbare leesbreedte. Voeg een verandering toe waar die de inhoud verbetert.

Kies een breekpunt niet alleen omdat een bekend apparaat die breedte heeft. Schermen verschillen, desktopvensters kunnen elke grootte hebben en door een groter lettertype kan dezelfde navigatie meer ruimte nodig hebben. Breekpunten in relatieve eenheden kunnen de lay-out helpen reageren op de standaardtekstgrootte van de lezer.

Test na elke verandering beide kanten van het breekpunt en verschillende breedtes tussen de veranderingen. Een lay-out die er alleen bij 375px, 768px en 1.280px goed uitziet, kan op veel andere punten nog steeds misgaan. Vloeiend schaalbare breedtes, regelomloop en automatische gridkolommen vangen veel van die tussenliggende ruimte op.

Test de navigatie en de kaartenlijst samen nadat je een zijbalk aan de pagina hebt toegevoegd. Het venster is breder geworden, maar de hoofdkolom kan smaller zijn geworden doordat die de ruimte nu deelt. Een kaartenlay-out die net onder het breekpunt van de pagina werkte, kan er net boven misgaan. Hier is het nuttig om kaarten te laten doorlopen naar een volgende regel of in automatische kolommen te laten passen, terwijl de pagina zelf een expliciete query gebruikt.

Houd de inhoud en downloads bruikbaar

Telefoongebruikers hebben de inhoud van de pagina ook nodig. Als een secundaire uitleg te veel ruimte inneemt, zet die dan lager in de stapel of plaats die in een ingebouwde <details>-uitklapbediening die lezers kunnen openen. Verwijder noodzakelijke informatie niet alleen om een schermafbeelding op smalle breedte netjes te laten lijken.

Door smal te beginnen kun je ook een lichte standaardpagina kiezen. Een grote afbeelding met CSS verbergen voorkomt de download niet betrouwbaar; gebruik opmaakcode voor responsieve afbeeldingen om geschikte bestanden aan te bieden. Een leesbare pagina met één kolom en een kleinere afbeelding is een goed uitgangspunt; bredere lay-outs voegen daarna ruimte toe en delen de pagina anders in.

Een lay-out kan zich aanpassen via een expliciete query of via eigen regels voor afmetingen. Gebruik een query als de indeling op een gekozen punt moet veranderen. Gebruik een intrinsieke lay-out als items alleen in de beschikbare ruimte hoeven te passen.

Laat grid de kolommen tellen

.tiles {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

Bij een grootte van 16px voor het hoofdelement probeert elke kolom minstens 240px breed te zijn. Grid past zoveel mogelijk kolommen in, trekt de tussenruimtes af en verdeelt daarna de resterende breedte met 1fr. In een container van 1.000px zouden vier kolommen van 240px plus drie tussenruimtes van 16px 1.008px nodig hebben, dus passen er maar drie. Elk krijgt ongeveer 322,7px. In een container van 700px komen twee kolommen van 342px; in een container van 360px één.

De binnenste min(15rem, 100%) is belangrijk als de container smaller is dan 240px. Daardoor kan het minimum gelijk worden aan de beschikbare breedte. Zonder die functie zou het minimum van 240px overlopende inhoud veroorzaken. auto-fit laat lege sporen samenvallen, zodat enkele items kunnen uitrekken; auto-fill behoudt lege sporen en kan die items smaller laten.

Laat flexitems naar een volgende regel gaan

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.links > * { flex: 1 1 15rem; }

Elk item begint met een basis van 15rem, kan krimpen of groeien en gaat naar een volgende regel als er geen items meer in de rij passen. Elke regel verdeelt de eigen resterende ruimte. Twee items op de laatste regel kunnen daardoor breder worden dan de items erboven. Grid past beter als kolombreedtes over meerdere rijen moeten uitlijnen. Ook navigatie kan naar een volgende regel lopen of een query kan de flex-direction veranderen in column.

Verander zo nodig de hele pagina

Begin de pagina in de normale documentstroom. Voeg daarna een indeling met een zijbalk toe:

@media (min-width: 48em) {
  .page {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
  }
}

Bij de gebruikelijke standaardgrootte van 16px begint dit bij 768px. De eerste kolom is de zijbalk; de tweede neemt de resterende ruimte in. Door het minimum van nul kan het hoofdspoor krimpen; de inhoud moet nog steeds op een geschikte manier afbreken of kunnen scrollen. Benoemde gridgebieden kunnen een complexere indeling uitdrukken.

Houd de HTML in een logische leesvolgorde. Flex-order en gridplaatsing veranderen waar elementen verschijnen, maar toetsenbordfocus en schermlezers volgen nog steeds de bronvolgorde. Test dit door na het herschikken met de tabtoets langs de links te gaan.

Een brede gegevenstabel kan de tweedimensionale structuur nodig hebben. Geef die een eigen scrollbaar omhullend element met overflow-x: auto, tabindex="0", role="region" en een toegankelijke naam zoals aria-label="Event schedule". Alleen het tabelgebied mag horizontaal scrollen; de omringende pagina moet zich nog steeds herschikken.

Een query voor de viewportbreedte geeft hetzelfde antwoord voor elke component op een pagina. Dat kan verkeerd uitpakken voor een herbruikbare kaart: het venster kan 1.400px breed zijn terwijl de zijbalk de kaart maar 300px geeft. Een containerquery voor afmetingen meet de beschikbare ruimte van een voorouder, zodat de kaart zich kan aanpassen aan de werkelijke plek.

Definieer een omhullend element en geef de inhoud vorm

<div class="card-wrap">
  <article class="card">...</article>
</div>

.card-wrap { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 25rem) {
  .card { grid-template-columns: 8rem minmax(0, 1fr); }
}

Bij horizontale tekst is inline-size de breedte. Hiermee geef je aan dat het omhullende element query's over de inlineafmeting kan beantwoorden. Bij een lettergrootte van 16px voor het hoofdelement is 25rem gelijk aan 400px. Een kaart in een omhullend element van 300px blijft gestapeld; een andere in een omhullend element van 500px zet de afbeelding naast de tekst. Beide kunnen tegelijk op dezelfde pagina staan.

Een query meet een voorouder van het element dat wordt vormgegeven. Als je container-type alleen op .card zet en vervolgens diezelfde kaart probeert te veranderen, zoekt de query nog steeds boven de kaart. Gebruik een omhullend element als meetbox en de kaart daarbinnen als de box die je vormgeeft.

Selecteer de bedoelde voorouder

Een naamloze query voor afmetingen gebruikt de dichtstbijzijnde geschikte voorouder die een container voor afmetingen is. In een geneste lay-out kan dat een binnenste omhullend element zijn. Met een naam kun je een bepaalde voorouder kiezen:

.panel { container: sidebar / inline-size; }

@container sidebar (width >= 30rem) {
  .panel-title { font-size: 1.5rem; }
}

De verkorte notatie stelt zowel de naam als het type in. Als er geen geschikte voorouder is, komt de query niet overeen; de basisstijlen blijven gelden. Voorwaarden kunnen bereiken en logische operatoren zoals and, or en not gebruiken.

Zorg dat de container afmetingen krijgt

Isolatie voorkomt dat de afmeting waarover de query gaat, afhangt van juist de inhoud die de query anders kan vormgeven. Zet container-type op een box waarvan de breedte uit de bovenliggende lay-out volgt, zoals een blok, gridgebied of groeiend flexitem. Een box die krimpt om bij de inhoud te passen, kan samenvallen als de inhoud niet meer bijdraagt aan de inlineafmeting.

container-type: size ondersteunt query's voor zowel breedte als hoogte, maar isoleert ook de blokafmeting. De hoogte heeft een onafhankelijke regeling nodig; anders kan de container samenvallen. Voor gewone kaarten laat inline-size de hoogte de inhoud blijven volgen. De standaardwaarde normal maakt geen container voor query's over afmetingen.

Kenmerken voor afmetingen omvatten breedte, hoogte, inlineafmeting, blokafmeting, beeldverhouding en oriëntatie, mits het gekozen containertype de betreffende afmetingen ondersteunt. Huidige gangbare browsers ondersteunen query's voor afmetingen. Behoud een bruikbare gestapelde basislay-out zodat de kaart blijft werken als een browser de uitbreiding negeert.

Een responsieve pagina kan drie benaderingen combineren: automatische herschikking, viewportvoorwaarden en componentvoorwaarden. Bepaal welke informatie de lay-out nodig heeft voordat je een query kiest.

Bepaal afmetingen binnen een container

Containerquery-eenheden beschrijven percentages van een geschikte vooroudercontainer. cqw en cqh gebruiken breedte en hoogte. cqi en cqb gebruiken inline- en blokafmeting. cqmin en cqmax gebruiken de kleinste en grootste van de twee afmetingen. Bij horizontale tekst is de inlineafmeting de breedte.

In een geschikte container van 400px breed is 5cqi gelijk aan 20px. In een container van 600px breed is die 30px. Zo kan een kop de eigen component volgen, ook als de hele pagina even breed blijft.

Stel grenzen aan tekst:

.card-wrap { container-type: inline-size; }
.card h2 {
  font-size: clamp(1rem, 4cqi, 1.5rem);
}

Bij een grootte van 16px voor het hoofdelement geeft een omhullend element van 300px een voorkeurswaarde van 12px, dus geldt het minimum van 16px. Bij 600px is 4cqi gelijk aan 24px, gelijk aan de bovengrens. Bredere omhullende elementen kunnen de kop niet groter maken dan 24px. Test zowel de vergroting als het veranderen van de grootte van het omhullende element; vloeiend schaalbare tekst moet ook bruikbaar blijven als lezers zoomen.

Containereenheden kiezen de dichtstbijzijnde geschikte voorouder voor de gemeten richting. Als die er niet is, vallen ze terug op eenheden voor de kleine viewport. Een vergeten container-type kan er daardoor voor zorgen dat tekst met het venster verandert terwijl alles lijkt te werken. Inspecteer de voorouders als een afmeting de verkeerde ruimte lijkt te volgen. Een containernaam op een query zorgt er op zichzelf niet voor dat elke containereenheid naar die genoemde voorouder verwijst.

Combineer de hulpmiddelen

Een pagina kan met een mediaquery bij 48em overschakelen op kolommen voor een zijbalk en hoofdinhoud. Binnen het hoofdgebied kan een automatisch grid zoveel kaarten inpassen als de ruimte toelaat. Een eigen containerquery van een kaart kan de afbeelding pas naast de tekst zetten als die specifieke plek breed genoeg is.

Vervang een query voor minder beweging of aanwijzen zonder activering niet door een containerquery. De afmetingen van een box geven geen inzicht in de voorkeuren of het invoerapparaat van een lezer. Evenzo koppel je een herbruikbare kaart aan elke omringende lay-out als je de regels van de kaart voor elke plek op de pagina naar aparte viewportquery's kopieert. Laat de lokale ruimte bepalen wanneer de indeling verandert.

Een afbeelding kan breder zijn dan de ruimte die de lay-out ervoor biedt. Begin met een regel die de afbeelding laat krimpen met behoud van de vorm:

img, video {
  max-width: 100%;
  height: auto;
}

max-width beperkt de weergegeven breedte tot die van de container zonder een kleine afbeelding te dwingen de container te vullen. width: 100% zou een klein logo tot de volle breedte uitrekken. Automatische hoogte behoudt de beeldverhouding als de breedte verandert.

Reserveer de ruimte vóór de download

Behoud afmetingsattributen in de HTML:

<img src="coast.jpg" width="1200" height="800"
     alt="A rocky coast with a walking path">

Die afmetingen geven een beeldverhouding van 3:2, zodat de browser ruimte kan reserveren voordat het bestand binnenkomt. Als CSS de afbeelding 360px breed weergeeft, is de bijbehorende hoogte 240px. Als je de attributen verwijdert omdat de afbeelding responsief is, gaat die vroege informatie over de afmetingen verloren. CSS kan de weergegeven afbeelding nog steeds kleiner maken dan de afmetingen in de attributen.

Geef de box van een ingesloten videospeler een eigen verhouding:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Hierdoor behoudt de speler een verhouding van 16:9 terwijl de breedte verandert. Laat hoogtes voor tekst door de inhoud bepalen; een vaste beeldverhouding is nuttig voor mediaboxen met een bekende vorm.

Kies of bijsnijden is toegestaan

Een kaartminiatuur moet vaak een uniforme box vullen. Geef die een breedte en een beeldverhouding en kies daarna hoe de bron past:

.thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

cover vult de box en snijdt delen af die erbuiten vallen. contain toont de hele afbeelding en kan lege stroken overlaten. De standaardwaarde fill rekt de afbeelding uit tot de box, wat die kan vervormen. object-position kiest de uitlijning bij het inpassen; in dit voorbeeld houdt uitlijning aan de bovenkant het bovenste deel zichtbaar.

Voor een concrete vergelijking plaats je een foto van 400 × 200 in een miniatuur van 320 × 240. Cover schaalt de foto naar 480 × 240 en snijdt daarna in totaal 160px van de geschaalde breedte af. Contain schaalt de foto naar 320 × 160, waardoor in totaal 80px aan hoogte ongebruikt blijft. Beide behouden de verhoudingen van de bron; de keuze is of de box gevuld moet zijn of de hele afbeelding zichtbaar moet blijven.

Afbeeldingen die inhoud overbrengen, horen in <img> met bruikbare alternatieve tekst. CSS-achtergronden zijn geschikt voor decoratie; background-size: cover kan ze bijsnijden om hun box te vullen en mediaquery's kunnen het achtergrondbestand wisselen.

Voor afbeeldingen onder het eerste scherm kan loading="lazy" het ophalen uitstellen totdat de lezer in de buurt komt. Laat de hoofdafbeelding bovenaan direct laden, zodat die snel kan verschijnen. Als je een foto van 4.000 pixels met CSS verkleint, wordt nog steeds die hele foto gedownload; om een kleiner bestand te kiezen is opmaakcode voor responsieve afbeeldingen nodig.

Eén foto kan bestaan uit meerdere bestanden met dezelfde inhoud en verhoudingen, maar met verschillende pixelafmetingen. Met resolutiewisseling kan de browser een bestand kiezen op basis van de weergavegrootte, de schermdichtheid en zijn beslissingen over het laden. Zo voorkom je onnodig dataverbruik en behoud je voldoende detail.

Vaste weergavegrootte: pixeldichtheidsaanduidingen

<img src="logo-200.png"
     srcset="logo-200.png 1x, logo-400.png 2x"
     width="200" height="80" alt="Northwind Books">

Het logo wordt 200 CSS-pixels breed weergegeven. Het bestand van 200 pixels past bij een scherm met verhouding 1; het bestand van 400 pixels levert twee bronpixels per weergegeven CSS-pixel bij verhouding 2. Deze vorm gebruikt x-aanduidingen en heeft geen sizes-attribuut nodig.

Veranderende weergavegrootte: breedteaanduidingen

<img src="park-800.jpg"
     srcset="park-480.jpg 480w,
             park-800.jpg 800w,
             park-1600.jpg 1600w"
     sizes="(min-width: 64em) 50vw, 100vw"
     width="1600" height="1000"
     alt="Trees around a park pond">

Elke w-waarde moet de werkelijke pixelbreedte van het bestand aangeven. Die stelt geen CSS-breedte in. CSS bepaalt nog steeds de box en sizes beschrijft die beoogde weergavebreedte voor de browser.

De eerste overeenkomende voorwaarde in sizes krijgt voorrang. Bij een browserstandaard van 16px is de ruimte vanaf 1.024px breed 50vw; daaronder is die 100vw. De laatste lengte zonder voorwaarde is de terugval. Lengtes kunnen viewporteenheden, pixel- of lettertype-eenheden en berekeningen zoals calc(100vw - 2rem) gebruiken, maar geen percentages. Als sizes bij breedteaanduidingen ontbreekt, gaat de browser normaal gesproken uit van 100vw.

Bepaal hoeveel detail nodig is

Vermenigvuldig de beschreven weergavebreedte met de apparaatpixelverhouding. Vergelijk die streefwaarde met de aangeboden bestandsbreedtes om het kleinste toereikende bestand te bepalen:

1. Een viewport van 1.200px met verhouding 1 gebruikt de ruimte van 50vw: 600 CSS-pixels. Het bestand van 800w is het eerste dat groot genoeg is.
2. Een viewport van 390px met verhouding 3 gebruikt 390 CSS-pixels. Daarvoor zijn 1.170 bronpixels nodig, dus 1600w voldoet aan de streefwaarde.
3. Dezelfde smalle viewport met verhouding 2 heeft 780 bronpixels nodig; 800w voldoet daaraan.

Browsers kunnen een groter bestand uit de cache hergebruiken of onder beperkte laadomstandigheden de voorkeur geven aan een kleiner bestand. De opmaakcode levert kandidaten en informatie over afmetingen, geen onvoorwaardelijke opdracht om één bepaald bestand op te halen.

Browsers beginnen afbeeldingen op te halen voordat de volledige CSS-lay-out beschikbaar is. Daarom hoort de aanwijzing over de afmetingen in de HTML. Als CSS een afbeelding de helft van de viewport geeft maar sizes 100vw aangeeft, haalt de browser mogelijk een te groot bestand op. Werk sizes bij als de lay-out verandert. Behoud src als terugval en gebruik één alt-tekst. Voor verschillende uitsneden is <picture> nodig, omdat gewone resolutiekandidaten onderling uitwisselbare weergaven van dezelfde afbeelding moeten zijn.

Als je de pixelafmetingen van een foto verkleint, blijft de compositie gelijk. Soms heeft een telefoon een andere compositie nodig: bij een brede podiumfoto kan de spreker te klein worden om te herkennen. Artdirection verandert de uitsnede of afbeelding zodat het belangrijke onderwerp duidelijk blijft.

Het <picture>-element biedt een geordende reeks bronkeuzes, gevolgd door een verplicht <img>-element:

<picture>
  <source media="(min-width: 50em)"
          srcset="stage-wide.jpg" width="1600" height="900">
  <img src="stage-close.jpg" width="800" height="1000"
       alt="A speaker presenting on stage">
</picture>

Bij een standaardgrootte van 16px wordt vanaf 800px de brede uitsnede gekozen; daaronder gebruikt de afbeelding de krappere uitsnede. De <img> blijft het weergegeven element. Die biedt de terugval en de alternatieve tekst en is het element dat je met CSS voor afbeeldingen vormgeeft. Een <picture> zonder <img> toont geen afbeelding.

Zet de strengste voorwaarden eerst

De browser kiest de eerste ondersteunde bron waarvan de voorwaarden overeenkomen. Stel dat je uitsneden aanbiedt bij 30em en 60em. Zet het minimum van 60em eerst, daarna 30em en dan de terugval. Als 30em eerst staat, komt die ook overeen met een heel breed scherm en bereikt de browser 60em niet. Bereiken die niet overlappen, kunnen de bedoelde keuze ook duidelijk maken.

De media-voorwaarde van een bron is een selectie-instructie. Gewone srcset-kandidaten en sizes geven de browser daarentegen informatie om een passende resolutie te kiezen. Gebruik artdirection als de compositie moet veranderen; gebruik resolutiewisseling als de afbeeldingsinhoud gelijk blijft.

Bied formaten aan in volgorde van voorkeur

<picture>
  <source type="image/avif" srcset="hall.avif">
  <source type="image/webp" srcset="hall.webp">
  <img src="hall.jpg" width="1200" height="800"
       alt="Rows of seats in a lecture hall">
</picture>

Een browser die het eerste formaat ondersteunt, kan dat gebruiken; anders probeert die de volgende ondersteunde keuze en uiteindelijk de JPEG-terugval. AVIF en WebP leveren vaak kleinere bestanden bij een vergelijkbare beeldkwaliteit. Met het type-attribuut kan de browser niet-ondersteunde formaten overslaan zonder ze te downloaden om dat vast te stellen.

Elke bron kan ook meerdere kandidaten met breedteaanduidingen aanbieden, met een eigen srcset en sizes. Zo combineer je een gekozen uitsnede of formaat met resolutiewisseling. Als uitsneden voor artdirection verschillende verhoudingen hebben, laten afmetingsattributen op de bronnen de browser voor elke uitsnede de juiste ruimte reserveren.

Schrijf de alternatieve tekst één keer, op <img>, en zorg dat die elke uitsnede beschrijft. Als een krappe uitsnede een tweede persoon weglaat, past een alternatieve beschrijving die twee mensen noemt niet meer. Gebruik voor een puur decoratieve afbeelding alt="", zodat die geen onnodige uitgesproken inhoud toevoegt.

Een responsieve pagina moet je over een bereik testen, niet alleen op enkele genoemde apparaten. Open de responsieve weergave van de browser, stel een smalle viewport van ongeveer 320px in en sleep naar een breed venster. Let tijdens het slepen op koppen, navigatie, kaarten en afbeeldingsranden. Test vlak onder, op en boven elk breekpunt.

Ontwikkelaarstools kunnen viewportafmetingen, apparaatpixelverhouding en aanraakbediening emuleren. Chrome en Edge bieden een apparaatwerkbalk; Firefox en Safari bieden responsieve ontwerpmodi. Emulatie is nuttig, maar echte apparaten kunnen verschillen in het gedrag van werkbalken, aanraakbediening, lettertypen en prestaties. Controleer een echte telefoon en tablet in beide standen en ook een desktopvenster waarvan je de grootte verandert.

Controleer herschikking en vergrote tekst

Het WCAG-criterium voor herschikking op niveau AA vereist dat gewone inhoud bij een breedte van 320 CSS-pixels werkt zonder dat je in twee richtingen hoeft te scrollen. Een viewport van 1.280px breed waarop tot 400% is ingezoomd, biedt die breedte. Stel een responsieve viewport van 320px in voor een directe controle op smalle breedte en test ook daadwerkelijk zoomen op een desktop om te zien hoe de pagina wordt vergroot.

Inhoud die een tweedimensionale lay-out nodig heeft, zoals een gegevenstabel, kaart of diagram, mag die indeling behouden. Houd noodzakelijk horizontaal scrollen binnen een eigen gebied. Omliggende koppen, instructies en alinea's moeten nog steeds binnen de paginabreedte passen.

Gebruik realistische inhoud: een lange titel, een ononderbroken URL, veel links en langere vertaalde tekst. Verhoog ook de standaardlettergrootte van de browser. Een box die met een kort voorbeeld ruim leek, kan overlopen als tekst groeit.

Spoor horizontaal overlopende inhoud op

Een horizontale schuifbalk of een lege strook rechts betekent vaak dat één box buiten de viewport valt. Inspecteer verdachte elementen en vergelijk hun boxranden met de paginagrens. Geef ze tijdelijk een omtreklijn:

* { outline: 1px solid red; }

Een omtreklijn toont de boxen zonder hun gemeten breedte te vergroten. Zoek naar vaste breedtes, blokken van 100vw, afbeeldingen zonder breedtegrens, brede minimumwaarden voor gridsporen, negatieve marges, lange tekst en codeblokken.

Stem de oplossing af op de oorzaak:

Verberg niet als snelle oplossing de horizontaal overlopende inhoud van de hele pagina. body { overflow-x: hidden; } kan de schuifbalk laten verdwijnen terwijl inhoud buiten het bereik van de lezer blijft.

Test bij een tabel die lokaal kan scrollen zowel de interactie als de breedte. Bereik het omhullende element met een naam via het toetsenbord en controleer of horizontaal scrollen elke kolom zichtbaar maakt. Ga daarna met de tabtoets verder naar het volgende bedieningselement. De tabel kan horizontale beweging vereisen zonder dat de alinea erboven of de rest van de pagina in hetzelfde brede scrollgebied terechtkomt.

Inspecteer ten slotte afbeeldingsverzoeken in het netwerkpaneel. Stel zowel een viewport ter grootte van een telefoonscherm als een realistische hoge apparaatpixelverhouding in, laad opnieuw onder de bedoelde testomstandigheden en controleer de gekozen kandidaat en bestandsgrootte. Een visueel kleine afbeelding kan nog steeds een grote download zijn als de sizes-aanwijzing onjuist is.

Breedte is slechts één onderdeel van responsief gedrag. Een brede tablet kan aanraakbediening gebruiken; een smal desktopvenster kan een muis gebruiken. Pagina's moeten ook werken met zoom, grotere tekst, verschillende oriëntaties en de voorkeursinstellingen van de lezer voor beweging en kleur.

Maak bedieningselementen gemakkelijk bereikbaar

De WCAG 2.2-richtlijn op niveau AA voor doelgrootte vraagt om minstens 24 × 24 CSS-pixels of voldoende tussenruimte volgens de regel voor tussenruimte, met uitzonderingen zoals links binnen zinnen. Het groottecriterium op niveau AAA gebruikt 44 × 44 CSS-pixels, eveneens met uitzonderingen. Grotere navigatielinks met binnenruimte zijn vaak prettiger dan een dichte rij kleine labels.

Bij een grootte van 16px voor het hoofdelement heeft een link met tekst van 16px, line-height: 1.5 en padding: 0.75rem 1rem een regelbox van 24px plus 12px boven en onder: 48px hoog. Maak van de link zelf de klikbare box met binnenruimte.

Essentiële informatie mag niet afhankelijk zijn van aanwijzen zonder activering. Houd handelingen zichtbaar of bereikbaar door te tikken en via toetsenbordfocus. Voeg optionele aanwijseffecten alleen toe als het primaire invoerapparaat die ondersteunt:

@media (hover: hover) and (pointer: fine) {
  .card:hover { outline: 2px solid currentColor; }
}

pointer: coarse beschrijft een onnauwkeurig primair invoerapparaat zoals een vinger. any-pointer en any-hover controleren of een aangesloten invoerapparaat een mogelijkheid heeft; ze stellen niet vast dat elke lezer die gebruikt.

Laat vergrote tekst en draaien werken

Laat zoomen ingeschakeld en controleer of tekst tot 200% kan worden vergroot zonder verlies van inhoud of functionaliteit. Gebruik afmetingen die relatief zijn aan de lettergrootte en tekstboxen die meegroeien. Met min-height kan een box groeien als de inhoud groeit; bij een vaste hoogte kan vergrote tekst in de volgende sectie overlopen.

Ondersteun staande en liggende stand tenzij één oriëntatie essentieel is voor de activiteit. Telefoons in liggende stand kunnen heel weinig verticale ruimte hebben. Een hoogtequery zoals @media (max-height: 30em) kan een klevende kop laten wegscrollen, zodat die de inhoud niet bedekt.

Houd rekening met voorkeuren en uitvoer

Gebruik prefers-reduced-motion om grote bewegingen te vermijden voor lezers die om minder beweging vragen. Eén aanpak is om optionele animaties binnen @media (prefers-reduced-motion: no-preference) te zetten. Je kunt een bestaande animatie ook verwijderen binnen een reduce-query.

Combineer voor een donker thema goed leesbare tekst- en achtergrondkleuren binnen @media (prefers-color-scheme: dark). Controleer het contrast in beide thema's. color-scheme: light dark laat door de browser getekende bedieningselementen en schuifbalken een passend thema volgen; het kiest niet al je paginakleuren voor je.

Een regel voor minder beweging kan alleen op de bewegende component worden gericht:

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

Houd de boodschap zelf beschikbaar wanneer beweging wordt verwijderd. Verander bij een donker thema de voorgrond en achtergrond samen; als je er maar één verandert, kan tekst wegvallen tegen de achtergrond. Bekijk ook een voorbeeld van formulieronderdelen, omdat door de browser getekende bedieningselementen kunnen verschillen van de vlakken die je zelf vormgeeft.

Gebruik @media print om navigatie en knoppen te verbergen en donkere tekst op wit weer te geven. Afgedrukte links kunnen hun bestemmingen tonen met a[href]::after { content: " (" attr(href) ")"; }. Controleer in een afdrukvoorbeeld of inhoud, achtergronden en pagina-einden goed leesbaar blijven.