Zaglavlje i podnožje sada idu preko cele širine

Mala promena vidljiva na svakoj stranici ovde: tamna traka na vrhu i podnožje na dnu sada se protežu preko cele širine prozora.

Do danas su stajali u istoj koloni od 1180 piksela kao i sve ostalo, pa je na širokom ekranu stranica bila traka sadržaja koja lebdi u praznoj pozadini. Podnožje na stranicama sa statistikom već je bilo preko cele širine – bilo je jedino takvo, i ta nedoslednost je pokrenula celu stvar.

Šta se nije promenilo

Sadržaj unutar tih traka. Tekst, dugmad i brojevi i dalje su poravnati na istih 1180 piksela kao i odeljci ispod, pa je traka široka, a tekst nije. Niko ne čita redove od sto znakova, a naslov razvučen preko monitora od 27 inča nije dizajn, nego previd.

Zašto ne uobičajeni trik

Uobičajen način da se element izvuče iz centrirane kolone je negativna margina u odnosu na 100vw. Ima manu koju je lako prevideti na računaru sa isključenom trakom za pomeranje: vw uključuje traku za pomeranje. Blok na kraju bude širi od vidljivog područja tačno za tu širinu, pa se cela stranica može povući u stranu za nekoliko piksela – što na telefonu znači da se raspored klati pod palcem usred čitanja.

Zato traka ne seže ka spolja, nego počinje široka i uvlači se ka unutra:

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

Procenti se računaju prema roditelju elementa, a to je ovde telo stranice koje ne uključuje traku za pomeranje. Ispod 1180 piksela pobeđuje prva vrednost i traka zadržava razumnu marginu od 20 piksela umesto negativne. Bez drugog omotača, bez JavaScripta i bez ičega što treba meriti za vreme rada.

Gde važi

Početna stranica, stranica O nama i svaka stranica sa statistikom. Ista konstrukcija na sve tri, što je i bila poenta.