CSS3 – současná implementace v prohlížečích

V tomto článku ze série o doporučení Cascading Style Sheets 3 se podíváme na současný stav implementace některých zajímavých novinek v aktuálně používaných prohlížečích.

Jak jsem již uváděl v předchozích článcích, bude trvat ještě dlouhou dobu, než se z modulů CSS3 stanou finální doporučení. Mnohé novinky jsou však velmi užitečné a někteří výrobci prohlížečů se je snaží začlenit již nyní (především pak ty, u kterých se předpokládá, že se jejich podoba změní nanejvýš kosmeticky).

Důvody pro toto chování jsou dvojí. Jednak se tak snaží výrobci zabodovat u té části uživatelů, kteří si potrpí na dodržování standardů a které mohou implementováním částí CSS3 oslovit. Pak také tito výrobci získávají technologickou výhodu, implementace třetí generace kaskádových stylů nebude znamenat takový skok a navíc již implementované části budou zároveň dobře odzkoušeny.

Momentálně asi ještě nemá příliš význam zkoumat podrobně jednotlivé prohlížeče a přesně zjišťovat, kterou novinku již implementovaly a kterou nikoli. V tomto článku bych se chtěl zaměřit na některé (dle mého názoru) zajímavé a očekávané novinky z CSS3 a jejich současnou podporu.

Co se týče prohlížečů, v tomto článku jsem se zaměřil na platformu Windows, konkrétně na poslední verze dvou nejvýznamnějších alternativních prohlížečů (pro hnidopichy, alternativních k IE), tedy Opera 8.52 a Firefox 1.5. Občas, pokud to bude mít smysl, také zmíním vývojovou verzi Opery 9.0 Preview 2. Co se týče IE6, u něj je situace jednoduchá, z CSS3 nepodporuje vůbec nic, což je dáno především jeho značným stářím. Některých efektů však lze dosáhnout jinými cestami, které zde budou samozřejmě zmíněny. A pro úplnost zde uvedu také informace získané z IE7 Beta 2.

Nové selektory

U CSS3 selektorů by se jeden mohl domnívat, že jejich podpora bude u současných prohlížečů na dobré úrovni, neboť jejich modul je v podstatě hotový a navíc přinejmenším některé z nich jsou skutečně užitečné. Pravda je však opačná, bohužel s nimi prohlížeče nijak zvlášť nespěchají a nabízí nám pouze značně omezenou část novinek:

Jak sami vidíte, dílčí úspěchy zde slaví Firefox, kterému se dívají na záda zbývající prohlížeče včetně obou testovaných beta verzí. Jde ovšem o trochu hubené vítězství, neboť nejdůležitější nové selektory, řídící se pořadím elementu ve stromu dokumentu, zůstaly zatím opomenuty. Pokud mám být upřímný, trochu mě překvapilo, že druhá beta verze IE7 zvládla alespoň něco málo ze selektorů CSS3, protože její vývojáři předem deklarovali, že podpora zatím nehotové normy rozhodně není jejich prioritou.

Průhlednost prvků

Třetí verze kaskádových stylů klade zcela oprávněně velký důraz na práci s průhledností. Tu lze nyní definovat v podstatě kdekoli, kde se zadává hodnota barvy. Prohlížeče se zatím soustředí výhradně na vlastnost opacity, což je grafický efekt, který zprůhlední celý již vykreslený obsah elementu.

Přímo dle normy implementuje tuto vlastnost zatím pouze Firefox. U Opery je situace trochu složitější, osmičková verze průhlednost nepodporuje, přicházející verze 9 ji již obsahuje přesně dle CSS3. Pro Microsoft Internet Explorer lze použít berličku v podobě statického filtru alpha, pomocí kterého lze CSS3 průhlednost výborně emulovat. Testovaná betaverze IE7 vlastnost opacity také nepodporovala.

Chtějme tedy pro dané elementy, aby se vykreslily s 50% průhledností:

div.opaque
{
  opacity: 0.5;
    /* pro Firefox a Operu 9 */
  filter:alpha(opacity=50);
    /* pro IE6 */
}

Uvedený kód asi nepotřebuje velký komentář. První pravidlo nastavuje průhlednost dle doporučení, pro IE6 je použit již zmíněný filtr alpha, přičemž je dobré si povšimnout, že hodnota použitá ve vlastnosti opacity je v tomto případě přenásobena stem.

Dovoluji si tvrdit, že průhlednost je dobře použitelná již dnes, protože v prohlížečích jí lze již dnes (respektive brzy) jednoduše dosáhnout, jak si můžete vyzkoušet.

Kulaté rohy

Na podporu kulatých rohů čeká určitě spousta designerů jak na smilování, ale bohužel to vypadá, že jejich čekání není zdaleka u konce. Přímo ze stylu jich docílíte pouze ve Firefoxu, a to použitím proprietární vlastnosti -moz-border-radius. Ta navíc funguje nesprávně, pokud jsou jí předány dvě délky. Místo toho, aby se rohy vykreslily do elipsy, je první hodnota použita na levý horní a pravý dolní roh a druhá hodnota na zbývající dva.

Pokud máte po ruce Firefox, můžete si vyzkoušet kulaté rohy.

Vícesloupcové rozvržení

Zde je situace identická s předchozí vlastností. Takzvané vícesloupcové rozvržení je podporováno opět pouze Firefoxem a opět zatím pouze pomocí proprietárních vlastností, tentokrát jsou jimi -moz-column-count, -moz-column-width a -moz-column-gap. Přesný popis těchto vlastností si můžete přečíst na stránce CSS3 Columns.

Ve Firefoxu si můžete vyzkoušet toto výborné demo vícesloupcového layoutu, které bylo uveřejněno na serveru Bytefarmers.

Media queries

Hned na začátek je dobré říci, že Media queries, tedy pokročilý popis cílového zařízení, zatím podporuje pouze Opera, a to pouze určitou část. Přesto si myslím, že uvedení této problematiky v tomto článku má své opodstatnění. Různé verze Opery jsou oblíbené hlavně na mobilních zařízeních, která jsou již ze své podstaty značně rozlišná. A právě ve spojitosti s těmito zařízeními budou media queries používány nejčastěji.

V osmé verzi Opery lze odkazovat na velikost okna, ve kterém se stránka zobrazuje (width, min-width, max-width, height, min-height, max-height), velikost zařízení, na kterém je stránka zobrazována (device-width, min-device-width, max-device-width, device-height, min-device-height, max-device-height) a poměr stran zobrazovacího zařízení (device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio). První dvě skupiny vlastností lze zadávat pouze v pixelech, poměr se zadává jako zlomek.

Příkladem použití media queries je následující styl:

@media screen and (max-width: 300px)
{
  p {color: red;}
}
@media screen and (min-width: 301px)
{
  p {color: yellow;}
}

Pokud bude okno, ve kterém zobrazujete váš dokument, větší než 300 pixelů, budou všechny odstavce psány žlutě, jinak červeně. Pozor, Opera nedělá kontrolu při změně velikosti, musíte následně použít reload okna. Toto chování si můžete vyzkoušet na příkladu.

Je dobrou zprávou, že se objevil prohlížeč, který přišel alespoň s neúplnou podporou media queries. Může to být dobré znamení do budoucna, že se tato velice užitečná vlastnost objeví i v dalších programech.

Akta Safari

Na závěr článku o podpoře CSS3 nelze nezmínit macovský prohlížeč Safari. Jeho vývojáři se skutečně snaží a výsledkem je již nyní zajímavá podpora mnoha možností třetí generace kaskádových stylů. Jako jediný je již dnes schopný používat funkci rgba(), tedy čtyřsložkový barevný model určující navíc průhlednost barvy. Což společně s podporou vlastnosti opacity znamená, že Safari si s průhledností rozumí více než dobře. Zatím unikátní je také podpora víceobrázkových pozadí. To vše společně s nejlepší podporou nových elementů a pseudoprvků (například i pseudoelementu ::selection) je jasným důkazem a dobrým znamením, že macovští vývojáři neberou CSS3 na lehkou váhu.

Souhrn

Jak je vidět, podpora vybraných rysů CSS3 zatím není na příliš vysoké úrovni. Ve Firefoxu lze vysledovat, že se jeho vývojáři snaží implementovat některé vlastnosti a zatím je testují s proprietárním prefixem -moz-. Opera rozhodně příliš nespěchá, rozdíly v implementaci mezi verzemi 8 a 9 jsou malé. Kapitolou samou pro sebe je Microsoft Internet Explorer, informace získané z druhé beta verze IE7 nejsou příliš povzbudivé, uvidíme, zdali nakonec jeho vývojáři přidají i něco víc z CSS3, nebo se především zaměří na vychytání velkého množství bugů týkajících se stylů, kterými tento prohlížeč značně trpí.

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

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