Jak připojit CSS - Finále alá všechno dohromady

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

Jak připojit CSS - Finále alá všechno dohromady

Tímto článkem se pomalu blížíme do finále našeho cyklu o aplikaci kaskádových stylů na dokument. Ukážeme si připojení CSS se vším všudy jako jsou styly pro tisk a alternativní styly. Řekneme si také něco o kompatibilitě a starších prohlížečích.

Krok za krokem

Při vytváření našeho připojení kaskádových stylů budeme postupovat postupně a u každého kroku se zastavíme a povíme si co na něm můžeme ještě vylepšit. Na konec bychom se měli dopracovat k ideálnímu způsobu.

1. krok - vytvoření odkazů na styly

V tomto kroku se zmiňuji o alternativních stylech. Pokud prosím nevíte jak se s němi pracuje, přečtěte si prosím nedávno publikovaný článek Jak připojit CSS - Alternativní seznamy stylů.

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

 <link rel="stylesheet" type="text/css" media="print" href="print.css" />

 <link rel="alternate stylesheet" type="text/css" media="screen" href="male.css" title="male pismo" />

 <link rel="alternate stylesheet" type="text/css" media="screen" href="velke.css" title="velke pismo" />

 </head>

Obsah souboru screen.css

 @import url("rozvrzeni.css");
  
 @import url("menu.css");
 body {
 font-family: Verdana, sans-serif;
 font-size: 11px;
 }
 ... další styly pro starší prohlížeče

Možná se divíte proč importujeme styly a pod tím ještě deklarujeme další styly, vždyť mohou být v tom importovaném souboru. Samozřejmě že to má nějaký význam. Zde je přehledný seznam a vysvětlení:

Importované styly (@import url): Obsahují moderní styly o rozvržení stránky, pozici stránky a pozadí stránky. Tyto styly totiž nepřečtou starší prohlížeče (např. Netscape 4.x), které by se na nich mohly zakuckat. Cílem je předat tyto styly pouze moderním prohlížečům.
Přímo deklarované styly pod importovanými: Obsahují pouze pravidla o barvách, typu a velikosti písma. S těmito styly budou pracovat jak starší prohlížeče, které umějí pracovat alespoň s jednoduchým CSS, tak i moderní prohlížeče.

Nezapomeňte že zde pořád platí kaskádový efekt, takže stejná importovaná pravidla budou zrušena přímo deklarovanými pravidly.

Pokud jste pečlivě sledovali předešlé články, už asi víte že zde nastává problém s prohlížečem Internet Explorer verze 4.x. Ten totiž podporuje pravidlo @import url přičemž však nedokáže zpracovat moderní pravidla o rozvržení, pozici... Jak se tomuto problému vyvarovat si povíme v některém z dalších kroků.

Obsah souboru print.css

 body {
 font-family: "Times New Roman", serif;
 font-size: 12pt;
 color: #000;
 }
 ... další styly pro tisk

Teď se možná divíte proč zde žádné soubory neimportujeme. Není to potřeba. Styly pro tisk by měly totiž obsahovat pouze jednoduchá pravidla jako velikost textu a barvy, žádné moderní styly o pozici, rozvržení, pozadí atd. Tiskárny by totiž nemuseli umět naše stránky s moderními pravidly správně vytisknout. U tisku se drží pravidlo čím jednodušší a přehlednější, tím lepší. Různé prvky jako reklamu, navigační menu a podobné můžeme nechat schovat. Více o tomto ještě v dalším článku, který se bude věnovat stylům pro tisk.

Obsah souboru male.css

 body {
 font-size: 9px;
 }

Toť vše, jelikož chceme mít alternativní styly pouze pro změnu velikosti písma, stačí nám pouze toto jedno pravidlo. Jak už jsme si říkali v článku o alternativních stylech, výchozí styl (zde screen.css ) stále platí a aktivovaný alternativní styl mění pouze společná pravidla. Jedná se o pouhý kaskádový efekt. Jak jednoduché.

Obsah souboru velke.css

 body {
 font-size: 16px;
 }

Zde nastává stejná situace jako u souboru male.css .

Shrnutí

Nastal nám jeden problém, a to totiž s prohlížečem IE 4.x. V dalším kroku si ukážeme jak aktivovat alternativní styly.

2. krok - aktivace alternativních stylů

Zde jsou odkazy na změnu stylu, které se nacházejí někde v sekci <body>:

 <a href="#" onclick="setActiveStyleSheet('male pismo'); return false;" title="Přepne na malé písmo">malé písmo</a>

 <a href="#" onclick="setActiveStyleSheet('vychozi'); return false;" title="Přepne na výchozí velikost písma">výchozí velikost</a>

 <a href="#" onclick="setActiveStyleSheet('velke pismo'); return false;" title="Přepne na velké písmo">velké písmo</a>

Nesmíme ještě zapomenout na soubor s JavaScriptem, který vložíme někam do hlavičky <head>:

<script type="text/javascript" src="styleswitcher.js"></script>

A zde si můžete stáhnout soubor styleswitcher.js : http://www.havlena.net/scripts/styleswitcher.js, http://www.alistapart.com/articles/alternate/.

Shrnutí

Zde nastává problém pouze s tím, když prohlížeč nemá nainstalovaný JavaScript. Mohli bychom však otestovat uživatelův prohlížeč a pokud nebude podporovat JavaScript, přepnutí alternativních stylů odkazem mu nezobrazíme a tím docílíme že mu nebude vyskakovat okno s hlášením o chybějícím objektu. Tak honem do dalšího kroku.

3. krok - ošetření pomocí detekce prohlížeče

V tomto kroku budeme pracovat s PHP funkcí Get_Browser(). Pokud nevíte o co se jedná, přečtěte si prosím nedávný článek PHP: Funkce Get_Browser.

Vezmeme to jedním vrzem a ošetříme jak JavaScript, tak i prohlížeč IE 4.x.

Ošetření JavaScriptu

 <head>
 ...
 <?
 $browser = Get_Browser();
 if ($browser->javascript)
 {
 echo "<script type='text/javascript' src='styleswitcher.js'></script>";
 }
 ?>
 </head>
 <body>
 <?
 if ($browser->javascript)
 {
 ?>
 <a href="#" onclick="setActiveStyleSheet('male pismo'); return false;" title="Přepne na malé písmo">malé písmo</a>

 <a href="#" onclick="setActiveStyleSheet('vychozi'); return false;" title="Přepne na výchozí velikost písma">výchozí velikost</a>

 <a href="#" onclick="setActiveStyleSheet('velke pismo'); return false;" title="Přepne na velké písmo">velké písmo</a>
  
 <?
 }
 else
 {
 echo "Nainstalujte si JavaScript!";
 }
 ?>
 ...
 </body>

Ošetření IE 4.x

 <head>
 ...
 <?
 $browser = Get_Browser();
 if ((($browser->browser=="IE") or ($browser->browser=="Internet Explorer")) and ($browser->majorver=="4"))
 {
 echo "<link rel='stylesheet' type='text/css' media='screen' href='ie4.css' />";
 }
 else 
 {
 ?>
 <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />

 <link rel="stylesheet" type="text/css" media="print" href="print.css" />

 <link rel="alternate stylesheet" type="text/css" media="screen" href="male.css" title="male pismo" />

 <link rel="alternate stylesheet" type="text/css" media="screen" href="velke.css" title="velke pismo" />

 <?
 }
 ?>
 </head>

Zde musí soubor ie4.css obsahovat pouze jednoduchá pravidla o barvách, velikosti a typu písma.

4. krok - výsledný kód

 <html>
 <head>
 ...
 <?
 $browser = Get_Browser();
 if ((($browser->browser=="IE") or ($browser->browser=="Internet Explorer")) and ($browser->majorver=="4"))
 {
 echo "<link rel='stylesheet' type='text/css' media='screen' href='ie4.css' />";
 }
 else 
 {
 ?>
 <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />

 <link rel="stylesheet" type="text/css" media="print" href="print.css" />

 <link rel="alternate stylesheet" type="text/css" media="screen" href="male.css" title="male pismo" />

 <link rel="alternate stylesheet" type="text/css" media="screen" href="velke.css" title="velke pismo" />

 <?
 }
 if ($browser->javascript)
 {
 echo "<script type='text/javascript' src='styleswitcher.js'></script>";
 }
 ?>
 </head>
 <body>
 <?
 if ($browser->javascript)
 {
 ?>
 <a href="#" onclick="setActiveStyleSheet('male pismo'); return false;" title="Přepne na malé písmo">malé písmo</a>

 <a href="#" onclick="setActiveStyleSheet('vychozi'); return false;" title="Přepne na výchozí velikost písma">výchozí velikost</a>

 <a href="#" onclick="setActiveStyleSheet('velke pismo'); return false;" title="Přepne na velké písmo">velké písmo</a>
  
 <?
 }
 else
 {
 echo "Nainstalujte si JavaScript!";
 }
 ?>
 ...
 </body>
 </html>

Tak nějak by mohl vypadat náš dokument. Hlavičku si samozřejmě musíte sami doplnit (DTD, kešování...). Pokud chcete myslet až do detailu, můžete ještě ošetřit zmizení JavaScriptu u prohlížeče IE 4.x. Přiřazení speciálního stylu pro IE 4.x vám sice může připadat jako násilné, ale vážně mě nic jiného nenapadlo. Všechny ostatní mně známé prohlížeče totiž zároveň nepodporují metodu @import a podporují metodu @import url jako Internet Explorer 4.x. No jo, Microsoft se zase činil.

Závěr

Co dodat, máme hotovou a promyšlenou aplikaci kaskádových stylů na dokument. Přístě si ještě povíme něco o stylech pro tisk a můžeme náš cyklus uzavřít. Doufám že vám vše bude fungovat a chci ještě upozornit, že ukázky těchto kódů spolupracují s PHP, takže pokud doma nemáte nainstalovaný virtuální server a PHPéčkem, nepůjde vám to. Pokud to však budete zkoušet na svých stránkách, kde hosting poskytuje PHP, přímo na internetu by vám to mělo jít.

30.7.2005