CSS 3: rozdovádět se, nebo ještě chvíli počkat?

Implementace CSS 3 jsou v plném proudu, a to skýtá webdesignérům příležitost se na webových stránkách jaksepatří rozdovádět.

Nebylo by však lepší ještě chvíli počkat? Je tu totiž jeden velký zádrhel, o němž se však příliš nemluví.

Zpátky do minulosti

Před časem se pod mým článkem o nových možnostech stylování ohraničení elementů objevily dva komentáře. Ten první obsahoval varování před používáním vlastností z CSS 3 s odůvodněním, že je Internet Explorer nepodporuje. V tom druhém se nové CSS vlastnosti naopak vřele doporučovaly a připomínalo se, že chybějící podporu v některých prohlížečích lze vyřešit např. pomocí javascriptových knihoven. Ani na jeden z těchto komentářů jsem nezareagoval. Jednak jsem nikomu nechtěl vyvracet jeho názor a jednak jsem se k otázce, zda nové vlastnosti používat, či ne, vyjádřil už v tom článku, když jsem stručně upozornil na to, že prvotní implementace nebývají vždy důsledné a někde může podpora nových vlastností chybět úplně. Pak mě napadlo, že pouhé stručné upozornění na tento problém, vedené v obecné rovině, asi nebude dostačující. Onen problém je dle mého soudu poměrně závažný, o to závažnější, že o něm není téměř zmínky, jakoby ani neexistoval.

Skutečnost je taková, že vývojáři prohlížečů se snaží rychle implementovat HTML 5 a CSS 3 a ještě rychleji se s tím předvést. Vskutku zběsilými rychlíky jsou vývojáři IE. Zatímco IE 8 byl zastaralý ještě dřív, než vůbec vyšel, IE 9 je dravým skokem do nejnovějších, za žhava rozvíjených technologií. Jak to v Microsoftu tak rychle zvládli? To je otázka, která zneklidňuje všechny, kteří si dobře pamatují na IE 6, a nepatří proto k entusiastům udílejícím IE pomyslné medaile za implementaci standardů. IE 6 byl totiž ve své době též takovým dravým skokem vpřed. Podporoval tehdy nové technologie jako AJAX, XML, PNG, CSS 2. Potíž spočívala v tom, že tato podpora byla ve většině případů nedůsledná, polovičatá, nebo dokonce vadná. Co se týče CSS, zde byla situace dosti tristní – nejednoho webdesignéra přešla radost z práce, když u IE neustále narážel na rozpory se standardem, na nepodporu některých užitečných selektorů a vlastností i na implementační chyby, grafiky zase na IE rmoutila hlavně nepodpora průhlednosti u PNG obrázků. V takovém stavu tedy byl tehdejší (2001) nejprogresivnější internetový prohlížeč na světě.

Poloviční podpora

IE 9 ale možná překvapí a ukáže, že zlatou placku už před koncem závodu si po právu zaslouží. To se ostatně brzy uvidí: finální verze je na spadnutí. U ostatních prohlížečů je to ovšem beznadějné. Ambice vydávat alespoň dvě verze za rok vede k tomu, že jsou vydávány nedodělky, u kterých je sice avizována podpora toho či onoho, ve skutečnosti však často jde jen o pouhý náznak implementace. Rozhodnutí, jestli používat či nepoužívat nové vymoženosti, by proto měla předcházet racionální úvaha, zda riskovat či raději neriskovat, že v některém prohlížeči bude něco špatně fungovat nebo se špatně zobrazí.

Webdesignéři mají na rozdíl od webových vývojářů tu výhodu, že mnoho věcí z CSS se používá čistě jen pro efekt, takže pokud např. v IE 6 nedojde k zamýšlené změně barvy pozadí elementu poté, co se nad něj přesune kurzor myši, není nutné si z toho dělat těžkou hlavu, zvlášť když IE 6 už používá jen hrstka uživatelů. Do kategorie estetických libůstek patří kromě hover efektů i oblé rohy, stínování, průsvitnost, přechodové efekty atd. Tyto věci lze tedy bez obav používat, pokud se někde projeví jejich disfunkčnost, nic zásadního to negativně neovlivní. Jejich používání lze proto spíše doporučit, zejména oblé rohy se staly jakousi nezbytnou dekorací webových stránek. Ostatně přechod uživatelů na moderní verze prohlížečů bude kvůli nástupu druhé generace webových aplikací (viz články o HTML 5) pravděpodobně velmi rychlý. Dále, jak již bylo výše poznamenáno, chybějící podporu některých CSS vlastností lze uspokojivě vyřešit – pomocí CSS hacků, javascriptových knihoven, obrázků atd. Existují i řešení určená pouze pro IE, například toto pro doplnění průsvitnosti.

Testování

Mnoho věcí z CSS se používá jenom pro efekt, ale většina jich ovlivňuje uspořádanost obsahu, proto je žádoucí být opatrný a vše si pečlivě otestovat alespoň v IE, Firefoxu, Opeře, Safari a pro jistotu ještě v Chrome. Webových prohlížečů existuje samozřejmě více, ale většinou jsou založeny na jádře některého z jmenovaných prohlížečů. Využívaná jsou zejména jádra Gecko a WebKit. Nicméně i u prohlížečů založených na stejném jádře se teoreticky mohou projevit určité odlišnosti dané individuální optimalizací pro rychlejší zpracování kódu. Většinou se však tyto optimalizace týkají JavaScriptu, ne CSS.

Když nabádám testovat, tak myslím skutečně testovat. Ne se jenom podívat do nějakého přehledu a z něj se pokusit zjistit, co prohlížeče podporují. A nestačí to otestovat pouze na aktuálních verzích prohlížečů! Uživatelé totiž používají i starší verze. Jejich zastoupení se pohybuje od 10 % výše. To může být v absolutních číslech pěkná řádka.

Proč je důkladné testování tolik důležité? Prvotní implementace nebývají úplné a dokonalé. A když něco funguje jen částečně, bývá to zpravidla horší, než kdyby to nefungovalo vůbec. Hlavně se nenechat ukolébat tím, že v aktuální verzi daného prohlížeče vypadá vše perfektně! O verzi níže to může být úplná katastrofa.

Na webu lze najít služby, které podporu některých funkcí a features v prohlížečích testují, např. html5 test nebo test CSS selektorů. Možná existuje i nějaký nástroj, který testuje podporu CSS vlastností.

Několik základních rad

Abych jenom nestrašil ty, kteří chtějí CSS 3 používat, přidám pro ně také některé poučky, které sice asi už znají, ale jak se praví – opakování je matkou moudrosti.

Vendor prefix

Vývojáři prohlížečů z opatrnosti často implementují nové CSS vlastnosti nejprve s vendor prefixem. Tato opatrnost je sice na místě, ale webdesignéři jsou kvůli ní nuceni uvádět nejen standardní CSS vlastnost, ale i její prefixované varianty jako v tomto příkladě:

h1 {
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg); 
  transform: rotate(5deg);
}

Důležité je, aby standardní zápis byl až na konci. V CSS totiž platí, že poslední vyhrává, to poslední se aplikuje. Ono by to vlastně bylo jedno, kdyby prefixované vlastnosti působily naprosto stejně, jako jejich neprefixovaný protějšek. Většinou to taky tak je. Většinou. Ne vždy. Chris Coyier to dokumentoval na příkladu prefixované vlastnosti -webkit-border-radius.

Záložní hodnoty

CSS 3 nepřináší jen nové selektory a nové vlastnosti, přidává také nové možné hodnoty k některým starým vlastnostem. Ani tyto nové hodnoty však nelze používat bez rozmyslu. Pro případ, že by starší prohlížeče nové hodnoty neznaly, je prozíravé použít ještě jiné vhodné hodnoty. Předvedu to na následujícím příkladě:

#page {
  background-color: rgb(230,230,250);
  background-color: rgba(230,230,250,0.9)
}

Kdyby některý starší prohlížeč neakceptoval background-color: rgba(230,230,250,0.9), interpretoval by alespoň background-color: rgb(230,230,250). V každém případě by pozadí daného elementu nebylo průhledné.

Ideální řešení

Ideální by bylo, kdyby se styly daly podmiňovat. V podmínce by se testovalo, jestli prohlížeč podporuje tu či onu CSS vlastnost nebo hodnotu, a podle toho by se elementům přiřazovaly styly. Představoval bych si, že by to fungovalo na stejném principu jako Media Queries. Takový instrument však v CSS schází, zdánlivě nejlepším řešením tak jsou workaroundy jako jQuery.