Kop- en voettekst lopen nu over de volle breedte

Een kleine verandering die op elke pagina hier te zien is: de donkere band bovenaan en de voettekst onderaan lopen nu over de volle breedte van het venster.

Tot vandaag zaten ze binnen dezelfde kolom van 1180 pixels als al het andere, dus op een breed scherm was de pagina een strook inhoud die in een lege achtergrond dreef. De voettekst op de statistiekpagina's liep al over de volle breedte — als enige, en die inconsistentie is waar dit mee begon.

Wat er niet veranderd is

De inhoud binnen die banden. Tekst, knoppen en getallen lijnen nog steeds uit op dezelfde 1180 pixels als de onderdelen eronder, dus de band is breed en het schrift niet. Niemand leest regels van honderd tekens, en een kop die over een scherm van 27 inch is uitgerekt, is geen ontwerp maar een omissie.

Waarom niet de gebruikelijke truc

De gangbare manier om een element uit een gecentreerde kolom te laten breken, is een negatieve marge tegen 100vw. Die heeft een gebrek dat op een bureaublad met de schuifbalk uitgeschakeld makkelijk te missen is: vw telt de schuifbalk mee. Het blok wordt daardoor precies die breedte breder dan het zichtbare gebied, en de hele pagina kan een paar pixels opzij worden gesleept — wat op een telefoon betekent dat de opmaak onder een duim wiebelt terwijl iemand aan het lezen is.

De band reikt dus niet naar buiten, hij begint breed en vult naar binnen op:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Percentages worden berekend tegen de ouder van het element, en dat is hier de body van de pagina, waarin de schuifbalk niet meetelt. Onder 1180 pixels wint de eerste waarde en houdt de band een verstandige marge van 20 pixels in plaats van een negatieve. Geen tweede omhulsel, geen JavaScript, en niets dat tijdens het draaien gemeten hoeft te worden.

Waar het geldt

De voorpagina, de over-pagina en elke statistiekpagina. In alle drie dezelfde constructie, en dat was de bedoeling.