Zaglavlje i podnožje sada se protežu punom širinom

Mala promjena vidljiva na svakoj ovdašnjoj stranici: tamna traka na vrhu i podnožje na dnu sada se protežu punom širinom prozora.

Do danas su se nalazili unutar istog stupca širokog 1180 piksela kao i sve ostalo, pa je na širokom zaslonu stranica bila traka sadržaja koja lebdi na praznoj pozadini. Podnožje na stranicama statistike već je bilo pune širine – bilo je jedino, a upravo je ta nedosljednost ovo pokrenula.

Što se nije promijenilo

Sadržaj unutar tih traka. Tekst, gumbi i brojevi i dalje su poravnati unutar istih 1180 piksela kao odjeljci ispod njih, pa je traka široka, a tekst nije. Nitko ne čita retke od stotinu 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 izvlačenja elementa iz centriranog stupca jest negativna margina u odnosu na 100vw. Ima nedostatak koji je lako previdjeti na stolnom računalu s isključenom kliznom trakom: vw uključuje kliznu traku. Blok završi širi od vidljivog područja upravo za tu širinu, a cijelu je stranicu moguće povući ustranu za nekoliko piksela – što na mobitelu znači da se raspored ljulja pod palcem usred čitanja.

Zato traka ne poseže prema van, nego počinje široko i dodaje unutarnji razmak:

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

Postoci se računaju prema nadređenom elementu, koji je ovdje tijelo stranice i ne uključuje kliznu traku. Ispod 1180 piksela prevladava prva vrijednost i traka zadržava razumnu marginu od 20 piksela umjesto negativne. Nema drugog omotača, nema jezika JavaScript ni ičega što treba mjeriti tijekom izvršavanja.

Gdje se primjenjuje

Na početnoj stranici, stranici O usluzi i svakoj stranici statistike. Ista konstrukcija u sva tri slučaja, što je i bio cilj.