A fejléc és a lábléc mostantól teljes szélességű

Egy apró változás, amely itt minden oldalon látható: a felső sötét sáv és az alsó lábléc mostantól az ablak teljes szélességében fut.

Mostanáig ugyanabban az 1180 pixeles oszlopban ültek, mint minden más, így széles képernyőn az oldal üres háttérben lebegő tartalomcsík volt. A statisztikaoldalak lábléce már eddig is teljes szélességű volt – ez volt az egyetlen, és ez a következetlenség indította el az egészet.

Mi nem változott

A sávokon belüli tartalom. A szövegek, gombok és számok továbbra is ugyanahhoz az 1180 pixelhez igazodnak, mint az alattuk lévő szakaszok, így a sáv széles, a szöveg viszont nem. Senki sem olvas százkarakteres sorokat, és egy 27 hüvelykes monitoron végignyújtott címsor nem dizájn, hanem figyelmetlenség.

Miért nem a szokásos trükk

Egy elemet a középre igazított oszlopból általában negatív margóval szokás kiszélesíteni, amelynek alapja a 100vw. Ennek van egy hibája, amelyet kikapcsolt görgetősávú asztali gépen könnyű nem észrevenni: vw a görgetősávot is magában foglalja. A blokk így pontosan ennyivel szélesebb lesz a látható területnél, és az egész oldal néhány pixellel oldalra húzható – ami telefonon azt jelenti, hogy olvasás közben az elrendezés imbolyog a hüvelykujj alatt.

Ezért a sáv nem nyúlik kifelé, hanem eleve szélesen indul, és befelé kap belső margót:

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

A százalékos értékek az elem szülőjéhez viszonyulnak, amely itt az oldal törzse, és nem tartalmazza a görgetősávot. 1180 pixel alatt az első érték érvényesül, és a sáv negatív helyett észszerű, 20 pixeles margót tart. Nincs második burkolóelem, nincs JavaScript, és futásidőben semmit sem kell mérni.

Hol érvényes

A kezdőlapon, a Rólunk oldalon és minden statisztikaoldalon. Mindháromban ugyanaz a felépítés, és éppen ez volt a cél.