Individualizace stylopisů k eliminaci chyb prohlížečů – teoretický přehled

Článek se na teoretické úrovni zamýšlí nad postupy individualizace stylopisů v prohlížečích zastaralých a s implementačními chybami. Z možných postupů pak vybírá ty reálné a předkládá jejich úplný seznam, ve své funkční podstatě, s nastíněním výhod a nevýhod.

Kaskádové styly patří k dnešnímu webu stejně, jako patřil Sokrates k antickým Athénám. Trend je jasný. Přísné oddělení informací od jejich formy šetří náklady a zvyšuje kontrolu nad přístupností stránek. Na nás, tvůrce webu, je ale kladen úkol nemalý. Musíme jednak ovládat principy vizuálního formátování pomocí kaskádových stylů a pak se vyhýbat implementačním chybám, jejichž počet není v používaných prohlížečích zanedbatelný.

Co hůře, některé chyby jsou natolik fatální, že se jim při zachování stejného vzhledu webu vyhnout nelze. Ty je pak možné jedině eliminovat. Prakticky se tato eliminace řeší tak, že se postiženému prohlížeči „podstrčí“ jistá deklarace nebo celé pravidlo kaskádových stylů trochu jinak, než prohlížečům ostatním. Jinými slovy, pro tento prohlížeč se individualizují kaskádové styly.

Jak teoreticky individualizovat?

Přistupme na to, že existují čtyři reálné možnosti, jak individualizovat stylopisy pro různá koncová zařízení (rozumějte prohlížeče):

1. Na straně serveru využitím identifikace prohlížeče v HTTP hlavičce požadavku.
2. Na základě detekce prohlížeče skriptem (například JavaScript) na straně klienta.
3. Využitím chyby nebo nedostatku v prohlížeči.
4. Přímo pro tento účel vyhrazeným mechanismem prohlížeče.

Proč je špatný první bod? Posuďte dva nejzásadnější důvody:

1. Neexistuje žádný normativ, který by koordinoval pravidla, jak by se prohlížeče měly v HTTP požadavku hlásit. De facto to znamená, že se mohou identifikovat, lidově řečeno, „jak se jim zamane“.
2. Nikdy nelze zajistit, aby prohlížeč nenačítal dokument z keše nějakého proxy serveru, v níž by byl uložen dokument pro prohlížeč jiný. Mimochodem, i kdyby bylo toto řešení realizovatelné, nebylo by s ohledem na úsporu přenesených dat efektivní.

Ani použití klientského skriptování by k tomuto účelu nebylo šťastné. Klientské skriptování je určeno ke zvýšení komfortu při ovládání www stránek na základě zásahu uživatele, ne však již k zajištění vzhledu bez uživatelova vědomí. Navíc by k individualizaci nedošlo v prohlížeči se zakázaným skriptování.

Zbývá přímo k tomuto účelu vyhrazený mechanismus, nebo chyba v prohlížeči. První řešení je správnější, druhé ke škodě věci používanější. Zbytek článku se tedy bude točit právě kolem těchto dvou řešení.

Individualizace vyhrazeným prostředkem prohlížeče

Znáte podmíněné komentáře v Microsoft Internet Exploreru? Ty jsou totiž výborným příkladem proprietární vlastnosti prohlížeče, ideální k individualizaci stylopisu. Takto je možné k HTML dokumentu připojit jeden externí soubor se stylovými předpisy pro všechny prohlížeče a druhý se styly pouze pro MSIE:

<link rel=“stylesheet“ type=“text/css“ href=“default.css“ />
<!–[if IE]>
  <link rel=“stylesheet“ type=“text/css“ href=“default-ie.css“ />
<![endif]–>

Po podrobnějším ohledání příkladu zjistíte, že podmíněný komentář je podle specifikace běžný HTML komentář. Žádný prohlížeč, až na Microsoft Internet Explorer, druhý soubor se styly k dokumentu nepřipojí. Jde o přesně zdokumentovaný vestavěný mechanismus navržený tak, aby neodporoval specifikacím.

Pamatujte si: Individualizovat stylopisy přímo k tomu vyhrazenými proprietárními mechanismy je jediné správné řešení. Nechci tím ale rozhodně říci, že je toto řešení ideální. Samo přizpůsobování webu koncovému zařízení se příčí webu, jakožto technologii na platformě nezávislé.

Individualizace využitím chyby nebo nedostatku prohlížeče

Někdy nelze vyhrazené mechanismy pro individualizaci využít. Nejčastějším důvodem je, že jsou méně operativní. Někdy jsou také vyloučeny díky neovlivnitelným okolnostem a v ojedinělých případech jimi problematický prohlížeč vůbec neoplývá. Individualizace se pak řeší využitím jiné chyby, nebo nedostatku konkrétního prohlížeče v implementaci kaskádových stylů. Oborová hantýrka řešení pojmenovává jako CSS trik (anglicky CSS hack).

CSS trik je konkrétní, zpravidla na znak přesný zápis stylů, který určitému prohlížeči využitím jeho chyby nebo nedostatku podsouvá jistou deklaraci nebo pravidlo jiné, než prohlížečům ostatním. CSS triky zaujímají dnes již obstojně probádané území a je jim proto na věnována nejedna www stránka. Skvělá je například tabulka CSS triků Kevina C. Smitha. Dále v článku obousměrně odkazuji mírně upravenou verzi této tabulky.

CSS triky ještě dále rozdělujeme do dvou skupin:

1. Triky využívající nedostatečné implementace CSS: Je dobré je znát, protože jde spíše o znalost chování prohlížečů, než nějakého „násilí páchaného na prohlížeči“. Tyto triky se častěji používají pro, jak říkáme, „odstřižení“ starších prohlížečů od stylopisů.
2. Triky využívající chybné implementace CSS: Zanášejí zpravidla do stylopisů jakési „smetí“ a činí je někdy nepřehlednými, jindy nejednoznačnými, či dokonce nevalidními. Je dobré se jich na veřejném webu úplně vyvarovat.

Ještě před popisem jednotlivých triků si přečtěte a dobře zapamatujte tři doporučení, jak s nimi nakládat:

1. Pokud je to jen možné, vyvarujte se triků. Ideální je, když najdete jiné řešení problému, u kterého zanikne potřeba individualizace stylopisů. Knižním příkladem je řešení chybného boxmodelu konstrukcí matrjoška (viz Implementační chyby v prohlížečích – chybné rozměry boxů).
2. CSS triky používejte pouze pro eliminaci chyb v „mrtvých prohlížečích“. (Za „mrtvé“ se považují prohlížeče, jejichž vývoj byl již ukončen.) Proč? Protože každý takový trik stojí na dvou chybách či nedostatcích – jeden nedostatek je využíván k řešení nedostatku jiného. Pakliže je prohlížeč stále vyvíjen, pak může být v budoucí verzi opraven pouze jeden z těchto nedostatků, a trik tak nebude v této verzi funkční.
3. Zcela se vyhněte trikům z druhé skupiny. Můžete je použít dočasně, když ladíte vzhled webu a potřebujete jen rychle něco vyzkoušet, ale ve finálním řešení je raději nahraďte vyhrazeným mechanismem, nebo v krajnějším případě trikem stojícím na implementačním nedostatku.

Přehled triků využívajících nedostatečné implementace CSS

Tyto triky využívají toho, že především starší prohlížeče nezvládají všechny části CSS a některé jednoduše ignorují.

Media Attribute (HTML element link)

<link media=“all“ …>
<link media=“All“ …>

Toto jsou vlastně HTML triky. Prvek link v HTML dokumentu slouží, krom jiného, k připojení stylového předpisu uloženého v jiném souboru. Připomínám povinné atributy „href“ (obsahuje cestu k souboru), „rel“ (určuje typ vazby k dokumentu, zpravidla stylesheet) a „type“ (určuje typ obsahu souboru, tedy text/css). Tabulka písmenem Y ukazuje na prohlížeče schopné touto metodou CSS soubor připojit.

@import … (At-pravidlo import)

@import ‚styles.css‘;
@import „styles.css“;
@import url(styles.css);
@import url(‚styles.css‘);
@import url(„styles.css“);

Takzvané at-pravidlo @import umožňuje na začátku stylového předpisu importovat pravidla uložená v jiném souboru. Všechny tyto zápisy jsou zcela korektní podle specifikací. V tabulce je písmenem Y poukazováno na prohlížeče, které dokáží tím kterým konkrétním způsobem soubor připojit.

@media all (At-pravidlo media)

@media all{ … }

At-pravidlo @media umožňuje vymezit sady pravidel určitým typům médií. Uvedený příklad použije předpis pro všechna média. Použít lze i @media screen { ... }, nebo zároveň pro více médií @media screen, projection { ... }. Všechny zápisy korespondují se specifikací. V tabulce je písmenem Y poukazováno na prohlížeče, které dokáží toto at-pravidlo použít.

Selector hacks

div#test { … }                     … ID Selector w/ Element
head:first-child+body div { … }    … The Owen Hack
body>div { … }                     … Child Selector
html[xmlns] div { … }              … Attribute Selector

Všechny čtyři zápisy jsou zcela korektní podle specifikace. Jde o pokročilejší selektory, které nejsou implementovány ve všech používaných prohlížečích. Tabulka písmenem Y poukazuje na prohlížeče znalé těchto selektorů.

Simplified Box Model Hack (Trik se zpětným lomítkem)

p\roperty:value;

V kaskádových předpisech se zpětné lomítko používá pro zápis znaků sady ISO 10646 v dekadickém nebo hexadecimálním tvaru. Jakékoli písmeno od „g“ až po „z“ lze předsadit zpětným lomítkem, aniž by se tím význam znaku změnil. Předsazovat nelze písmena „a“ až „f“, protože mají význam v hexadecimálním tvaru. Prohlížeče, které takto zapsané znaky podporují, jsou v tabulce vyznačeny písmenem Y. V těchto prohlížečích projdou deklarace se zpětným lomítkem.

Přehled triků využívajících chybné implementace CSS

Tyto triky využívají toho, že některé prohlížeče určité části CSS sice zpracovávají, ale chybně, tedy v rozporu se specifikací.

Box Model Hack (Çelikův trik)

voice-family:“\“}\““;
voice-family:inherit;
…

Všechny tři řádky patří do jedné konstrukce snad nejznámějšího CSS triku, jehož autorem je Tantek Çelik. Opět jde o korektní zápis neodporující specifikaci. Díky chybné implementaci v některých prohlížečích (v tabulce jsou označeny písmenem N) je zpracování sady pravidel na řádku voice-family:"\"}\""; zastaveno. Další sada pravidel je již zpracovávána normálně. Na dalším řádku je vhodné nastavit zpět implicitní hodnotu vlastnosti voice-family. Tabulka písmenem Y poukazuje na prohlížeče se správně implementovaným zpracováním řetězců. Tyto prohlížeče se proto dostanou i k dalším deklaracím.

Inline High Pass Filter

i{content:“\“/*“}
…

Trik podobný předchozímu, ovšem tento je na úrovni sad pravidel. Korektní zápis i{content:"\"/*"} některé prohlížeče považují za začátek komentáře a všechny následující sady pravidel (celý zbytek CSS souboru) proto ignorují. Tabulka písmenem Y poukazuje na ty prohlížeče, které netrpí tímto nedostatkem a přes kritický řádek bez obtíží projdou.

High Pass Filter

@import „null?\“\{„;
@import „styles.css“;

Další trik podobný Çellikovu, tento na úrovni připojení dalšího souboru. Na prvním řádku, zcela korektním, některé prohlížeče ukončí zpracování souboru. Tabulka písmenem Y poukazuje na ty prohlížeče, které netrpí tímto nedostatkem a přes řádek bez obtíží projdou.

CSS comment hacks (komentářové triky)

/* \*/ div{property:value} /* */    … Escaped Comment-End
/*/*/ property:value; /* */         … Caio’s Hack
/*/*//*/ property:value; /* */      … Fabrice’s Inversion

Nejméně přehledné jsou tyto tři triky využívající komentářů. První řádek je tvořen malým komentářem, poté sadou pravidel a opět komentářem. Některé prohlížeče takto ohraničené pravidlo nevidí, což je chyba. Podobně druhý trik je komentář před a za deklarací. Třetí řádek je celý sám o sobě pouhý komentář, leč některým prohlížečům viditelný. Tabulka u každého triku písmenem Y ukazuje na ty prohlížeče, které se k takto zapsaným stylům dostanou.

Star html bug

* html div { … }

Znak * (hvězdička) se v kaskádových stylech používá jako univerzální selektor (zastupuje libovolný prvek). Zmíněný příklad triku pracuje s elementem div, který je potomkem elementu html a tento je potomkem jakéhokoli prvku. Správně by neměl žádný prohlížeč sadu pravidel použít, protože prvek html je u běžných dokumentů vždy prvotní, rodičovský. Tabulka písmenem Y poukazuje na prohlížeče s chybou, díky které tuto sadu pravidel použijí.

The Underscore Hack (podtržítkový trik)

_property:value;

Takzvaný podtržítkový trik spočívající v deklaracích uvozených „podtržítkem“ je v českých krajích možná ten nejznámější. Některé prohlížeče (respektive Microsoft Internet Explorer ve všech verzích) obsahují chybu a takto zadané hodnoty používají, jako kdyby byly zadané bez podtržítka. Na tyto prohlížeče tabulka ukazuje písmenem Y. Ostatní prohlížeče správně deklarace ignorují. (Trik není validní.)

Odkazy a zdroje

• About Conditional Comments (MSDN)
• Cascading Style Sheets, level 2 revision 1 – W3C
• css filters (css hacks) – Kevin C. Smith (Centricle)
• CSS Filters and Hacks (dithered.com)
• CSS triky – Jan Bien (Mraveniště)

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

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