V kaskádovém ringu

Pojmem „CSS Box model“ se myslí ta část kaskádových stylů, která definuje rozměry zobrazovaných elementů. Určuje jejich vycpávku (padding), orámování (border) a odstup od ostatních (margin). Specifikace i implementace těchto zásadních a často užívaných stylů jsou typickým příkladem chaosu, který na webu panuje.

Vyskytují se totiž dvě různé implementace. Jedna se řídí doporučením W3C, druhá nikoliv. Podle doporučení určuje šířka v CSS šířku obsahu, tzn. vycpávka a okraj se k ní přidávají. Nazvěme tento model „obsahový“. Druhému modelu říkejme „okrajový“, v něm se totiž počítá šířka včetně okraje a vycpávky. Stejná pravidla pochopitelně platí i pro výšku.

Kaskádové styly byly vytvořeny, aby nahradily prezentační části HTML, proto můžeme najít počátky box modelu už v HTML.

1994

Netscape 1.0 doplňuje Mosaicem zavedený element <img> o atributy width, height a border. Rozměry určují šířku a výšku grafiky, okraj se přičítá. Jde tedy o model obsahový.

1995

Netscape 1.1 doplňuje Mosaicem zavedený element <table> o atributy width a height. Atribut border už existuje déle. Rozměry určují šířku a výšku tabulky včetně okraje. To je model okrajový.

1996

Konsorcium vydává první CSS doporučení. Nové vlastnosti width, height, padding a border určují model obsahový. (pozn.: vlastnost margin už existovala dříve)

1997

Netscape 4.0 implementuje některé části CSS. Poněvadž se snaží zejména o napodobení okrajů u tabulky, užívá model okrajový.

1997

Explorer 4.0 přebírá implementaci Netscapu. Užívá rovněž okrajový model.

1998

Konsorcium vydává druhé CSS doporučení, k box modelu přidává ještě vlastnost outline. Bez ohledu na to, že jsou v tomto okamžiku box modely prohlížečů jednotné, je opět prosazen obsahový model.

1998

Opera 3.5 implementuje část CSS a užívá model obsahový.

1999

nové vykreslovací jádro Netscapu (Gecko) užívá obsahový model.

2000

Explorer 5.0 pro Macintosh přichází s vlastní CSS vlastností box-sizing, která umožňuje webmasterům nastavit libovolný box model.

2000

Mozilla implementuje po vzoru Exploreru pro Macintosh vlastnost -moz-box-sizing.

2001

Explorer 6.0 rozeznává dva režimy: striktní a zpětně kompatibilní. Ve striktním režimu nově používá model obsahový, v tom druhém okrajový.

2003

Opera 7.0 také rozeznává režimy. Ve zpětně kompatibilním režimu nově používá model okrajový, v tom druhém obsahový.

2XXX

Konsorcium vydá třetí CSS doporučení, v němž už bude vlastnost box-sizing.

Proti všem

Za povšimnutí jistě stojí stav, který nastal v první polovině roku 1998. Světem se tou dobou šířily první prohlížeče s podporou CSS box modelu. Explorer 4.0 měl tržní podíl kolem 25 %, Netscape 4.0 o trošku více. Zbytek návštěvníků používal převážně starší verze těchto dvou. Explorer 3.0 uměl z CSS jen část (box model nikoliv), starší verze Netscapu ho neznaly vůbec. Jen přibližně 2 % lidí používala něco úplně jiného.

Nastal příjemný okamžik, kdy se tvůrci prohlížečů v implementaci shodli. Více než polovina všech návštěvníků užívala prohlížeč podporující okrajový CSS box model. Ostatní neměli box model žádný.

Konsorcium mělo při navrhování doporučení CSS 2 dvě možnosti:

přijmout okrajový model

doporučení by pak sice nebylo kompatibilní s CSS 1, bylo by ovšem plně kompatibilní s již dobře zavedenými prohlížeči.

přijmout obsahový model

bez ohledu na to, že ho tenkrát žádný používaný prohlížeč nepodporoval.

Rozhodlo se pro obsahový model. Vznikla záminka k problémům. Spolupráceschopnost díky tomuto hodně utrpěla.

V následujících letech byla v zájmu majoritního prohlížeče především zpětná kompatibilita. Proto se vůli konsorcia nepodřídil. V zájmu minoritních prohlížečů bylo získat větší podíl na trhu. Jelikož neměly, co ztratit, založili svůj marketing na propagaci W3C doporučení. Vůli konsorcia se tedy podřídily.

Vznikla tak kuriózní situace. Na jedné straně Explorer s okrajovým box modelem. Na straně druhé zbytek světa s obsahovým box modelem.

Smutné na tom je, že za tento chaos nese plnou zodpovědnost konsorcium. Majoritní i minoritní prohlížeče se chovaly logicky a předvídatelně. Kdyby se v roce 1998 podařilo Netscapu zvrátit úpadek a stal by se majoritním, byl by nesoulad box modelů stejný. Pouze by si přední představitelé prohodili role.

Hledisko použitelnosti

Webmaster si nyní musí pamatovat, že šířka není šířkou, tedy vlastně je, respektive není, ale taky je. Takto zmatený člověk si pak kupuje malé boty a nikam se nevejdoucí nábytek.

Naštěstí si může práci zjednodušit. Přepne-li Explorer 6.0 a Operu 7.0 do striktního režimu, dosáhne u 95 % návštěvníků shodného obsahového modelu. Naopak přepne-li Mozillu CSS vlastností -moz-box-sizing: border-box; a nechá Operu a Explorer ve zpětně kompatibilním režimu, dosáhne shodného okrajového modelu u 99,5 % návštěvníků.