De basisvormgeving
Zie je deze site in zwart-wit, met onderstreepte links en alles onder elkaar? Dan kijk je naar de basisvormgeving. Je mist niets: alle tekst, alle links en alle pagina's zijn er gewoon. Alleen de laag opmaak eroverheen blijft weg, omdat je browser de CSS ervoor niet begrijpt.
Je browser bijwerken is het beste wat je kunt doen, ook omdat er beveiligingslekken in oude versies zitten. Maar dat kan niet altijd, en daarom is dit geen foutmelding. Het is de site, alleen kaler.
Waarom deze versie bestaat
Een HTML-pagina zonder enige opmaak is uit zichzelf al toegankelijk. Er staat zwarte tekst op een witte achtergrond, de links zijn blauw en onderstreept, en zowel een screenreader als een zoekmachine kan er precies uit halen wat erin staat. Dat is het startpunt, en het is meteen het beste dat er is.
Wat er vaak gebeurt, is dat developers dat vergeten. We maken van een knop een div, we halen de onderstreping onder links weg, we zetten lichtgrijs op wit, en we bouwen pagina's die niets laten zien tot de JavaScript geladen is. Dat zijn stuk voor stuk keuzes en geen ongelukken. En allemaal in dienst van de code en de vormgeving, niet van de bezoeker.
Fallback is eigenlijk het verkeerde woord
Wat hier gebeurt heet progressive enhancement. Je begint bij iets dat voor iedereen werkt en bouwt daar met moderne technieken lagen overheen. Ik noem het toch een fallback, omdat dat woord voor de meeste mensen duidelijker is.
Het verschil is niet alleen taalkundig. Draai je het om, en laad je de oude CSS in via een moderne techniek, dan komt die oude CSS nooit aan bij de browser die hem het hardst nodig heeft. Die browser begrijpt de check zelf namelijk net zo min. De volgorde moet dus altijd zijn: eerst iets dat voor iedereen werkt, dan controleren of het moderne kan, en pas dan dat erbovenop.
Maar dan download je toch dubbel?
Klopt. Een deel van de basis-CSS wordt daarna weer overschreven, en de moderne CSS wordt ook binnengehaald door een browser die er niets mee kan. De vraag is hoeveel dat is, en dat is te meten in plaats van te schatten.
De stylesheet van deze site is op dit moment 149 KB ongecomprimeerd over 1156 regels, en 23 KB zoals hij daadwerkelijk over de lijn gaat. Alles wat buiten de check op aspect-ratio staat, en dus samen de basisvormgeving vormt, is daarvan 15 KB verdeeld over 136 regels, en 3 KB zoals hij over de lijn gaat. De rest krijgt een oude browser wel binnen, maar voert hij niet uit. Een gemiddelde afbeelding op een pagina is al snel 100+ KB.
Dat het zo klein blijft komt doordat alle layout op deze site gebouwd is met every layout. Elke layout heeft daar één eenvoudige versie zonder moderne CSS, en die zet vrijwel alles onder elkaar.
Voor JavaScript is er geen tweede versie. De JavaScript hier voegt dingen toe die je niet nodig hebt om de pagina te lezen, dus als hij niet draait mis je niets wezenlijks.
Hoe ziet de moderne versie eruit?
Jij kijkt nu naar de basisvormgeving, dus hier is een schermafbeelding van de moderne. Eén kanttekening: de sites die ik bouw passen zich aan het scherm, het apparaat en zelfs aan je systeeminstellingen aan. Er is dus geen enkele juiste weergave. Dit is hoe deze site er op mijn eigen laptop uitziet.
Hoe ziet de basisvormgeving eruit?
Jij kijkt nu naar de moderne versie. Zo ziet deze site eruit zodra de moderne CSS wegvalt.
Waarom ik zo bouw en wat dat verder inhoudt, staat op de pagina over wat een front-end designer doet. Hoe deze site technisch in elkaar zit staat bij over deze site.