Krátké zamyšlení nad vývojem kaskádových stylů

Pozitivních zpráv ohledně CSS přibývá. Potěší, že CSS selektory budeme moci používat i v JavaScriptu. Co ovšem přetrvávající koncepční problémy?

Analýza potíží

Vývojáři prohlížečů nepolevují v implementaci dalších vlastností, ať již z druhé či třetí úrovně CSS. To webdesignéři jistě kvitují s povděkem. Z čeho ale radost mít určitě nemohou, je fakt, že CSS 3 ani po cca deseti letech nejsou hotovy, a vlastnosti z CSS 3 se kvůli tomu předběžně implementují s vendor prefixem. V praxi to pro ně znamená, že každou takovou vlastnost, chtějí-li ji využít, musí deklarovat několikrát, prohlížeče totiž používají různé vendor prefixy. Stručně řečeno: pomalá práce na CSS 3 paralyzuje implementace, a to zase komplikuje život webdesignérům.

Co je vlastně příčinou tak velkého a tak neblahého zdržení? Těch příčin je asi více. První z nich je to, že standardizátoři se svému poslání nevěnují „naplno“, hovořil o tom i Jiří Kosek, který má zkušenosti s prací pro standardizační organizace OASIS, W3C a ISO:

„Jedná se naštěstí o práci, které se lze věnovat natolik, kolik času máš. Když někdo nemá moc času, může být pasivním členem pracovní skupiny, který v horším případě nedělá vůbec nic. Maximálně čte zápisy z telekonferencí nebo meetingů.“

Druhá příčina je ještě prozaičtější: je toho zkrátka moc. CSS jsou členěny do jednotlivých modulů, počet těchto modulů se v CSS 3 ohromě rozrostl. Tolik věcí asi nejde rychle zvládnout. Nové moduly přitom byly přidávány postupně, dá se tedy očekávat, že se den kompletního dohotovení CSS 3 kvůli práci na později vzniknuvších modulech opět o něco oddálí.

Za třetí příčinu lze považovat to, že lidé, kteří CSS standardy tvoří, nejsou zcela důvěrně obeznámeni s problematikou webdesignu; a přirozeně, pokud člověk dělá něco, čemu dobře nerozumí, trvá mu to déle a dopouští se i řady chyb.

Šance na opravu box modelu

Podle současných CSS standardů se za šířku (width) považuje šířka obsahu prvku, okrajové části – výplň (padding) a ohraničení (border) – se už nezapočítávají. To samé platí i pro výšku (height), i do ní se výplň a ohraničení nezapočítávají. To je velmi nepraktické, neboť webdesignéři potřebují k vizuálnímu uspořádání prvků na stránce znát jejich plnou šířku a výšku! Náprava se na první pohled zdá být jednoduchá – prostě se standardy malinko přepíšou, box model se upraví tak, aby vlastnosti width a height vyjadřovaly rozměry celého prvku, a hotovo. Tak snadné to však vůbec není! Pokud by se taková změna skutečně stala a implementovala by se do prohlížečů, poškodilo by to – tu více, tu méně – layout většiny současných webů. Došlo by takzvaně k porušení zpětné kompatibility.

Největší šanci na nápravu své chyby měli standardizátoři hned na začátku. Vývojáři prohlížečů box model od W3C dlouho nechtěli implementovat, Internet Explorer, pro nějž se tenkrát stránky dělaly (měl totiž tehdy více než devadesátiprocentní zastoupení), jej přijal až v roce 2001. Standardizátoři šanci nevyužili. Místo toho přišli v CSS 3 s jiným řešením – vlastností box-sizing. Když bude tato vlastnost uplatněna s hodnotou border-box, započítá se konečně do šířky a výšky také padding a border. Bohužel ale nějakou dobu potrvá, než bude tato vlastnost implementovaná ve všech prohlížečích.

Další šance změnit stávající box model bez porušení zpětné kompatibility se současnými stránkami se rýsuje v právě probíhající přítomnosti a souvisí s dalším osudem DOCTYPE deklarace v HTML.

„DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.“

Jak předestírá výše uvedená citace ze specifikace HTML 5, jediným důvodem, proč DOCTYPE deklarace zůstane součástí HTML, je chování prohlížečů, které stránky bez DOCTYPE deklarace renderují v režimu, jenž není kompatibilní s CSS standardy (s dosud platnými HTML standardy není kompatibilní žádný renderovací režim). Stačilo by se tedy dohodnout s vývojáři prohlížečů na tom, aby nové verze prohlížečů takové stránky renderovaly ve standardním režimu a zbytečná DOCTYPE deklarace by mohla z HTML 5 zmizet. Takové řešení však není dokonalé. Dosud totiž existují některé staré weby, které v duchu své doby nerespektovaly standardy – neuváděly DOCTYPE deklaraci a layout nestavěly podle box modelu od W3C – a jejich layout by tímto řešením pravděpodobně mohl dojít k úhoně. A to se dá vyřešit právě změnou standardního box modelu: Webové stránky s DOCTYPE deklarací by se renderovaly v souladu s nynější podobou box modelu a webové stránky bez ní by se již renderovaly podle nového box modelu, v němž by vlastnosti width a height určovaly celkové rozměry prvků. Samozřejmě by bylo ještě nutné revidovat nižší úrovně CSS, poněvadž CSS 1, CSS 2 a CSS 3 musí být ve vzájemném souladu.

Výsledek předloženého řešení by byl následující: a) v HTML bychom si příště ušetřili uvádění DOCTYPE deklarace, b) CSS vlastnost box-sizing ani trik zvaný matrjoška by již nebyly potřeba, c) pochopení box modelu by se stalo záležitostí pouhé intuice. Naneštěstí se nic takového nechystá. Smůla.

Selectors API

Přístup k elementům pomocí klasických DOM metod je někdy poněkud komplikovaný. Oproti tomu CSS selektory představují krátký a přehledný zápis. Podívejme se na malé srovnání:

• DOM: document.getElementById("row4").getElementsByTagName("td");
• CSS: tr#row4>td

Jsou to dva různé zápisy z různých jazyků, účel však mají stejný – selektovat buňky v určitém řádku naší pomyslné tabulky. Je asi očividné, že CSS zápis působí jednodušeji a přehledněji. Bezpochyby právě tato okolnost vedla k nápadu uplatnit CSS selektory i v JS.

Specifikace Selectors API 1 zavádí dvě metody pro přístup k elementům, které jako argument uplatňují CSS selektory:

• querySelector(): Vrací pouze první element, který vyhovuje výrazu (selektoru) uvedenému jako argument. Pokud žádný element nevyhovuje, vrací null.
• querySelectorAll(): Vrací seznam všech elementů, které vyhovují výrazu (selektoru) uvedenému jako argument. Pokud žádný element nevyhovuje, vrací prázdný seznam. Je-li vyhovujících elementů více, jsou v seznamu řazeny podle pořadí, v jakém se nalézají ve struktuře dokumentu.

Obě metody akceptují i tzv. hromadný selektor (tj. více selektorů navzájem oddělených čárkou).

var alert1 = document.querySelector("p#warning, p#error");

V použitém příkladu bude proměnné alert1, přiřazen první vyhovující element. Pořadí selektorů v argumentu dané metody je irelevantní a nebude mít vliv na výsledek. Nezáleží ani na tom, zda je metoda vyvolána na objektu document, či na nějakém konkrétním elementu, odpovídající elementy se budou stejně vždycky hledat v rámci celého dokumentu.

Norma ještě není schválena jako doporučení, komu se však popsané metody zamlouvají, může si je už vyzkoušet ve Firefoxu.

Bilance

I když při hodnocení rychlosti a kvality práce na CSS člověka napadne spousta kritických připomínek, situace není zase až tak špatná. Práce na CSS 3 sice pokračují pomalu, ale pokračují a to je důležité. Litovat lze jistě toho, že CSS 3 byly pojaty tak velkoryse, menší projekt, který by reagoval pouze na nejožehavější potřeby webdesignérů, by pravděpodobně byl šťastnějším řešením, neboť by zabral méně času. Nejdůležitější však je, že proces implementací běží docela slušným tempem.

Související odkazy

• Quo vadis, CSS? – Martin Hassman (2007)
• Nejisto kolem webových standardů – Pavel Salvet (2009)
• Chybné rozměry boxů – Jan Bien (2004)