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

Jak připojit CSS - alternativní seznamy stylů

Pokračujeme dál v našem cyklu a dnes si povíme něco o alternativních stylech, kterými můžeme měnit velikost písma, typ rozvržení stránky, barevné schéma atd., což může uživatelům náš web velmi zpříjemnit.

Ze všech metod o připojení CSS na dokument jste si určitě všimli, že alternativní seznamy stylů můžeme použít pouze v metodě D ( <link> ) nebo v kombinavi metod C a D ( <link> a @import ). Celým tímto článkem si budeme demonstrovat alternativní styly pro změnu velikosti písma, jaké jsou i na tomto webu.

Alternativního stylu dosáhneme odkazem na seznam stylů pomocí prvku <link> , kde do atributu rel vložíme alternate stylesheet :

<head>
...
<link rel="stylesheet" type="text/css" href="styl.css" title="vychozi velikost" />
<link rel="alternate stylesheet" type="text/css" href="male.css" title="male pismo" />
<link rel="alternate stylesheet" type="text/css" href="velke.css" title="velke pismo" />
</head>

Jak jste si asi všimli, mimo nové hodnoty atributu rel nám přibil ještě atribut title , který dává jednotlivým seznamům jméno, abychom je mohli později vybrat. Hodnota alternate atylesheet zabraňuje tomu, aby byl styl aktivní ihned s načtením stránky, přičemž výchozí styl a hned s načtením aktivní bude v našem případě soubor styl.css .

A co starší prohlížeče?

Jestliže chceme schovat alternativní styly před staršími prohlížeči (např. Netscape 4.x) nemusíme používat metodu @import . Straší prohlížeče totiž nepodporují hodnotu alternate stylesheet v atributu rel . Alternativní seznamy tedy v těchto prohlížečích nebudou použity.

Styly v souborech

Jelikož některé prohlížeče nedovolují změnu velikosti písma, můžou se někdy hodit naše alternativní seznamy. A budou-li naše stránky nečitelné pro slabozraké uživatele, mohou si díky alternativním stylům zvětšít velikost písma. Není to jenom pro zpestření stránek, ale může to i pomoci.

styl.css

V tomto souboru nastavíme základní velikost písma například na 11px .

body { font-size: 11px; }

male.css

Tímto souborem zrušíme pravidlo ve výchozím souboru (styl.css) a zmenšíme písmo na 9px .

body { font-size: 9px; }

velke.css

Tímto souborem zrušíme pravidlo ve výchozím souboru (styl.css) a zvětšíme písmo na 16px .

body { font-size: 16px; }

Pozor na kaskády

Velice důležité je vědět, že i zde stále platí kaskádový efekt. Alternativní seznamy stylů dědí styly po výchozím seznamu stylu, funguje to asi takto: ve výchozím stylu budeme mít všechny CSS pravidla o vzhledu stránky a velikosti písma. V alternativních stylech se budou nacházet pouze deklarace o velikosti písma, a když se bude aktivovat nějaký alternativní seznam stylů, dojde pouze ke zrušení platnosti společných pravidel. Takže zde jsou společné jenom deklarace o velikosti písma. Výchozí pravidla budou stále v platnosti a jediné co se předeklaruje je velikost písma.

Aktivace alternativních stylů

Takže už máme připravené seznamy stylů a zbývá nám je pouze zprovoznit. Aktivace uživatelem může být někdy docela složitá. Vlastní mechanizmus pro změnu přepínání alternativních stylů nabízí zatím pouze mále prohlížečů (například Mozilla). Jsou-li v dokumentu přítomny alternativní seznamy stylů, Mozilla nám zobrazí ve spodním rohu ikonku, kterou můžeme po kliknutí vybírat mezi alternativními a výchozím stylem.

Já na těchto stránkách používám mechanizmus na přepínání stylů pomocí JavaScriptu a titulku stylů. Přepínání probíhá hypertextovým odkazem a jelikož je použitý JavaScript spuštěn na straně klienta je přepínání okamžité bez potřeby obnovy stránky.

Odkazy pro aktivaci našich stylů pomocí titulku v prvku <link> :

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

<a href="#" onclick="setActiveStyleSheet('vychozi velikost'); 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>

Také nesmíme zapomenout spustit JavaScript v hlavičce:

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

A na závěr potřebujeme soubor styleswitcher.js , který se nechází na tomto webu http://www.havlena.net/scripts/styleswitcher.js nebo v článku autora Paula Sowdena pro časopis A List Apart http://www.alistapart.com/articles/alternate/.

Objektový model dokumentu - DOM

Za to, že můžeme přistupovat k alternativním stylům pomocí JavaScriptu můžeme poděkovat standardu W3C DOM (Document Object Model). Co o DOM říká W3C:

Objektový model dokumentu je rozhraní nazávislé na použíté platformě a jazyku, které programům a skruptům umožňuje dynamický přístup a modernizaci obsahu struktury a stylu dokumentu. Daný dokument lze pak dále nechat zpracovat počítačem a výsledky tohoto procesu je možné znovu začlenit do sránky.

Shrnutí

Jak vidíte prostřednictvím JavaScriptu založeném na DOM můžeme uživatelům nabídnout dynamické přepínání stylů. O jaké styly se jedná už nechám na vás a vaší fantazii.

29.7.2005