Hlavička a päta teraz zaberajú celú šírku

Malá zmena viditeľná na každej tunajšej stránke: tmavý pás hore a päta dole teraz zaberajú celú šírku okna.

Až dodnes boli v tom istom stĺpci širokom 1180 pixelov ako všetko ostatné, takže na širokej obrazovke bola stránka pásom obsahu plávajúcim na prázdnom pozadí. Päta na stránkach so štatistikami už celú šírku zaberala – bola jediná a práve tento nesúlad to začal.

Čo sa nezmenilo

Obsah vnútri týchto pásov. Text, tlačidlá a čísla sú stále zarovnané na tých istých 1180 pixelov ako časti pod nimi, takže pás je široký, ale text nie. Nikto nečíta stoznakové riadky a nadpis natiahnutý cez 27-palcový monitor nie je dizajn, ale prehliadnutie.

Prečo nie bežný trik

Bežným spôsobom, ako dostať prvok zo zarovnaného stredového stĺpca, je záporný okraj voči 100vw. Má chybu, ktorú možno na počítači s vypnutým posuvníkom ľahko prehliadnuť: vw zahŕňa posuvník. Blok je napokon presne o túto šírku širší než viditeľná oblasť a celú stránku možno potiahnuť o niekoľko pixelov nabok – čo na telefóne znamená, že rozloženie sa pri čítaní kýve pod palcom.

Pás preto nesiaha smerom von, ale začína široký a pridáva vnútorné odsadenie:

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

Percentá sa odvodzujú od rodičovského prvku, ktorým je tu telo stránky, a ten nezahŕňa posuvník. Pod 1180 pixelmi vyhrá prvá hodnota a pás si zachová rozumný 20-pixelový okraj namiesto záporného. Žiadny druhý obal, žiadny JavaScript a nič na meranie počas behu.

Kde to platí

Hlavná stránka, stránka o službe a každá stránka so štatistikami. Rovnaká konštrukcia na všetkých troch, čo bol aj cieľ.