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

Mozilla, Netscape 4, 6, 7 a Opera (testováno na verzích 6 a 7) pravidla zadaná s rovnítky a uvozovky ignorují.

V Internet Exploreru verze 6 záleží na doctype. Jestliže se ve stránce použije striktní doctype, je stránka ve standardním módu. Pak uvozovky a rovnítka správně ignoruje.

Ignorování pravidla v IE 5.0

IE 5.0 ignoruje pravidlo, před kterým je napsána blbost bez dvojtečky.

body {IE5ne; background-color: yellow; color: green}

IE 5.0 zobrazí dokument s bílým (výchozím) pozadím, ne se žlutým, jako to udělají další prohlížeče. Text bude zelený i v IE 5.0, protože před druhým pravidlem nesmysl není. (za upozornění děkuji Marku Janoušovi)

V IE 5.5 se to následující pravidlo neignoruje (za test děkuju Janu De Filippo).

Mozilla

Mozilla je moderní prohlížeč, 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, 5 nebo 6 (quirk), 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.

Poznámka (psáno 2003): podle specifikace podtržítko v class a id být může, jen ne na prvním místě. Mozilla s tím problémy nemá, jinde jsem to netestoval.

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

Vlastnost začínající podtržítkem

Internet Explorer (všech verzí) má zajímavou chybu, že vlastnosti začínající podtržítkem interpretuje jako vlastnosti bez podtržítka. Ostatní prohlížeče takovou vlastnost ignorují. Příklad:

div.sdeleni {width: 120px; _width: 140px}

V jiných prohlížečích se použije šířka 120px, v Internet Exploreru 140px. Přitom to vypadá, že (narozdíl od většiny hacků) jde o validní zápis.

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
Odkazy ven: Doctype a módy prohlížečů, Pixy. CSS hacky (anglicky), Jak zabránit čtyřkám načítat styly (Příručka moderního webmastera)