Různý 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. Objevil jsem finty, pomocí kterých lze stejným elementům vnutit různé styly v Exploreru 4, v Mozille, v IE5 i v Navigatoru 4.

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ěď je jednoduchá: vykašlat se na něj nelze, protože je to jediný pořádný prohlížeč, který šlape na Linuxu.

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

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.

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.

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

Mozilla je vývojovou verzí Netscapu 5 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:

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

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.

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.

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