Kreu dhe fundfaqja tani zënë gjithë gjerësinë

Një ndryshim i vogël i dukshëm në çdo faqe këtu: brezi i errët në krye dhe fundfaqja në fund tani kalojnë në gjerësinë e plotë të dritares.

Deri sot ato rrinin brenda së njëjtës kolonë prej 1180 pikselësh si gjithçka tjetër, kështu që në një ekran të gjerë faqja ishte një shirit përmbajtjeje që pluskonte në sfond bosh. Fundfaqja në faqet e statistikave ishte tashmë në gjerësi të plotë – ajo ishte e vetmja, dhe kjo mospërputhje është ajo që e filloi këtë.

Çfarë nuk ndryshoi

Përmbajtja brenda atyre brezave. Teksti, butonat dhe numrat ende rreshtohen në të njëjtat 1180 pikselë si seksionet poshtë tyre, kështu që brezi është i gjerë dhe shkrimi nuk është. Askush nuk lexon rreshta me njëqind karaktere dhe një titull i shtrirë përgjatë një monitori 27 inç nuk është një dizajn, është një neglizhencë.

Pse jo truku i zakonshëm

Mënyra e zakonshme për të nxjerrë një element jashtë kolonës së qendërzuar është një hapësirë e jashtme negative ndaj 100vw. Ka një të metë që mund të mos vihet re në një kompjuter me shirit lëvizjeje të fshehur: vw përfshin shiritin e lëvizjes. Blloku përfundon më i gjerë se zona e dukshme me saktësisht atë gjerësi dhe e gjithë faqja mund të tërhiqet anash për disa pikselë – gjë që në një telefon do të thotë se paraqitja lëkundet nën një gisht të madh në mes të leximit.

Prandaj shiriti nuk shtrihet drejt jashtë, por nis i gjerë dhe krijon hapësirë nga brenda:

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

Përqindjet llogariten sipas elementit prind, që këtu është trupi i faqes dhe nuk përfshin shiritin e lëvizjes. Nën 1180 pikselë merr përparësi vlera e parë dhe shiriti ruan një hapësirë të arsyeshme prej 20 pikselësh në vend të një negative. Pa mbështjellës të dytë, pa JavaScript dhe pa asgjë për të matur gjatë ekzekutimit.

Ku zbatohet

Faqja kryesore, faqja rreth nesh dhe çdo faqe statistikash. I njëjti ndërtim në të tria, gjë që ishte edhe qëllimi.