Omezení CSS stylů

Ačkoli používání kaskádových stylů silně prosazuji, nelze zamlčet, že styly mají své mouchy. Tyto mouchy nejsou malé -- místy dosahují velikosti vážek, ba i pterodaktylů.

Různé prohlížeče

Každý prohlížeč interpretuje CSS jinak. Všechny se shodnou pouze v tak základních věcech jako je barva písma a pozadí, velikost písma nebo použitý font. Mnoha autorům to stačí, mnoha autorům to nestačí. Pokud se budeme pokoušet třeba o okraje, obtékání nebo o pozicování, zobrazí se to všude jinak.

Klasicky nastává ten případ, kdy autor odladí stránky pro Explorer 5, pak si to někde zobrazí v Netscapu a jde do kolen.

V dnešní době (listopad 2000) podporují CSS pouze tyto mně známé prohlížeče: Internet Explorer 3, 4 a 5, Netscape 4 a 5 (Mozilla), Opera 3. Pokusím se vypsat některé své poznatky o jejich podpoře CSS u konkrétních elementů. Zdůrazňuji, že se jedná pouze o moje poznatky, protože zdroje na toto téma jsem nikde nenašel, a že jsem hledal! Také jsem objevil nestandardní možnost, jak pomocí rovnítek a uvozovek pro různé prohlížeče aplikovat různé styly.

Co nefunguje skoro nikde

Ve specifikaci CSS1 se objevují pseudoelementy :first-line a :first-letter, které by měly umět zformátovat pouze první řádku nebo první písmeno daného elementu. Např. p:first-letter {color: blue} by mělo obarvit na modro první písmenko odstavce. Zatím jsem podporu této srandy viděl pouze ve vývojové verzi Mozilly 5 a Internet Exploreru 5.5.

Mimochodem Mozilla 5 podporuje CSS perfektně a skoro není nutno v ní nic testovat. Zvládá dokonce CSS 2.

Netscape 4

Opravdovou zhoubou pro webové designéry pracující s CSS je Netscape 4. Jeho podpora je natolik špatná, že tento prohlížeč mnoho autorů ignoruje. Na Linuxu je to ale jediný všeobecně rozšířený prohlížeč.

Co NN 4 neumí:

Internet Explorer 4 a 5

Podpora CSS v Microsoftích prohlížečích je obecně řečeno dobrá, pouze čtyřka trochu váhá u blokových elementů.

Okrajové nefunkčnosti:

Internet Explorer 3

Prohlížeč z roku 1996 se už dnes vyskytuje málo, ale znamená pro použití CSS doslova katastrofu. On totiž styly trochu podporuje, ale opravdu jenom trochu. Vlastně skoro vůbec a hlavně špatně, čili dělá zrůdné chyby. Bylo by lepší, kdyby styly ignoroval. Například moje stránky v IE 3 skoro nejsou čitelné.

IE 3 obzvláště chybuje v délkových jednotkách (plete si je), v deklaraci barev a v nastavování okrajů objektů (margin). Margin totiž sčítá, místo aby akceptoval naposledy nastavenou hodnotu. A nechápe moc třídy a identifikátory. Atd.

Omezení elementů

Má smysl zabývat se jediným podstatným omezením: kterou vlastnost lze aplikovat na který element (element = tag). Že například nelze odkaz zarovnat doprava, je všeobecně zřejmé, protože by vypadl z textu. Prozkoumal jsem podrobně podporu vlastnosti float (obtékání) s hodnotou right.

Podpora vlastnosti float

Jak vidno, je to pěkný zmatek. Z tabulky například vyplývá, že vlastnost float lze bezpečně použít pouze u elementů div, span a img!

Takovouto tabulku by bylo možné vypracovat pro další vlastnosti. Je to ale časově náročné, takže to berte jen jako ilustraci. Obecné poučení zní: všechno se musí vyzkoušet v několika prohlížečích.

Element s float (nutno zadat width)	IE 4	IE 5	NN 4	Mozilla 5
h1, p, a, b a spol., form	ne	ano	ano	ano
span, div, img	ano	ano	ano	ano
table, input a spol., iframe	ano	ano	ne	ano

Nefungující dědičnost

Často se pro celou stránku nastavuje společný font, barva písma a jiné detaily. Dejme tomu že chci nastavit pro celou stránku písmo Arial CE. Správně by mělo stačit napsat

protože typ písma se má dědit na vnořené elementy. Ale chyba lávky: takto to prostě někdy nefunguje. Je nutno vypsat to nějak podrobněji:

Nebo dejme tomu, že chci udělat obrázkové odrážky u seznamů. Normálně se to dělá
ul li { list-style-image: URL('images/listecek.gif')} a funguje to. Pokud ale budu mít seznam v tabulce, tak tam se to nezobrazí. Je nutno dopsat
ul li, td ul li { list-style-image: URL('images/listecek.gif')}, což se týká i položek (li) seznamů (ul) uvnitř buděk tabulky (td). (Výklad toho vrstvení je v textu o složitějších deklaracích CSS.)

Problémy externího CSS

Nepraktičtější použití CSS spočívá ve vytvoření souboru *.css, ve kterém je zapsán stylopis namísto toho, aby byl v hlavičce stránky. Popisuji to jinde. Nyní mi jde o drobné problémy, které s tím nastávají.