Sidhuvud och sidfot går nu över hela bredden

En liten ändring som syns på varje sida här: det mörka bandet överst och sidfoten längst ned går nu över fönstrets hela bredd.

Fram till i dag låg de i samma kolumn på 1 180 pixlar som allt annat, så på en bred skärm var sidan en remsa innehåll som svävade i tom bakgrund. Sidfoten på statistiksidorna hade redan full bredd – den var den enda, och det var den inkonsekvensen som satte i gång det här.

Vad som inte ändrades

Innehållet i banden. Text, knappar och siffror linjerar fortfarande mot samma 1 180 pixlar som avsnitten under dem, så bandet är brett men texten är det inte. Ingen läser rader på hundra tecken, och en rubrik utdragen över en 27-tumsskärm är ingen design, det är ett förbiseende.

Varför inte det vanliga tricket

Det vanliga sättet att låta ett element bryta sig ut ur en centrerad kolumn är en negativ marginal mot 100vw. Det har en brist som är lätt att missa på en dator med rullningslisten avstängd: vw inkluderar rullningslisten. Blocket blir bredare än det synliga området med exakt den bredden, och hela sidan kan dras några pixlar i sidled – vilket på en mobil betyder att layouten vickar under tummen mitt i läsningen.

Så bandet sträcker sig inte utåt, utan börjar brett och får utfyllnad inåt:

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

Procentvärden räknas mot elementets förälder, som här är sidans body och inte inkluderar rullningslisten. Under 1 180 pixlar vinner det första värdet, och bandet behåller en rimlig marginal på 20 pixlar i stället för en negativ. Inget extra omslutande element, inget JavaScript och inget som behöver mätas under körning.

Var det gäller

Startsidan, Om-sidan och varje statistiksida. Samma konstruktion på alla tre, vilket var poängen.