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

Jak připojit CSS - kombinace metod C a D - Sloučení metod <link> a @import

Konečně si dnes ukážeme tu nejlepší metodu pro připojení CSS na dokument. Pokud jste pečlivě četli předchozí články, určitě už víte jaké dvě metody budeme kombinovat a určitě také víte, že ani jedna z předchozích metod pro nás nebyla zcela uspokojující. Tato kombinace nám však vyřeší všechny naše problémy, je prostě zázračná...

Sloučení metod <link> a @import

Všechno je ze začátku stejné jako v metodě D. V části head si nadeklarujeme link na externí soubor s CSS. Asi nějak takto:

...
<head>
...
<link rel="stylesheet" type="text/css" href="styly.css" />
...
</head>

Teď si otevřeme soubor styly.css a do něj @importujeme další styly. Soubor styly.css by tedy mohl vypadat takto:

@import url("rozvrzeni.css");
@import url("barvy.css");

A to je všechno. Už nikdy nebudeme muset zasahovat přímo do (X)HTML kódu stránek, ale pouze si vystačíme s CSS soubory. Můžeme @importovat kolik chceme souborů, což může být velice užitečné když spravujeme rozsáhlý web (ale nepřehánět, jinak budete zpomalovat načítání stránek).

Výhody

  1. Prvek <link> může zůstat stejný pro všechny stránky a bude odkazovat pouze na soubor styly.css . Avšak tímto souborem importujeme jakýkoli počet seznamů stylů, takže například když se rozhodneme že přidáme ještě jeden styl (třeba pismo.css ), pouze ho importujeme do souboru styly.css a nemusíme u všech stránek měnit odkaz na styly v prvku <link> .
  2. Díky tomu, že jsou CSS pravidla umístěna v externím souboru můžeme jednoduchou úpravou jednoho souboru změnit vzhled celého webového serveru.
  3. Externí seznamy stylů si prohlížeč uloží a u všech dalších stránek, kde bude odkaz na stejný seznam stylů, už nebude muset tyto styly stahovat. Ušetří se tím čas i množství stažených dat.
  4. Můžeme vytvářet alternativní seznamy stylů, jako například na těchto stránkách, kde máte na výběr ze tří stylů pro změnu velikosti písma (jeden hlavní a dva alternativní).
  5. Jelikož starší prohlížeče jako například Netscape 4.x a nižší nepodporují @import , nebude jim poskytnut žádný seznam stylů. To je šikovná věc, protože tyto prohlížeče neumí pracovat s moderními prvky o rozvržení a pozici stránky. Cíleně zobrazíme CSS pouze moderním prohlížečům, které dokáží s těmito moderními prvky pracovat. Starší prohlížeče budou @import ignorovat. Chcete-li však myslet i na starší prohlížeče, které nepodporují moderní styly o rozvržení a pozici, můžeme použít styly lo-fi a hi-fi, o kterých si povíme v přístím článku.

Nevýhody

  1. Internet Explorer verze 4.x zde podporuje metodu @import . Možná jste se teď zarazili, protože v článku o metodě C jsem si říkali že IE 4.x metodu @import nepodporuje, ale zde je to jinak. Nevím proč, ale IE 4.x podporuje metodu @import url , která se objevuje uvnitř dokumentu s CSS pravidly. Přitom IE 4.x nedokáže zpracovat moderní CSS pravidla o rozvržení a pozici stránek. To může způsobit že naše stránky budou v této verzi prohlížeče IE rozházené a nečitelné. Problém tkví v tom, že si myslí že dobře podporuje CSS pravidla jako prohlížeč, který je opravdu podporuje. Jak však odstranit tento probém si povíme v některém z dalších článků v tomto cyklu.

Shrnutí

To bychom měli o připojení kaskádových stylů na dokument. Jak jste si asi sami všimli, tato metoda nám vyřešila málem všechny problémy, které se objevovaly u předešlých metod. Jediný zádrhel nastává s prohlížečem Internet Explorer 4.x, který podporuje metodu @import , přičemž však nemusí rozumět moderním pravidlům v importovaném souboru a naše stránky mohou být rozházené. Pro ty, co by chtěli myslet i na starší prohlížeče (Netscape 4.x, IE 4.x atd.), připravuji na přístě článek o stylech lo-fi a hi-fi. Pokud na svých stránkách používáte CSS, doporučuji používat výhradně tuto kombinaci metod <link> a @import , a jestliže budete sledovat tento cyklus až do konce, dozvíte se jak připojit styly pro různé typy médií a také si povíme o alternativních stylech. Ale to až zase příště.

20.7.2005