Opět se vracíme k normě CSS2, která značným způsobem rozšiřuje možnosti původních kaskádových stylů. Tento článek doplňuje přehledné informace o podporu CSS2 v  nových řadách Opery a v prohlížeči Firefox.

Je až příznačné, jak radikálně se měnily požadavky na moderní prohlížeč v průběhu rozvoje internetu. Zatímco dříve byla tato aplikace posuzována především z hlediska podpory vlastních proprietárních technologií a rozšíření, v posledních letech je jasně patrný trend přikládání důrazu na bezpečnost a podporu standardů. A právě v tomto článku si shrneme situaci na poli podpory jedné z nejdůležitějších norem, druhé verze kaskádových stylů, a doplníme tak informace uvedené v jednotlivých dílech seriálu. Testovanými prohlížeči jsou Opera 7.54, třetí betaverze velmi ambiciózní Opery 8 a Firefox 1.0.1.

Selektory

Základem kaskádových stylů je bezesporu mechanismus selektorů umožňující jednoznačně definovat elementy, na které se bude aplikovat příslušný styl. O nových selektorech normy CSS2 se dočtete ve článku CSS2 – selektory, pseudotřídy a pseudoelementy. Všechny tři prohlížeče je zvládají bez problémů:

selektor syntaxe význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
univerzální selektor * všechny elementy x x x
typový selektor A všechny elementy A x x x
selektor třídy A.trida všechny elementy A s atributem class="trida" x x x
ID selektor A#mujid element A s jedinečným identifikátorem id="mujid" x x x
selektor následníka A B všechny elementy B, které jsou uvnitř elementu A x x x
selektor dítěte A>B všechny elementy B, které jsou dítětem elementu A x x x
selektor přímého sourozence A+B všechny elementy B, které mají stejného rodiče jako A jsou v dokumentu hned za ním x x x
atributové selektory A[atr] všechny elementy A, které mají nastavený atribut atr na libovolnou hodnotu x x x
atributové selektory A[atr=hod] všechny elementy A, které mají nastavený atribut atr na hodnotu hod x x x
atributové selektory A[atr~=hod] všechny elementy A, jejichž atribut atr je tvořen slovy oddělenými mezerami a jedno slovo je rovno hod x x x
atributové selektory A[atr|=hod] všechny elementy A, jejichž atribut atr začíná hod, pokračuje pomlčkou a dalšími znaky x x x

Selektory se dále dají rozšiřovat o pseudo-třídy a pseudo-elementy. Jejich podporu prezentuje následující tabulka:

pseudo-třída/pseudo-element význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
:link nenavštívený odkaz x x x
:visited navštívený odkaz x x x
:hover nad elementem je kurzor x x x
:active element je aktivován x x x
:focus element je zaměřen (focused) částečně částečně x
:lang(jazyk) element je napsán v daném jazyce x x x
:first-child element je prvním dítětem jiného elementu x x x
:first-letter první písmeno elementu x x x
:first-line první řádek elementu x x x
:before místo před elementem x x x
:after místo za elementem x x x

I zde se testované prohlížeče vyznamenaly. Jediným detailem je rozdílné předávání zaměření (focus) v Opeře a Firefoxu. Firefox podporuje předávání zaměření (v OS Windows standardně pomocí klávesy Tab) nad všemi aktivními částmi stránky (odkazy a formulářové prvky), zatímco Opera předává focus pouze mezi prvky formuláře. Proto u ní nemůžete počítat se zvýrazněním odkazů pomocí předání zaměření.

Všechny zmiňované prohlížeče správně interpretují dynamické pseudo-třídy :hover a :active a umožňují je aplikovat na libovolné elementy, ne pouze na odkazy, jako je tomu u MSIE.

@pravidla

Zavináčová pravidla rozšiřují kaskádové styly o další funkce. Umožňují import stylů, jejich cílení na určitá média, nastavení tisknutelné oblasti a definici vlastních fontů. Více se o nich dočtete ve článku CSS2 – at rules aneb pravidla zavináče. Jejich podporu znázorňuje tato tabulka:

@pravidlo význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
@import „styl.css“; importuje styl.css x x x
@import „styl.css“ media; na zařízení odpovídající media importuje styl.css x x x
@media media {} styl ve složených závorkách bude aplikován pouze na daném zařízení x x x
@font-face {} definice nového fontu
@page {} nastavení tisknutelné oblasti x x

Importování i cílení stylů zvládají všechny prohlížeče bez problémů, ani v jednom naopak není podporována dynamická definice fontů pomocí pravidla @font-face.

Nastavení tisknutelné oblasti a řízení toku textu

Pomocí vlastností uvedených uvnitř pravidla @page lze ovlivnit nastavení tisknutelné oblasti. Prohlížeče umožňují tato nastavení:

možnost/vlastnost význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
margin-left, … okraje tisknutelné oblasti x x
size velikost tisknutelné oblasti, resp. orientace dokumentu x x
stránkové pseudo-třídy :first, :left, :right pseudo-třídy pro práci s levými, resp. pravými stránkami a titulní stránkou částečně x
@page jmeno_stranky {} pojmenované stránky
page-break-before
page-break-after
zalamování před a za elementem x x x
page-break-inside zalamování uvnitř elementu x x
orphans, widows min. počet řádků na začátku/konci stránky x x

Operu provází už od šesté verze problémy s interpretací stránkových pseudotříd. Testovaná sedmičková verze dokázala správně interpretovat pseudotřídy :left a :right a naopak ignorovala :first. Pokud byla uvedena třída pro levou i pravou stranu, došlo ke zvláštnímu bugu, kdy později uvedená pseudotřída byla úplně ignorována (nešlo tedy zároveň nastavit levou i pravou stránku).

Beta Opery 8 se poučila z předchozích chyb a umožňuje téměř veškerá nastavení pomocí pravidla @page a jejich případné kombinace. Nezvládá, stejně jako její přechůdkyně, pojmenované stránky.

Firefox 1.0.1 zde úplně vyhořel, zdá se, že pravidlo @page vůbec nepodporuje.

Generovaný obsah

Druhá verze kaskádových stylů nám umožňuje vkládat do výsledného dokumentu další obsah, například text, obsah atributů nebo číslování, na začátek, respektive konec elementu pomocí již zmíněných pseudo-elementů :before a :after. Také lze elementu nastavit správné uvozovky, které se pak okolo něj budou automaticky doplňovat. O generovaném obsahu pojednává článek CSS2 – automaticky generovaný obsah. Podporu v prohlížečích zjistíte z následující tabulky:

vlastnost význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
content: „řetězec“ vloží řetězec na začátek/konec elementu x x x
content: url(„jmeno_souboru“) vloží obsah zadaného souboru x x x
content: attr(atr) vloží obsah zadaného atributu x x x
content: open_quote (close_quote) vloží otevírající/uzavírající uvozovku x x x
quotes: seznam_uvozovek definice různých uvozovek pro zanořené elementy x x
číslování vkládání číslování, vnořené číslování, … x x

V případě generovaného číslování nemám k oběma Operám žádné námitky. Bez problémů zvládají vkládání jakéhokoli obsahu před a za element a problémy jim nedělají ani uvozovky nebo číslování elementů. Naopak Firefox nezvládá různé úrovně uvozovek a vkládání číslování.

Vizuální model

Spoustu možností přineslo CSS2 do vizuálního modelu. Především přibyly nové hodnoty pro stěžejní vlastnost display. O těchto změnách se dočtete ve článku CSS2 – vizuální formátovací model. Nyní již k podpoře těchto hodnot ve sledovaných prohlížečích:

hodnota vlastnosti display podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
run-in x x
compact x x
marker
inline-table x x

Další novinkou je nastavení minimální, respektive maximální velikosti elementu:

vlastnost význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
min-width minimální šířka x x x
min-height minimální výška x x x
max-width maximální šířka x x x
max-height maximální výška x x x

A konečně také norma CSS2 definovala nové vlastnosti použitelné pro dynamické efekty vyvolané některým skriptovacím jazykem:

vlastnost význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
overflow chování elementu při přetečení x x x
clip (dle CSS2.1) nastavení zobrazované oblasti elementu x x x
visibility viditelnost obsahu elementu x x x

V této části poměrně zklamal Firefox, který nezvládá ani jednu z nových hodnot vlastnosti display. Naopak obě Opery zvládají až na jedinou výjimku všechna nastavení vizuálního modelu CSS2.

CSS2 a tabulky

Velký pokrok v CSS2 také zaznamenala podpora tabulek. V předchozí části jsme si ukázali, jak prohlížeče podporují hodnotu inline-table vlastnosti display, tedy vložení tabulky jako řádkový element. Zde je výčet dalších vlastností:

vlastnost význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
caption-side umístění popisu tabulky částečně částečně x
text-align: „znak“ zarovnání obsahu buněk na určitý znak
visibility: collapse schování části tabulky použitelné při dynamických efektech
table-layout nastavení algoritmu vykreslování tabulky x x x
border-collapse nastavení druhu okraje tabulky x x x
border-spacing mezera mezi buňkami x x x
empty-cells chování okraje u buněk bez obsahu x x x
border: hidden; zrušení okraje u zhrouceného modelu x x x

Přestože podpora CSS2 v této oblasti není tak velká jako v jiných oblastech, lze s klidným svědomím říci, že všechny důležité možnosti druhé verze kaskádových stylů jsou implementovány. Všemi testovanými prohlížeči je ignorováno pouze zarovnání na znak a speciální hodnota collapse vlastnosti visibility, určená pro dynamické skrývání řádků. Opery mají problém s umisťováním popisu tabulky pomocí vlastnosti caption-side, zvládají pouze umístění nad a pod tabulkou, ostatní vlastnosti považují za umístění nad tabulkou. Poslední poznámka se týká implicitní hodnoty vlastnosti empty-cells, u Opery to je hide, zatímco u Firefoxu show.

Polohování

Poslední skupina vlastností umožňuje umísťovat elementy mimo normální tok dokumentu. Takto se dají vytvářet takzvané CSS layouty. O polohování se dočtete více ve článku CSS2 – pozicování elementů. Následuje poslední tabulka tohoto článku reprezentující podporu polohovacích vlastností:

vlastnost význam podpora v Opeře 7.54 podpora v Opeře 8b3 podpora ve Firefox 1.0.1
position: relative relativní umístění vůči původní poloze x x x
position: absolute absolutní určení pozice x x x
position: fixed element zůstává stále na zadané pozici x x x
float nastavení elementu jako plovoucího x x x
clear zakázání obtékání elementu x x x
z-index z souřadnice elementu x x x

Ve všech testovaných prohlížečích se tedy nebojte zobrazovat jakékoli stránky s CSS layoutem, měly by je zvládnout bez problémů.

Formátování XML

Všechny tři prohlížeče dále umožňují zobrazovat obecné XML soubory. Pokud jim nepřiřadíte žádný styl, budou v Opeře všechny elementy vypsány za sebou jako řádkové elementy, přesně podle normy. Firefox naopak nabídne obsah souboru podobně jako MSIE ve formě stromového výpisu, a poznámku, že k souboru nebyl přiřazen žádný popis stylu. V opačném případě bude dokument správně naformátován podle daného stylu.

Nastavení posuvníků

Microsoft Internet Explorer přišel s možností nastavit pomocí svého rozšíření CSS barvu posuvníků (scrollbarů). Opera tuto možnost podporuje také. Ale protože jde o nestandardní rozšíření, musíte to nejdříve povolit. Provedete to přes | Tools | Preferences | Page style | zaškrtnutím možnosti Enable styling of scrollbars. V osmé verzi Opery odpovídající nabídku najdete v | Tools | Preferences | Advanced |C ontent |. Firefox toto rozšíření nepodporuje.

Souhrn

Pokud bychom hledali absolutního vítěze tohoto testu prohlížečů, stala by se jím osmá verze Opery, která staví na výborných výsledcích své předchozí verze. Firefox překvapivě v některých oblastech zaostává, neznámou je pro něj nastavování oblasti tisku. Přesto lze i o něm říci, že podporuje všechny důležité prvky CSS2 a že jde o kvalitní prohlížeč, zvláště ve srovnání s Microsoft Internet Explorerem.

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

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

Žádný příspěvek v diskuzi

Odpovědět