Omezení CSS stylů

způsobená zejména dnešními prohlížeči

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 - Co nefunguje skoro nikde - Netscape 4 - Explorer 4 a 5 - Explorer 3 - Omezení elementů - Nefungující dědičnost - Problémy externího CSS

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í:

• stylovat tabulky (leda pozadí buněk) a prvky formulářů
• potlačit margo u nadpisů (margin-top a margin-bottom)
• blokové elementy chápe pouze tak široké, jak je široký jejich obsah (třeba u jednořádkových odstavců; pak pomůže leda přidání border: něco)
• při stylování odkazů někdy způsobuje jejich nefunkčnost 
• zcela ignoruje vlastnosti border-strana, o složitějších border-* si také nedělám iluze
• neumí list-style-image a list-style-position
• nezná vlastnosti clip a overflow
• nezná-li vlastnost, ignoruje celou deklaraci
• další drobné impotence lze vyčíst v pravém sloupečku přehledu vlastností a hodnot CSS

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:

• neumožňuje stylově stínovat čáry a okraje buněk v tabulkách
• neumí word-spacing
• neumí text-decoration: blink
• špatně vykresluje verzálky kapitálek u font-variant: small-caps
• neumí u border: dotted, double a dashed
• neumí nastavit šířku elementu body

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.

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

body {font-family: Arial CE},

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:

body, p, li, td, th {font-family: Arial CE}.

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í.

• Pokud máte stylopis v jiném adresáři než html stránku a odkazujete ze stylopisu nějaký obrázek pozadí relativní adresou, není úplně zřejmé, jak se má ta relativní adresa vyhodnocovat. Správně by se měla odvozovat od umístění css souboru, některé prohlížeče (minimálně NN4) ho odvozují od umístění stránky. Řešení spočívá buď v tom, že se dá stylopis do stejného adresáře (to někdy nejde) nebo se obrázek zkopíruje do všech myslitelných adresářů.
• Pokud náhodou máte ve stránce link na neexistující css soubor, Netscape 4 to zmate natolik, že není stránku schopen vůbec zobrazit. Chce to často kontrolovat linky, aby to vůbec nenastalo.
• Explorery dělají jiný problém: pokud externí css soubor změním, někdy odmítají načíst aktuální verzi a staré styly si drží v cache paměti.

Vizte též: přehled vlastností CSS, různý styl v různých prohlížečích, úvod do CSS, různé prohlížeče

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript