Alternativní styly – připojení stylu v hlavičce dokumentu

V poslední době se uživateli stále častěji nabízí možnost vybrat si styl stránky, který mu nejvíce vyhovuje. Existuje mnoho různých řešení, které tuto možnost implementují, a já bych vás s nimi rád seznámil. V tomto článku si probereme možnost linkování a výběru stylů prostřednictvím XHTML a interních mechanismů prohlížeče.

Je asi zbytečné předstírat, že žádné hotové řešení pro dynamickou změnu stylů ještě neexistuje. Po krátkém hledání byste jistě našli několik různých hotových skriptů, které by stačilo začlenit do vašich projektů. Dal jsem si však za úkol především zmapovat možnosti, jakým způsobem uživateli tuto možnost nabídnout a jaké různé prostředky k tomu použít. Ovšem ani ti, co hledají hotová řešení, samozřejmě nepřijdou zkrátka.

Předpoklady

Hlavním předpokladem použití alternativních stylů je dokument napsaný v čistém a sémanticky správném XHTML, formátovaný pomocí kaskádových stylů. Platí, že čím větší množství formátování nechal designér na kaskádových stylech, tím větší možnosti se mu naskýtají pro použití stylů alternativních. Pokud si například dal tu práci a vytvořil celý layout stránky v CSS, může uživateli dát na výběr i z více layoutů stránky, může mu umožnit vypínat části stránky, které pro něho nejsou důležité a podobně. Oproti tomu řešení rozvržení pomocí tabulek má za výsledek, že uživateli mohou být nabídnuta tak nanejvýš barevná schémata.

Jak na to?

Musíme si ujasnit, jakou technologii k výměně stylů použijeme. V podstatě máme tři možnosti. Výsledkem by měl být systém, který všechny tyto možnosti skloubí tak, aby se vzájemně doplňovaly a kompenzovaly nevýhody svých protějšků.

Vkládání stylů prostřednictvím XHTML

První možnost nám nabízí samotné XHTML využitím atributů elementu link. Toto řešení má tu výhodu, že k jeho realizaci nepotřebujete nic jiného než XHTML. Skrývá však v sobě jednu zásadní nevýhodu. Uživatel musí používat prohlížeč, který umí s takto definovanými styly pracovat. A jak určitě tušíte, situace na poli prohlížečů není v tomto ohledu příliš radostná.

Klientské skriptování

Další možnost skýtá skriptování na straně klienta. Výhodou tohoto řešení je fakt, že se stránka při požadavku na změnu stylu nemusí znova načítat, ale jednoduše se pouze překreslí dle nově zvoleného stylu. Nevýhoda tohoto řešení je úzce spjata s obecnou problematikou klientského skriptování, respektive JavaScriptu jako jediného rozumně použitelného klientského jazyka. Není pro vás asi žádnou novinkou, že různé prohlížeče (a jejich verze) podporují a vysvětlují si JavaScript různě a s podporou standardu DOM jsou občas trochu na štíru. Výsledkem tedy je, že se musí budovat robustní skript, počítající s nekompatibilitami jednotlivých prohlížečů.

Skriptování na straně serveru

Zařídit výměnu skriptu na straně serveru se může jevit jako nejrozumnější řešení. Skript je interpretován na serveru, tedy odpadají starosti s nekompatibilitou jako u JavaScriptu. Nevýhoda je ovšem v tom, že požadavek na změnu skriptu musí ošetřit server a znovu načíst stránku, což samozřejmě znamená určitou časovou prodlevu. Navíc si ukážeme, že toto řešení svým způsobem podrývá sémantiku dokumentu.

Vkládání stylů na úrovni dokumentu

Jednou z možností vložení stylu (jednoho) do stránky je použití elementu link. Takto například nadefinujeme stránce styl „style1.css“: <link href="style1.css" type="text/css" rel="stylesheet" media="all" />. Nyní si stručně popíšeme význam atributů tohoto elementu:

• href: URI adresa souboru se stylem
• type: MIME typ souboru, pro CSS vždy text/css
• rel: vztah odkazovaného dokumentu k cílovému
• media: určení médií, pro které je tento styl určen
• title: jméno stylu

Opakovaným použitím elementu link lze samozřejmě přiřadit stránce více stylů. My ovšem nechceme, aby se na naši stránku aplikovaly všechny styly najednou, ale pouze ty, které si uživatel vybere.

Obecně můžeme rozdělit externí stylové soubory do třech kategorií: stálé (persistent), alternativní (alternate) a preferované autorem (author preferred).

Stálé styly

Stálý styl je nejjednodušším přiřazením stylu dokumentu. Jde o styl, který bude aplikován pokaždé. Do takového stylu je tedy vhodné umístit všechna stylová pravidla, která se vyskytují shodně ve všech alternativních stylech. Chtějme například, aby mohl uživatel měnit barvu textu a nic jiného. Bylo by zbytečným plýtváním místem, kdyby všechny styly obsahovaly všechna pravidla, když se budou lišit pouze v barvě textu. Takže do stálého stylu vložíme všechna společné pravidla a v alternativních stylech použijeme pouze rozdílné barvy.

Stálý styl nadefinujeme jednoduše tak, že atributu rel přiřadíme hodnotu „stylesheet“. Atribut title je nutno v tomto případě úplně vynechat! Přiřaďme tedy našemu fiktivnímu dokumentu stálý styl „base_style.css“: <link href="base_style.css" type="text/css" rel="stylesheet" />.

Alternativní styly

Dále nadefinujeme všechny alternativní styly (v našem případě třeba „alt_style1.css“ a „alt_style2.css“). Mezi alternativními styly si pak bude uživatel moci vybírat. Platí pravidlo, že jednotlivé alternativy jsou vzájemně výlučné, což znamená, že vždy je na stránku aplikována nejvýše jedna alternativa.

Alternativní styl se popíše pomocí hodnoty „alternate stylesheet“ atributu rel. Každý alternativní styl musí mít také přiřazeno jméno pomocí hodnoty atributu title. Tato hodnota se použije v uživatelském rozhraní pro výběr konkrétního stylu. Takto tedy nadefinujeme zmíněné styly jako alternativní:

<link href=“alt_style1.css“ type=“text/css“ rel=“alternate stylesheet“ title=“1. alternativní styl“ />
<link href=“alt_style2.css“ type=“text/css“ rel=“alternate stylesheet“ title=“2. alternativní styl“ />

Preferovaný styl

Nyní zbývá poslední úkol, musíme stanovit výchozí alternativní styl, tedy jinak řečeno tu alternativu, která se zobrazí při prvním příchodu na stránku. Preferovaný alternativní styl se definuje stejně jako styl stálý, ale navíc má přiřazenu hodnotu atributu title. V tomto případě zvolíme za preferovaný styl soubor „pref_style.css“: <link href="pref_style.css type="text/css" rel="stylesheet" title="preferovaný alternativní styl" />.

Sdružování stylů

XHTML nabízí ještě jednu poměrně zajímavou možnost, a to sdružit více fyzických stylů do jedné volby. Například mějme alternativní styly „alt_style3a.css“ a „alt_style3b.css“ a chtějme, aby se oba dva aplikovaly zároveň, tedy, aby se v uživatelské nabídce zobrazovaly jako jediná volba. Řešení je prosté. Stylům, které mají být sdružené, přiřadíme stejnou hodnotu atributu title:

<link href=“alt_style3a.css“ type=“text/css“ rel=“alternate stylesheet“ title=“3. alternativní styl“ />
<link href=“alt_style3b.css“ type=“text/css“ rel=“alternate stylesheet“ title=“3. alternativní styl“ />

Následuje fragment XHTML kódu, ve kterém jsou všechny definice různých stylů pohromadě:

<link href=“base_style.css“ type=“text/css“ rel=“stylesheet“ />
<link href=“pref_style.css“ type=“text/css“ rel=“stylesheet“ title=“preferovaný alternativní styl“ />
<link href=“alt_style1.css“ type=“text/css“ rel=“alternate stylesheet“ title=“1. alternativní styl“ />
<link href=“alt_style2.css“ type=“text/css“ rel=“alternate stylesheet“ title=“2. alternativní styl“ />
<link href=“alt_style3a.css“ type=“text/css“ rel=“alternate stylesheet“ title=“3. alternativní styl“ />
<link href=“alt_style3b.css“ type=“text/css“ rel=“alternate stylesheet“ title=“3. alternativní styl“ />

V tomto konkrétním případě bude vždy aplikován styl „base_style.css“. Při prvním vstupu na stránku bude navíc aplikován preferovaný alternativní styl „pref_style.css“. V příslušném menu bude na výběr ze tří položek alternativních stylů. Položka „3. alternativní styl“ bude aktivovat dva fyzické soubory, „alt_style3a.css“ a „alt_style3b.css“.

Podpora a realizace v prohlížečích

Jak asi tušíte, zdaleka není všechno zlato, co se třpytí. V tomto případě je hlavním zádrhelem skutečnost, že uživateli musí nabídku změny stylu zprostředkovat samotný prohlížeč. A bohužel nejrozšířenější prohlížeč, Microsoft Internet Explorer, tuto možnost (překvapivě) nepodporuje. Jak Opera, tak Mozilla poskytují uživateli jednoduchou nabídku, v níž si může vybrat, který nabízený styl se má na stránku aplikovat. Opera v menu View | Style:

Mozilla má podobnou nabídku schovanou v menu View | Use Style:

Oba prohlížeče tedy umožňují vybrat jeden z alternativních stylů a navíc umožňují všechny alternativní styly vypnout a ponechat aplikovaný pouze základní styl. Ani jeden z prohlížečů ale nepracuje s výběrem stylu intuitivním způsobem, který by předpokládal, že zvolený styl se bude aplikovat na celém webu. Přechodem na jinou stránku (i když je na stejném webu a je na ní definována úplně stejná množina alternativních stylů) nebo i prostým obnovením stránky dojde opět k aplikování základního a preferovaného stylu. Toto je poměrně zásadní nedostatek, protože takto je princip alternativních stylů devalvován na věčné vybírání při každém přechodu na novou stránku. Implementace mechanismu, který by si pamatoval zvolený styl pro již navštívenou stránku, by rozhodně nebyla k zahození.

Ještě je nutno si ujasnit, jak bude stránka zpracována v prohlížeči, který nepodporuje alternativní styly. Na tento případ naštěstí W3C dobře pamatovalo. Takový prohlížeč vůbec nerozumí hodnotě „alternate stylesheet“, proto tyto definice úplně ignoruje. Ale rozumí hodnotě „stylesheet“, a proto aplikuje jak stálý, tak i preferovaný styl. Tedy uživatelé budou ochuzeni pouze o alternativní styly, ale dokument bude formátován přesně podle představ designéra.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.