Různý CSS styl v různých prohlížečích

Každý prohlížeč zobrazuje CSS styly trochu jinak. Obzvlášť špatně je na tom Netscape Navigator 4. Často je potřeba pro každý prohlížeč napsat jiný styl. 

Využití  chyb

Existují finty, pomocí kterých lze stejným elementům vnutit různé styly v Exploreru 4, v Mozille, v IE5 i v Navigatoru 4. Prakticky se jedná o využití chyb těch prohlížečů, že něco neumějí nebo toho umějí moc. 

Navigator 4

Základní otázka zní, zda není lepší NN4 ignorovat a vykašlat se na to, jak v něm stránky vypadají, protože tenhle program podporuje styly opravdu špatně. Odpověď není jednoduchá: vykašlat se na něj donedávna nedalo, protože to byl jediný pořádný prohlížeč, který šlapal na Linuxu. Dnes (březen 2002) existuje Mozilla a Konqueror, takže doporučuji Netscape 4 zakázat zákonem.

Ignorování deklarace

Základní záhadná vlastnost podpory CSS v Navigatoru je tato: pokud se v deklaraci (uvnitř složené závorky) vyskytne vlastnost, které NN4 nerozumí, potom ignoruje celou deklaraci (složenou závorku).

Například deklaraci

a {color: blue; blbost}

vezmou všechny prohlížeče kromě NN4, protože se tam vyskytuje řetězec "blbost", což pro NN4 není název CSS vlastnosti. V praxi je lepší dávat tam něco srozumitelnějšího než "blbost", já tam dávám "neNN4" nebo "IE". Je třeba dávat pozor i na některé standardní vlastnosti, které nemá NN4 implementovány, jako například "clip" nebo "filter".

Kaskádování

Předchozí vlastnosti se dá využít pouze v Exploreru. Jak ale udělat odkaz v NN4 třeba zelený a v IE červený? Využiju na to obecné kaskádovací pravidlo, které říká, že deklarace uvedená později má větší prioritu.

a {color: green}

a {color: red; neNN4}

Explorer vezme obě deklarace, ale použije tu druhou, protože je pozdější. NN4 tu druhou deklaraci nechápe, tak použije tu první.

Rovnítko a uvozovky

Internet Explorer 4 a vyšší (až do 5.5 kromě) umožňuje zadávat CSS deklarace i s rovnítky a uvozovkami (ačkoli to není ve specifikaci). Například color= blue, color: "blue" nebo color= "blue".

Zajímavé je pouvažovat, co to udělá s NN4. Zatímco při použití rovnítka zapomene na celou deklaraci (složenou závorku), protože vlastnost "color=" nezná, při použití color: "blue" nezná pouze to ""blue"", takže zbytek závorky vezme. Zejména uvozovky se tedy hodí, když chci, aby NN4 nevzal pouze jednu vlastnost.

Některým verzím Netscapu 4 uvozovky nevadí a u písma a barvy je bere. Rovnítko ale nikde. 

Doplnění: podle zpráv od Microsoftu verze Internet Explorer 5.5 nebude chápat obsah uvozovek! O rovnítku se to nezmiňuje.

Mozilla 5, 6

Mozilla je vývojovou verzí Netscapu 6 a je jediným mně známým prohlížečem, který CSS podporuje přesně podle specifikace. Takže neznámá vlastnost Mozillu nerozhodí, rovnítka a uvozovky ale nebere (což je správně).

Rozšířím-li nyní zadání příkadu s různou barvu odkazu v různých prohlížečích (a v Mozille budu chtít odkazy tmavě modré), bude to vypadat takto:

a {color: green} /* pro NN4*/

a {color: navy; neNN4} /* pro Mozillu a NN 6 */

a {color= "red"} /* pro IE */

První řádek je pro NN4, druhý je pro Mozillu, IE 5.5 plus všechny ostatní normální prohlížeče a poslední řádek je pro Internet Explorer 4.0 nebo 5.1, které jediné chápou rovnítko.

Podtržítko v ID

Chcete-li nějak odlišit definici stylu v IE 5 od jiných prohlížečů, využijte toho, že Internet Explorer 5.0 jako jediný prohlížeč dovoluje v názvech tříd a identifikátorů (class a id) použít podtržítka. Jiné prohlížeče se chovají jako by třída (nebo ID) nebyla vůbec zadána.

Podobně Internet Explorer vezme v pohodě třídy, které začínají číslicí. To se podle specifickace nemá, takže Netscapy a ostatní prohlížeče to ignorují. 

Velká a malá písmena v class

Internet Explorer 5.5 prý v názvech tříd a identifikátorů rozlišuje velká a malá písmena. Toho by se také dalo využít, pokud chcete rozlišit IE 5.5 od zbytku světa.

Zápis barev

Dá se využít toho, že Internet Explorer jako zápis barvy vezme hexadecimální zápis bez křížku. Např. "FFFF00" je pro IE žlutá, pro ostatní prohlížeče je to nesmysl.

@import

Standardně se externí styly vkládají pomocí HTML zápisu 

<link rel="stylesheet" href="styl.css">

Páté verze prohlížečů umožňují vložit externí styl i zápisem

<style>
@import('styl.css')
</style>

Takže pokud nějaký styl chcete uplatňovat v pátých verzích a ve čtvrtých ne, vkládejte to pomocí @import.

Pozor na editory

Některé HTML editory při ukládání stránek "blbosti", rovnítka a uvozovky mažou. Konkrétně zjištěno u FrontPage 2000.

Význam

Může se zdát, že barvení odkazů různě v různých prohlížečích je blbost. Po pravdě řečeno v případě barvení odkazů to blbost je. Budete-li si ale hrát s rámečky, pozicováním, okraji odstavců, délkovými jednotkami atd., využijete popsané triky bohatě.

Předchozí: Délkové jednotky v CSS
Vizte též: praktické použití CSS, přehled hodnot CSS, různé prohlížeče, omezení CSS, odlišné formátování tisku

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