Podmíněná pravidla v CSS

Než vysvětlím hlavní téma článku, kterým jsou podmíněná pravidla v kaskádových stylech, dovolím si trochu delší obecný úvod. Svět webdesignu není ideální. Ideální nebyl a pravděpodobně ani nebude. Asi vždy tu bude řada webových prohlížečů, které ne vždy budou podporovat stejné vlastnosti kaskádových stylů. Navíc občas ty stejné vlastnosti budou podporovat trochu odlišným způsobem.

Postupně se naštěstí ustaluje (a zvětšuje) podmnožina kaskádových stylů, na které se implementace v prohlížečích shodnou (říkáme tomu interoperabilita), ale současně se objevují nové zajímavé vlastnosti, které zatím ustálené nejsou.

Jak webdesigneři problémům čelí?

Webdesigneři vymysleli několik strategií, které používají, aby rozdíly v implementaci kaskádových stylů mezi prohlížeči vyrovnali. Jedná se zejména o:

• podmíněné komentáře v Internet Exploreru
• zasílání (generování) odlišných stylů po různé prohlížeče
• CSS filtry (hacky)

Podmíněné komentáře v Internet Exploreru

Internet Explorer podporuje tzv. podmíněné komentáře v (X)HTML. Jsou populární nejspíš proto, že vyrovnání se s různými verzemi Internet Exploreru je častým úkolem webdesignerů. Webdesigner připraví stylopis společný pro všechny prohlížeče a vedle něj připraví jeden, resp. více stylopisů pro Internet Explorer, resp. jeho různé verze. Výsledek může vypadat takto:

<link rel="stylesheet" media="screen" type="text/css" href="main.css" />
<!--[if lt IE 7]><link rel="stylesheet" media="screen" type="text/css" href="ie.css" /><![endif]--> 

Zápis if lt IE 7 určuje, že daný stylopis se použije pouze u Internet Exploreru nižší verze než 7 (IE6, IE5.5, IE5 atd.). Prohlížeče jiné než Internet Explorer druhý stylopis vůbec nevidí (vidí jej jako součást HTML komentáře a komentáře se ignorují).

Nevýhody:

• jiné prohlížeče podmíněné komentáře nepodporují
• podmíněné komentáře existují na úrovni HTML a nikoliv CSS, což stěžuje tvorbu snadno udržovatelných stylopisů (související pravidla totiž umisťujeme do odlišných souborů)

Zasílání (generování) odlišných stylů po různé prohlížeče

Dalším řešením je detekovat již na serveru, který prohlížeč ke stránce přistupuje a zaslat mu kaskádové styly připravené přímo pro něj. Jedná se o úkol mnohem náročnější, než se může zdát. Už jen správná detekce prohlížečů, všech jejich verzí a variant je velmi složitá věc, kterou málokdo umí.

Autor článku za celou svou praxi nenarazil na detekci, o které by si troufl prohlásit, že je 100% bezproblémová. Detekce často fungují pro běžné prohlížeče, pokud ale používáte méně obvyklý prohlížeč, můžete mít smůlu.

S ohledem na komplexnost problematiky detekce prohlížečů neprovádí detekci často přímo tvůrce stránky, ale svěří ji nástrojům, např. platforma ASP.NET sama o sobě generuje pro řadu svých prvků odlišné vlastnosti kaskádových stylů pro různé prohlížeče.

Nevýhody:

• nespolehlivost detekce pro méně obvyklé prohlížeče
• závislost na detekčních nástrojích (s vydáváním nových prohlížečů je nutné průběžně aktualizovat i detekční nástroje)

CSS filtry (hacky)

CSS filtry (nespisovně „hacky“) jsou konstrukce, které způsobí, že ačkoliv všechny prohlížeče dostanou stejný stylopis, interpretují jej odlišně, protože některé vlastnosti před nimi skryjeme. Příkladem budiž tzv. podtržítkový hack:

.box {
  width:  150px;
  _width: 160px;
} 

V tomto příkladu provádíme korekci na odlišný box model IE. Většina prohlížečů vidí zápis:

.box {
  width: 150px;
} 

Internet Explorer verze 6 a níže vidí zápis:

.box {
  width: 150px;
  width: 160px;
} 

a podle pravidla „poslední hodnota převažuje“ nastaví width na 160px.

Použití podtržítka v našem případě zafungovalo jako filtr – některé prohlížeče tuto vlastnost „vidí“, jiné ji ignorují (odfiltrují). Filtrů existuje celá řada a objevují se nové a nové. Nemusí se vztahovat jen na jednotlivé vlastnosti, ale i na celé stylopisy.

Nevýhody:

• jedná se o „hacky“ – využití obezliček prohlížečů (často oficiálně nezdokumentovaných)
• nebývají vždy validní
• čas od času způsobí zmatení prohlížeče (např. starší verze prohlížeče Safari v některých případech zahodila zbytek stylopisu, jakmile narazila na hack používající na začátku názvu vlastnosti pomlčku nebo dvojtečku)
• jsou pro nezasvěceného nečitelné (pokud daný CSS filtr neznáte, nemůžete si být jisti, zda se jedná o záměr nebo překlep, ani které prohlížeče filtruje)

Pozn.: Existují i další strategie, např. zcela se vyhnout používání problematických vlastností a konstrukcí (sem patří i matrjoška hack).

Kde je ideální cesta? Podmíněná pravidla v CSS?

Nyní se dostáváme k jádru našeho článku. Každá z uvedených strategií má totiž své nevýhody. Ideální cestou by se (pokud vynecháme ideál, že se prohlížeče začnou chovat stejně) mohly stát podmíněné sekce přímo v kaskádových stylech, po kterých někteří webdesigneři volají. Vypadat by mohly například takto (jedná se o výše uvedený příklad v box modelem přepsaný do podmíněné podoby):

.box { 
  width: 150;
  /*[if IE]*/ width:160;
} 

Je to také CSS filtr, ale postavený na jiném základě. Proč by byl takový přístup lepší než strategie uvedené výše?

• syntaxe je samovysvětlující (pouhým přečtením zápisu vidíme, co znamená, nemusíme mít nastudované informace o CSS filtru)
• zápis je validní
• vede k tvorbě snadno udržovatelných stylopisů (související informace máme u sebe, jednotlivé filtry jsou snadno dohledatelné ručně i automatickými nástroji)

Autor článku nebyl schopen objevit nevýhody tohoto řešení. Pokud vás napadnou, podělte se s námi v komentářích.

Zmíněné řešení je ovšem jen návrhem, neexistuje ani ve specifikaci, ani jej prohlížeče nepodporují. Přesto je implementace možná (byť již zdaleka ne ideálním způsobem) a to jak na klientovi, tak na serveru.

Implementace pomocí JavaScriptu

Na klientovi můžeme podmíněná pravidla implementovat pomocí JavaScriptu (tím jsme sice závislí na JavaScriptu, ale pamatujte, že se to netýká našeho celého designu, ale jen podmíněných pravidel).

Na implementaci jsem narazil u Rafaela Lima pod názvem CSS Browser Selector. Do hlavičky stránky je třeba vložit:

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

Následně můžete ve stylopisu používat tento zápis:

.ie .box {
  width: 160;
}

.ie7 .box {
  width: 160;
}

.gecko .box {
  width: 150;
} 

Skript podle detekovaného prohlížeče nastaví kořenovému elementu dokumentu příslušné třídy a my je můžeme využívat v našich stylopisech (třída „ie“ platí pro Internet Explorer, třída „ie7“ jen pro jeho sedmou verzi atd.). Oproti příkladu uvedenému výše nejsou podmínky vyjádřené v komentáři, ale další třídou, z praktického hlediska v tom ale není velký rozdíl.

Nevýhody:

• závislost na JavaScriptu
• závislost na detekci prohlížeče (která je ne vždy spolehlivá)

Implementace na serveru

Druhou možností je implementovat podmíněná pravidla na serveru a zpracovat je skriptem (preprocesorem), který pošle prohlížeči již přefiltrovanou podobu. V takovém případě jsme vlastně elegantně zkombinovali metodu generování odlišných stylů pro různé prohlížeče s CSS filtry.

Našel jsem hned dvě implementace. Tou první je plugin pro Ruby on Rails, který je serverovým rozšířením výše zmíněného CSS browser selectoru a tou druhou je projekt Conditional CSS pro PHP a ASP.NET. Zastavme se u druhé z nich.

Conditional CSS

Projekt nabízí  bohatou syntaxi, umožňuje podmiňovat jak celá pravidla:

[if IE] .box {
  width: 250px;
  padding: 10px;
} 

tak jednotlivé vlastnosti:

.box {
  [if Gecko] -moz-border-radius:15px;
  [if ! Webkit] float: left;
  [if lte IE 6.0] margin-top: -1px; 
} 

Všimněte si, že obsahuje jak pozitivní ( [if Gecko]), tak negativní podmínky ( [if ! Webkit]) a omezení verzí ( [if lte IE 6.0]). Detekuje všechny běžné prohlížeče včetně Safari pro iPhone, více viz dokumentace.

Stylopis se zapsanými podmínkami neposíláme prohlížeči přímo, ale pomocí jednoduchého PHP nebo ASP.NET skriptu, který napřed detekuje připojený prohlížeč a podle výsledku vyhodnotí podmínky a zašle prohlížeči zpracovaný výsledek. Ten zároveň i trochu zoptimalizuje (odstraní nadbytečné bílé znaky a provede sloučení importovaných stylopisů).

Nevýhody:

• závislost na detekci prohlížeče (která je ne vždy spolehlivá)

Disclaimer: Autor článku nástroj Conditional CSS zatím v praxi nikdy nepoužil, ale vážně uvažuje o jeho využití při dalším kódování webů, kdy je potřeba web rychle odladit pro všechny prohlížeče. Dokonce si myslí, že se jedná o ideální řešení, který jak urychlí vývoj (nakódování stránky), tak usnadní následující údržbu stylopisů. Přesto, jelikož má k detekci prohlížečů nepřekonatelnou skepsi, by po dokončení webu přešel na některou jinou metodu, např. CSS filtry. Převod by provedl nahrazením podmínek za adekvátní CSS filtry (pokud takové existují) a jelikož se jedná o rutinní přepis, pokusil by se nalézt automatické řešení, které by náhradu provedlo automaticky. Tím by si mohl uchovat stylopis s podmínkami vhodný pro údržbu a vývoj, ale na produkční server dávat jeho vyexportovanou podobu.

Závěr

Pokud nyní přemýšlíte, kterou z možností si vybrat, tak dnes pro vás milí čtenáři jednoduchou odpověď nemáme. Žádný z uvedených způsobů totiž není bez problémů.

Je na vás, pro který ze způsobů se rozhodnete. A pokud některý z nich preferujete a máte pro to své důvody, podělte se o ně s námi v komentářích.

Odkazy

• Podmíněné komentáře Internet Exploreru
• CSS filtry
• Conditional CSS