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

25. února 2011

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.

Štítky: Články, CSS

Mohlo by vás také zajímat

Nejnovější

7 komentářů

  1. Oldis

    Úno 25, 2011 v 22:07

    pro podminovani v css bych se nevyslovil, spis by se mi libilo reseni na strane servru, respektive zapisu css jednim zpusobem a nejaky framework/plugin mi do css doplni vendor prefix varianty, pripadne vygenerovani nekolika css souboru kazdy pro jinou variantu.

    Odpovědět
  2. Pavel Salvet

    Bře 1, 2011 v 9:48

    Je celkem jedno, jestli to napíšete všechno sám, nebo s pomocí nějakého pluginu. Renderovat se to bude stejně u klienta, takže je technicky vhodnější pohlídat si to tam.

    Odpovědět
  3. heptau

    Bře 2, 2011 v 13:27

    Osobne se mi podminky moc nelibi, spis bych chtel nejaky script, kterym bych to css, ktere jsem napsal, prezvykalo a doplnilo tam hacky pro pouzivane prohlizece pripadne i nejak zkomprimovalo, aby to nezabiralo zbytecne moc mista. Ja bych to ve vysledku pomalu ani nemusel na ostatnich prohlizecich kontrolovat a jen bych to poslal na server.
    Asi me muj prispevek inspiroval si neco takoveho napsat, ale kdyby nekdo o necem takovem vedel, tak si rad usetrim praci.

    Odpovědět
  4. Miroslav Ratesman Knedla

    Bře 25, 2011 v 22:31

    heptau: generátory CSS3 jsou geniálními nástroji a strejda gůůůgl ti v tom určitě pomůže … s doplněním hacků je to horší, ale i o tom jsou krásné články na zahraničních webech … ale v angličtině. Napsal bych adresy, ale asi by mě to hodilo do spamu :)

    Odpovědět
  5. daewoo

    Kvě 18, 2011 v 14:31

    Osobně styly nahrávám až JavaScriptem.Ono se totiž nejedná jen o podporu/nepodporu vlastností, ale taky o jejich rozdílnou interpretaci při stejném zápisu.Pak je třeba drobně měnit jednotky a podobně. Kapitolou samu o sobě jsou i třeba obyčejné selektory…

    Odpovědět
  6. jurby

    Čvc 14, 2011 v 15:29

    Děkuji za přehledně a srozumitelně napsaný článek o CSS3 v českém jazyce.

    Rád bych doplnil informaci ke zmíněné možnosti podmíněného formátování v CSS přes JavaScript knihovnu Modernizr, která je velmi malá a nastaví na tag HTML atribut CSS, do kterého uvede všechny možnosti, které vlastnosti v CSS3 (HTML5, popř. i další) umí zobrazit. Tak je možné podmiňovat jednoduchým způsobem v CSS.

    Zde je malý příklad:
    ————————-
    – HTML:

    – CSS:

    .canvas #logo-pres-canvas {
    …styly…
    }

    Podobně je tomu např. u podpory více obrázků na pozadí a všech ostatních vlastností.

    Jurby

    Odpovědět
  7. jurby

    Čvc 14, 2011 v 15:34

    Omlouvám se za chybu v předchozím příspěvku.

    Zde je oprava:

    „… nastaví na tag HTML atribut CSS …“ má být „nastaví na tag HTML atribut CLASS“

    HTML příklad systém odmazal, tak zde je přepis:

    tag HTML atribut CLASS = „js canvas {atd.}“

    Jurby

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *