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

Jak připojit CSS - metoda C - Externí styly přes @import

Pokračujeme v našem cyklu o aplikaci CSS na dokument a dnes si probereme další metodu externí styly přes @import. V článku už se pomalu budeme seznamovat s externími seznamy CSS.

Externí styly přes @import

...
<head>
...
<style type="text/css">
<![CDATA [
@import "styl.css";
] ]>
</style>
</head>

Pravidlo @import umožňuje importovat CSS z externího souboru. Cesta k CSS souboru může být buď relativní (jako zde) nebo absolutní (např. http://www.neco.cz/styl.css). Stejně jako v metodě B nám i zde komentář CDATA umožňuje schovat CSS pravidla před staršými prohlížeči neschopnými jim porozumět.

Výhodny

  1. 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.
  2. Externí seznamy stylů si prohlížeč uloží a u všech dalších stránek, kde se bude importovat stejný soubor, už nebude muset tyto styly stahovat. Ušetří se tím čas i množství stažených dat.
  3. Komentář CDATA nám schová CSS pravidla před staršími prohlížeči neschopnými jim porozumět.
  4. Velká výhoda této metody je, že verze prohlížečů Netscape 4.x a nižší a Internet Explorer 4.x a nižší nepodporují @import v prvku style . To je šikovná věc, protože tento prohlíž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. Problém prohlížečů, které neumí pracovat s moderními pravidla CSS, je takový že si myslí že dostatečně podporují CSS jako prohlížeče, které je na rozdíl od nich opravdu podporují.

Nevýhodny

  1. Nemůžeme vytvářet alternativní seznamy stylů, jako například na těchto stránek, kde máte na výběr ze tří stylů (jeden hlavní a dva alternativní) pro změnu velikosti písma.
  2. Pokud bychom měli větší webový server a bylo by hodně CSS pravidel, možná bychom chtěli importovat více externích dokumentů, kde by každý obsahoval jiná CSS pravidla (například jeden pravidla o barvě, druhý o rozvržení...) To může být někdy složíté měnit všechny odkazy @import . Musíme přímo zasahovat do kódu.
  3. Budeme-li chtít mít na stránkách více stylů pro různá média (např. tiskárny), určení média u metody @import nepodporují některé verze prohlížeče Internet Explorer. Více o určování CSS stylů pro různá média se dočtete v dalším článku.

Shrnutí

Tato metoda nemá celkem žádnou chybu, až na to že určování typů média u @import některé verze IE nepodporují a nemůžeme vytvářet alternativní seznamy stylů jako v metodě D, o které si budeme povídat přístě. Zjistíme však že i metoda D není bez chyby, avšak po probrání metody D si ukážeme ještě jednu kombinaci metod, která by nám měla vyřešit všechny problémy.

17.7.2005