CSS2 – podpora kaskádových stylů v prohlížečích Opera a Firefox

13. dubna 2005

•

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.