Moje poznatky o CSS #2 - Čísla v CSS

V dnešním díle pokračování mini-seriálu a podtitulem Čísla v CSS se zamyslíme nad volbou rozměrů pro jednotlivé elementy. Uvedu pár běžných příkladů z praxe, na které jste již mohli sami narazit, nastíním jejich řešení a vysvětlím, proč tomu tak je.

Problém 1

"Při zmenšování okna mi uskakuje div zarovnaný na střed a neladí tak s pozadím."

Vysvětlení

Pokud po internetovém prohlížeči chceme aby cokoliv zarovnal na střed neboli na 50% šířky rodičovského elementu, můžou nastat následující situace:

1. Šírka elementu: sudá. Šířka pozadí: sudá.
2. Šírka elementu: lichá. Šířka pozadí: sudá.
3. Šírka elementu: sudá. Šířka pozadí: lichá.
4. Šírka elementu: lichá. Šířka pozadí: lichá.

Ad 1) V tomto případě se vše zobrazí správně

Ad 2, 3, 4) Zde jsme donutili prohlížeč zaokrouhlovat a je jen na něm jestli zaokrouhlí nahoru nebo dolů. S největší pravděpodobností v různých prohlížečích uvidíte pixelové rozdíly v zobrazování výsledné stránky.

Řešení

Šírka pozadí nebo divu musí být dělitelná číslem 2 a 3 a nejlépe i 7. Nejmenší takové číslo je číslo 42 (Douglas Adams toto číslo nezvolil jen tak ze srandy). Tím předejdeme jakémukoli zaokrouhlování.

Tip: Pokud přemýšlíte nad optimální šířkou webu, doporučuji se držet 966px. (dělitelné 2,3,7), případně další 1008px, 1050px až např. 1260px (nárůst po nejmenším společném násobku = 42).

Problém 2

"Při zmenšování okna mi za třetím sloupcem vzniká 1 pixelová mezera."

Vysvětlení

Situace je podobná jako v předchozím případě, ale můžou se zde kombinovat dva jevy.
Prvním je samotná podstata problému, že ne všechna čísla jsou dělitelná třemi beze zbytku - neboli ne všechny rozměry okna prohlížeče lze rozdělit na 3 sloupce bez nadbytečného pixelu.
Druhým je přesnost hodnoty, kterou jsme vyjádřili velikost sloupce - 33.3% je nedostatečné - více o tomto v mém minulém příspěvku CSS Tip: 33% šířky elementu .

Řešení

Tento problém za nás vyřešili programátoři internetových prohlížečů a naučili své prohlížeče inteligentnímu zaokrouhlování - občas nahoru, občas dolů,  tak aby se vyplnila celá šířka okna.

V případě podpory starších prohlížečů by bylo třeba šáhnout k řešení za pomocí javascriptu.

Problém 3

"Mám ve svém kódu přespříliš magických čísel"

Vysvětlení

Magická čísla jsou náhodné číselné hodnoty ve zdrojovém kódu s nevysvětlitelným významem (či původem vzniku). Tato čísla snižují udržitelnost kódu.

Příkladem můžou být třeba standardní šipky u carouselu. Většina carouselu má pevně nastavenou výšku a proto si někteří kodéři mohou myslet, že je vhodné nastavit pevnou pozici i přepínacím šipkám. Taková vertikální pozice má pak hodnotu např. 371px, místo toho aby vyjádřili pozici procentuální hodnotou 50%. Pro náhodného kolemjdoucího pak nemá hodnota 371px žádný logický původ a vypadá spíše náhodně.

Řešení

Vzniku magických čísel v CSS asi úplně zabránit nelze. Dobrý kodér je schopný jim ve většině případů předejít. Ať už používáním procentuálních hodnot, změnou box-sizing modelu a v neposlední řadě používáním preprocesoru s podporou proměnných a matematických operací.

--

Děkuji za váš čas a uvidíme se u dalšího pokračování tohoto mini-seriálů o CSS.