Štítky článku: •  

Kompatibilita browserů II

V minulém článku jsem analyzoval schopnosti prohlížečů internetových stránek (browserů) vypořádat se s novými elementy jazyka HTML5 a jejich atributy. Nyní se podíváme na jejich schopnosti z hlediska jazyka CSS3.

Jak už jsem zmínil, po letech sporů o další směřování vývoje webových stránek se zdá, že se prosadí kombinace (x)HTML5 a CSS3. Po létech tápání a pokusů jak umravnit sémantický jazyk HTML 4 a prezentační jazyk CSS 2.1 (+ dílčí extravagance jednotlivých prohlížečů) posunem k jazyku XML se nakonec jeví nejschůdnější cestou právě přechod k jazykům HTML5 (a možná brzy 6) a stylovacímu jazyku CSS 3. Základním smyslem je ušetřit zbytečné přenosy dat mezi klientem a serverem (zjednodušeně řečeno: jakoby se browsery měly začít chovat jako samostatné operační systémy a to, co mohou vypočítat samy, nepožadují zbytečně po už tak dost vytížených serverech).

Podobně můžeme sledovat nárůst technologie AJAX (Asynchronous JavaScript and XML), vývoj interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání ze serveru. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů.

Pro ty, kteří nejsou až tak zběhlí v psaní webových aplikací, vysvětlím: jazyk HTML má být čistě sémantický, tzn. vymezuje bloky obsahu pouze významově (toto je nadpis, toto odstavec, toto je seznam) téměř bez vlivu na vzhled dané části stránky, a prezentační jazyk CSS, který prohlížeči jasně říká, jak má ta, či ona věc ve stránce vypadat.

(Pak samozřejmě následují vyšší programovací jazyky, např. PHP, nebo ASP, které umožňují dynamické generování obsahu stránek podle požadavku klienta, velmi často tak, že vlastní obsahové fragmenty stránek jsou uloženy v databázi (typicky MySQL, nebo SQL) a programový jazyk je na požadavek klienta vybere, setřídí a prostřednictvím jazyka HTML odešle prohlížeči.)

V této stati se tedy podíváme na analýzu schopností dnešních browserů z hlediska jazyka CSS 3:

Abychom byli schopni definovat, jak má ta, nebo ona věc ve stránce vypadat, používáme v CSS takzvané selektory (hloupý český překlad by asi zněl „vybírače“), takže raději zůstaneme u anglicismu. Protože prohlížeče pracují mechanismem pre-procesingu, tj. nejprve si přečtou, co mají vykreslit (HTML), pak si přečtou jak to mají vykreslit (CSS), případně vypočtou nekonkrétně zadané hodnoty a mechanismem dědičnosti dosadí rodičovské parametry, případně vyřeší konflikty hodnot, a až nakonec danou stránku vykreslí do okna.

Zápis v CSS vypadá nejčastěji takto:

selektor {vlastnost: hodnota; vlastnost2: hodnota2; atd.}

Jak jsou dnešní prohlížeče na selektory schopny reagovat?

Test CSS3 kompatibility browserů k 25/1/2012
Browser Chrome 16.0.912.75 na Win. 7 Firefox 9.0.1 na Win. 7 Internet Explorer 9.0 na Win. 7 (Com­pa­ti­ble) Internet Explorer 9.0 na Win. 7 Opera 11.50 na Win. 7 Safari 5.1.2 na Win. 7
Celkové skóre z 574 testů 574 574 327 574 574 574

Shrnutí:
Browser Chrome 16.0.912.75 Firefox 9.0.1 IE 9.0 (Com­pa­ti­ble) IE 9.0 Opera 11.50 Safari 5.1.2
Funkční selektory 41 41 11 41 41 41
Chybující sel. 0 0 4 0 0 0
Nepodporováno 0 0 26 0 0 0

Analýza selektorů
Browser Chrome 16.0.912.75 Firefox 9.0.1 IE 9.0 (Com­pa­ti­ble) IE 9.0 Opera 11.50 Safari 5.1.2
Selektor Poč. testů Chyb v [%]
* 1 OK OK OK OK OK OK
E 2 OK OK OK OK OK OK
.class 6 OK OK OK OK OK OK
#id 3 OK OK OK OK OK OK
E F 2 OK OK OK OK OK OK
E > F 3 OK OK OK OK OK OK
E + F 3 OK OK OK OK OK OK
E[attribute] 7 OK OK 29 OK OK OK
E[attribute=value] 17 OK OK OK OK OK OK
E[attribute~=value] 17 OK OK 6 OK OK OK
E[attribute|=value] 19 OK OK 5 OK OK OK
:first-child 7 OK OK 14 OK OK OK
:lang() 11 OK OK 45 OK OK OK
:before 1 OK OK 100 OK OK OK
::before 1 OK OK 100 OK OK OK
:after 1 OK OK 100 OK OK OK
::after 1 OK OK 100 OK OK OK
:first-letter 1 OK OK OK OK OK OK
::first-letter 1 OK OK 100 OK OK OK
:first-line 1 OK OK OK OK OK OK
::first-line 1 OK OK 100 OK OK OK
E[attribute^=value] 20 OK OK 15 OK OK OK
E[attribute$=value] 20 OK OK 15 OK OK OK
E[attribute*=value] 16 OK OK 19 OK OK OK
E ~ F 3 OK OK OK OK OK OK
:root 1 OK OK 100 OK OK OK
:last-child 7 OK OK 71 OK OK OK
:only-child 5 OK OK 100 OK OK OK
:nth-child() 88 OK OK 53 OK OK OK
:nth-last-child() 88 OK OK 53 OK OK OK
:first-of-type 10 OK OK 70 OK OK OK
:last-of-type 10 OK OK 70 OK OK OK
:only-of-type 5 OK OK 60 OK OK OK
:nth-of-type() 88 OK OK 53 OK OK OK
:nth-last-of-type() 88 OK OK 53 OK OK OK
:empty 6 OK OK 33 OK OK OK
:not() 4 OK OK 50 OK OK OK
:target 3 OK OK 33 OK OK OK
:enabled 2 OK OK 50 OK OK OK
:disabled 2 OK OK 50 OK OK OK
:checked 2 OK OK 50 OK OK OK

Testování jsem prováděl na stránce http://tools.css3.info/selectors-test/test.html, z testu byly abstrahovány pseudotřídy :hover, :active, :focus a :selection, i když jsou velmi užitečné.

Z testů můžeme tedy učinit shrnutí: selektory pracují velmi dobře ve všech moderních prohlížečích. (Samozřejmě MSIE < 9 nejsou ani náhodou moderními prohlížeči a proto naprosto nechápou, která bije.)

Závěr: Pokud píšete moderní webové stránky, používejte v pohodě všechny výše uvedené selektory a na těch pár hlupců, kteří si nejsou ochotni prohlížeč upgradeovat, se v pohodě vybodněte!!!

Příště se podíváme na CSS 3 vlastnosti a jejich hodnoty.

Autor článku: | Vydáno: | Přečteno: 1 980 × | Prestiž Q1: 6,07

+5 plus Známkuj článek minus –2

Interní diskuse

Komentáře

Článek má 0 komentářů.

Pravidla pro diskutující

Přidáním komentáře souhlasíte s tím, že budete dodržovat základní pravidla slušné výměny názorů. Vítám jejich střet, ale snažte se je vždy vést v rámci kultivované debaty. Bude-li se někdo chovat jako sprostý nevychovanec, pokud bude urážet ostatní komentující, nebo mi bude zanášet diskusi nevyžádanou reklamou, takové příspěvky nekompromisně zablokuji. Na oplátku slibuji, že i kontroverzní příspěvky nebudu editovat, ani mazat, pokud neporušíte pravidla zmíněná výše. Za deset porušení těchto pravidel budete z diskuse nekompromisně a navždy vyřazeni (včetně IP adresy). PeTaX

Článek už je přlíliš starý. Diskuse k němu byly uzavřeny.

Dosud bez komentářů

Svobodný svět

Jen svoboda jednotlivce vede ke svobodné společnosti

top