Nabízím kvalitní řešení, které vám padne.

Jak připojit CSS - styly lo-fi a hi-fi

Naš další článek v cyklu Aplikace kaskádových stylů bude o kompatibilitě mezi starými prohlížeči a pravidly CSS. Ukážeme si styly lo-fi a hi-fi, které nám zaručí že i starým prohlížečům předáme pár základních pravidel CSS.

Pokud jste četli předchozí články, víte že připojení externího seznamu stylů přes prvek <link> může způsobit potíže starším porhlížečům, které neumí pracovat s moderními CSS pravidly. Důsledkem toho může být nepoužitelná prezentace. Dále jsme si však ukázali metodu @import , kterou tyto starší prohlížeče ignorují, a tak se nemůže stát že by narazily na moderní pravidla, která by se mohli v externím souboru nalézat. Nakonec jsme si ukázali kombinaci metod @import a <link> , která problém řešila stejně jako samotná metoda @import . Existuje však fígl, který dovede aby starší prohlížeče dostali pouze jednoduchá CSS pravidla. Vypadá takto:

...
<head>
...
<link rel="stylesheet" type="text/css" href="lofi.css" />
<style type="text/css">
<![CDATA [
@import "hifi.css";
] ]>
</style>
</head>

Vše spočívá v tom, že zde máme odkazy na dva externí seznamy stylů, a to na lofi.css a hifi.css .

Soubor lofi.css - starší prohlížeče

Jelikož je tento externí seznam stylů odkazován prvkem <link> , dokáží ho načíst i starší prohlížeče (IE 4.x, Netscape 4.x atd.). Pokud by však obsahoval moderní styly o rozvržení, pozici nebo pozadí stránky, starší prohlížeč by těmto pravidlům nemusel porozumět a mohlo by vzniknout nečitelné uspořádání. Proto soubor lofi.css musí obsahovat pouze základní pravidla jako například velikost písma, typ písma, barva písma a barva odkazů. Pravidla v tomto souboru budou umět zpracovat i moderní prohlížeče, čímž ušetříme kód.

Soubor hifi.css - moderní prohlížeče

Jelikož je tento externí seznam stylů odkazován metodou @import , starší prohlížeče ho ignorují. Nemůže se tedy stát, že by tyto prohlížeče dostali CSS pravidla v tomto souboru. Proto soubor hifi.css může obsahovat moderní styly o rozvržení, pozici nebo pozadí stránky, které se zobrazí pouze moderním prohlížečům, které je budou umět zpracovat.

Pozor na kaskády

Pořádí umístění prvků <link> a <style> není náhodné, má to svůj význam. Priorita pravidel závisí na jejich pořadí.

Například moderní prohlížeče podporují obě metody, a tak budou zpracovávat oba seznamy stylů. Pravidla stylu v souboru hifi.css zruší platnost pravidel stylů v souboru lofi.css , které se odkazují na stejné prvky. To je zapříčiněno tím, že je soubor hifi.css uveden až za lofi.css .

Kaskádování však můžeme využít pro úsporu kódu. Pravidla obsažené v souboru lofi.css už nemusíme deklarovat v souboru hifi.css .

Shrnutí

lofi.css
Soubor přečtou moderní i starší prohlížeče. Obsahuje pouze jednoduchá pravidla jako velikost písma, barva odkazů atd.
hifi.css
Soubor přečtou pouze moderní prohlížeče. Obsahuje moderní pravidla o rozvržení, pozici, pozadí atd.

20.7.2005