Individualizace stylopisů k eliminaci chyb prohlížečů – praktické postupy roku 2004

22. prosince 2004

•

Jan Bien

Tento článek informuje o tom, jaké prohlížeče uživatelé používají na konci roku 2004, předkládá praktické postupy, jak ohýbat styly pro používaný ale starý MSIE, a nastiňuje metody hledání triků pro jiné potenciálně problematické prohlížeče.

Končí rok 2004 – není ideálnějšího času k rekapitulaci procentuálního zastoupení prohlížečů na českém webu. Podle tiskové zprávy společnosti Internet Info použilo v listopadu 2004 k prohlížení českého webu 85 % uživatelů Microsoft Internet Explorer, více než 10 % uživatelů některý z prohlížečů založených na jádře Gecko (Mozilla, Firefox) a zhruba 2,5 % norský prohlížeč Opera. Zbylí uživatelé využili některý z méně významných prohlížečů. Skupinu „exploreristů“ ještě zpráva rozděluje na MSIE 5 (6,5 %), MSIE 5.5 (5 %) a MSIE 6 (52 %). Starší verze MSIE již dnes nemají význam.

Dříve, než se vůbec začneme zabývat tvorbou a individualizací stylopisů, měli bychom si ujasnit, ve kterých prohlížečích budeme podporovat a zajišťovat bezvadnou grafickou podobu stránek, u kterých oželíme vzhledové vady a, konečně, které necháme zcela bez výchozího vzhledu. K tomu nám poslouží rozdělení, do nějž se pokusíme všechny prohlížeče zařadit:

Majoritní skupina prohlížečů
- dokonalé (poslední Mozilla, Opera a MacOS Safari)
- s chybami (Microsoft Internet Exlorer 5, 5.5 a 6)
Minoritní skupina prohlížečů (ostatní prohlížeče)

V závorce uvádím prohlížeče, které do konkrétních skupin patří s ohledem na výše zmíněnou tiskovou zprávu.

Kde styly individualizovat?

V prohlížečích dokonalých se nebudeme žádnou individualizací zabývat. Budeme prostě používat pouze průnik množin funkcí podporovaných jednotlivými prohlížeči. Tento průnik je již dostatečně rozsáhlý, aby vystačil na graficky skvělé a bezvadné weby.

Pro prohlížeče s chybami (ano, mluvíme o MSIE) budeme možná muset některé fragmenty kaskádových stylů individualizovat. Některé chyby v tomto zastaralém, ale stále používaném prohlížeči jsou velmi nepříjemné, takže máme-li se držet složitější grafické předlohy, bez individualizace se neobejdeme.

Skupinu minoritních prohlížečů je nejlépe úplně od stylů „odstřihnout“, jak říkáme. Čili, snažíme se o to, aby se v nich uživateli zobrazil nestylovaný strukturovaný dokument. Je samozřejmé, že obsah webu musí být i nadále do posledního písmenka přístupný.

Jak individualizovat?

Individualizaci stylů nelze provádět živelně, vždy je nutno dodržet jistá pravidla. Není také nutno vymýšlet vše od počátku, existuje množství dobře zdokumentovaných postupů, které lze použít přímo, nebo jako základ pro vývoj vlastního postupu.

Odstřižení minoritních prohlížečů

Začněme u „odstřižení“ minoritních prohlížečů od stylopisů. Jako ideální se ukazuje připojit stylopis k dokumentu způsobem, který minoritní prohlížeče neznají. Obecně rozšířené je připojení at-pravidlem @import v elementu style:

Takto připojený stylopis odstřihne „čtyřkové“ verze prohlížečů (myšlen je MSIE a NN) a MSIE5 na systémech „Mac“. Někteří autoři používají verzi s dvojitými uvozovkami (@import "style.css";) – ta je nevýhodná v tom, že neodstřihne MacIE5, který již dnes většinou nepodporujeme. Je třeba podotknout, že za standardní je považováno připojení stylopisu k dokumentu elementem link:

Takto připojený styl znají i čtyřkové verze prohlížečů, pročež je třeba provést individualizaci přímo v souboru. Zde se ukazuje vhodné použití at-pravidla @media, které nezná v podstatě stejná skupina prohlížečů jako pravidlo @import:

@media screen, projection {
/* sady pravidel … */
}

Souhrnem stojíme tedy před následujícími možnostmi:

Připojení stylu pravidlem @import přímo v XHTML dokumentu, respektive v elementu style.
Připojení stylu elementem link a individualizace pravidlem @media ve stylopisu.

První řešení je považováno za méně vhodné, především pro jednu specifickou vlastnost, kterou někteří webdesignéři považují za nevýhodu – MSIE5+ a 6 při takto připojeném stylu začíná vykreslovat dokument ještě dříve, než je stažen stylopis. Uživateli se tak začne zobrazovat nestylovaný strukturovaný dokument a po načtení stylu se znovu celá stránka překreslí. Použijeme-li druhý způsob, MSIE začne stránku vykreslovat až po načtení celého souboru se stylopisy.

Pozn. aut.: Podotýkám, že například prohlížeč Opera nečeká na načtení stylu nikdy. Myslím si, že ani není v kompetenci webdesignéra nějak toto chování ovlivňovat – záleží na klientském prohlížeči, přesněji řečeno na jeho nastavení uživatelem.

Individualizace v MSIE

Zrekapitulujme si, v jaké fázi vývoje webu se nacházíme. Máme už dokument a k němu připojený soubor se stylopisy. V moderních prohlížečích se vše zobrazuje bezvadně a v minoritních vidíme strukturované nestylované dokumenty. V MSIE se ale potýkáme s implementačními chybami a potřebujeme zde některé fragmenty hlavního stylopisu individualizovat.

Jak již bylo naznačeno v předchozím článku, k individualizaci v MSIE bychom měli použít podmíněné komentáře. Začněme přímo ukázkou kódu, kterou považujme za nejsprávnější řešení:

Na prvním řádku standardně připojujeme soubor se stylopisy pro všechny prohlížeče. Na řádku druhém otevíráme podmíněný komentář – z hlediska specifikací normální komentář, jehož obsah by měl být ignorován každým prohlížečem, z hlediska MSIE proprietární mechanismus, přesně specifikovaný interní normou Microsoftu. Podmíněný komentář jsme postavili tak, aby byl interpretován jen v MSIE6 a nižších, čímž eliminujeme potenciální komplikace s budoucími verzemi. Na třetím řádku připojujeme soubor se stylem style-ie.css a na čtvrtém řádku podmíněný komentář končí. První styl připojí všechny prohlížeče, druhý navíc jen MSIE6 a nižší.

Možná nyní přemýšlíte, jak bychom postupovali, kdyby vyvstal požadavek na rozlišení mezi jednotlivými verzemi MSIE. (Ponecháme-li MSIE6 v režimu zpětné kompatibility, je jeho chování velmi podobné MSIE5+, což tento požadavek téměř vylučuje.) Použijeme opět podmíněné komentáře? Ano, v zásadě je použít můžeme, leč budeme se potýkat s dalším souborem se stylopisy a dalším řádkem v hlavičce HTML dokumentu. Jelikož použití CSS triků k rozlišení jednotlivých verzí MSIE v již individualizovaném stylopisu můžeme považovat za bezpečné, není důvodu se jim zde vyhýbat.

Na první pohled vše vypadá výborně. Ale abychom byli nestranní, měli bychom hovořit i o nevýhodách podmíněných komentářů. Ze zásadních jmenujme dvě:

V Microsoft Internet Exploreru se zbytečně posílá o jeden HTTP požadavek více. Následky z toho plynoucí lze sice vhodným nastavením trvanlivosti objektu a kešováním eliminovat, tím však vznikají problémy s aktualizací.
Podmíněné komentáře pokulhávají za ideálem dnešního webu tvořeného přísně oddělenou vrstvou informační (strukturované dokumenty) od vrstvy prezentační (stylové předpisy). Zde totiž část prezentační vrstvy „prosakuje“ do vrstvy informační.

Ač mají podmíněné komentáře své nevýhody, je to stále jediné správné řešení. Nesnažte se hledat nějaké jiné, „revoluční“. Výše uvedenou praktickou ukázku v tomto článku prostě do svých stránek s klidným svědomím překopírujte. Samozřejmě zůstává faktem, že nejlépe je se jakékoli individualizaci vyhnout.

Hledání vlastních triků

Vše zde zmíněné platí na „průměrném“ webu na konci roku 2004. Ale věci se mohou změnit, nebo statistiky na vašem konkrétním webu (příkladně na webu zahraničním se specifickou cílovou skupinou) ukazují jiný okruh majoritních prohlížečů, či jen do majoritní skupiny pronikne i jiný, ale hlavně a bohužel problematický prohlížeč. Pak stojíme před úkolem, jak individualizovat stylopisy právě v něm.

Vůbec nejdříve bychom se měli porozhlédnout po tom, zda prohlížeč nedisponuje vestavěným mechanismem umožňujícím individualizaci provést. Existuje-li takový mechanismus, pak není co řešit – použijeme jej a tuto kapitolu můžeme přeskočit. Pokud tomu tak není, nezbývá než najít nějaký funkční trik. Ještě před tím si ale zopakujme tři zásady, které nesmíme porušit:

Triky smíme použít pouze k eliminaci chyb v mrtvých prohlížečích.
Smíme použít pouze ty triky, které využívají nedostatečné implementace. (Triky stojící na chybné implementaci CSS použijeme pouze v krajním případě a s maximální opatrností.)
Nevalidní triky považujeme za „zakázané ovoce“.

Praktická ukázka

Zde přerušme akademické řeči a pokračujme praktickou ukázkou, jak najít CSS trik k řešení nějaké chyby. Neřešme, o jakou chybu jde, vymodelujme si raději teoretické podmínky:

K XHTML dokumentu máme připojeny dva CSS soubory, style.css a style-ie.css. Druhý jmenovaný je připojen v podmíněném komentáři a tedy přístupný všem verzím MSIE.
Potřebujeme eliminovat chybu, která se týká MSIE5. Eliminovat ji stačí tak, že postiženému prvku pro MSIE5 nastavíme šířku „50 %“, zatímco ostatním prohlížečům „33 %“.

Jak postupovat při řešení tohoto problému? V souboru style.css deklarujeme #zlobivy-prvek {width:33%}. Dále v tabulce kompatibility CSS triků najdeme ty triky, které mají ve sloupečku Windows-IE-5 písmeno N a ve sloupečku Windows-IE-6 písmeno Y. Jelikož máme na výběr více triků, snížíme jejich počet jen na ty, které využívají nedostatečnou implementaci CSS. Získáme dva triky: html*#test a p\roperty:value;. Nyní je již jedno, který vybereme. Preferujme řekněme ten druhý, jelikož je přehlednější. Do style-ie.css přidáme #zlobivy-prvek {width:50%; wid\th:33%;} a jsme na konci řešení. Ještě rekapitulace, jakou deklaraci který prohlížeč vidí:

width:33% – všechny prohlížeče kromě MSIE (bere se width:33% ze style.css)
width:50% – prohlížeče MSIE5 a 5.5 (bere se width:50% ze style-ie.css)
width:33% – prohlížeč MSIE6 (bere se wid\th:33% ze style-ie.css)

Všimněte si způsobu práce, vyplývajícího ze zúžení okruhu triků – vždy nejprve deklarujeme vlastnost pro starý prohlížeč (MSIE5) a tu pak přepíšeme deklarací, kterou interpretuje jen novější prohlížeč (MSIE6). Náš příklad byl navíc zjednodušen tím, že jsme pracovali se stylem pouze pro MSIE. Kdyby situace takto zjednodušená nebyla, museli bychom požadovat, aby všechny ostatní prohlížeče trikem prošly (museli by být označeny písmenem Y).