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)