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.
2010: tuto stránku považuji za zastaralou a nedostanu se brzo k tomu, abych ji přepsal. Můžete se z ní naučit základní koncept hacků, ale konkrétní postupy už často nefungují. Jak se totiž prohlížeče mění (jsou vydávány nové), odstraňují chyby, na kterých jsou hacky založené.
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>
2010: Prý už to nefunguje.
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
