Různý CSS styl v různých prohlížečích
Každý prohlížeč zobrazuje CSS styly trochu jinak. Č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 5, v Mozille (Firefoxu), v IE 6 i v Opeře. Prakticky se jedná o využití chyb těch prohlížečů, že něco neumějí nebo toho umějí moc.
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 a 7 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.
V Internet Exploreru 7 ve standardním režimu už podtržítkový hack nefunguje. Podtržítko lze nahradit mnoha různými jinými znaky, např. =*;[] atd.
div.proIE7 {width: 120px; #width: 140px}
Odlišení Mozilly od Opery
V některých módech je těžké odlišit Operu a Mozillu (Gecko). Jediné, na co jsem přišel, je velmi nespolehlivý hack pomocí pseudotřídy :lang
http://www.jakpsatweb.cz/weblog/archiv/200304.html#lang
Ale prý pro Operu funguje tohle:
<link rel="stylesheet" type="text/nesmysl" href="pro-operu.css">
Jiné prohlížeče (Explorer, Firefox) takový zápis s neznámým typem ignorují, Opera ho bere. Případně totéž s tagem style:
<style type="text/nesmysl">
/* zápis stylu pro Operu*/
</style>
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ě.
Reklama
