Navigace

Hlavní menu

 

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

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ů:

selektorsyntaxevýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
univerzální selektor*všechny elementyxxx
typový selektorAvšechny elementy Axxx
selektor třídyA.tridavšechny elementy A s atributem class="trida"xxx
ID selektorA#mujidelement A s jedinečným identifikátorem id="mujid"xxx
selektor následníkaA Bvšechny elementy B, které jsou uvnitř elementu Axxx
selektor dítěteA>Bvšechny elementy B, které jsou dítětem elementu Axxx
selektor přímého sourozenceA+Bvšechny elementy B, které mají stejného rodiče jako A jsou v dokumentu hned za nímxxx
atributové selektoryA[atr]všechny elementy A, které mají nastavený atribut atr na libovolnou hodnotuxxx
atributové selektoryA[atr=hod]všechny elementy A, které mají nastavený atribut atr na hodnotu hodxxx
atributové selektoryA[atr~=hod]všechny elementy A, jejichž atribut atr je tvořen slovy oddělenými mezerami a jedno slovo je rovno hodxxx
atributové selektoryA[atr|=hod]všechny elementy A, jejichž atribut atr začíná hod, pokračuje pomlčkou a dalšími znakyxxx

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-elementvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
:linknenavštívený odkazxxx
:visitednavštívený odkazxxx
:hovernad elementem je kurzorxxx
:activeelement je aktivovánxxx
:focuselement je zaměřen (focused)částečněčástečněx
:lang(jazyk)element je napsán v daném jazycexxx
:first-childelement je prvním dítětem jiného elementuxxx
:first-letterprvní písmeno elementuxxx
:first-lineprvní řádek elementuxxx
:beforemísto před elementemxxx
:aftermísto za elementemxxx

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:

@pravidlovýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
@import "styl.css";importuje styl.cssxxx
@import "styl.css" media;na zařízení odpovídající media importuje styl.cssxxx
@media media {}styl ve složených závorkách bude aplikován pouze na daném zařízeníxxx
@font-face {}definice nového fontu---
@page {}nastavení tisknutelné oblastixx-

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/vlastnostvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
margin-left, ...okraje tisknutelné oblastixx-
sizevelikost tisknutelné oblasti, resp. orientace dokumentuxx-
stránkové pseudo-třídy :first, :left, :rightpseudo-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 elementemxxx
page-break-insidezalamování uvnitř elementuxx-
orphans, widowsmin. počet řádků na začátku/konci stránkyxx-

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:

vlastnostvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
content: "řetězec"vloží řetězec na začátek/konec elementuxxx
content: url("jmeno_souboru")vloží obsah zadaného souboruxxx
content: attr(atr)vloží obsah zadaného atributuxxx
content: open_quote (close_quote)vloží otevírající/uzavírající uvozovkuxxx
quotes: seznam_uvozovekdefinice různých uvozovek pro zanořené elementyxx-
číslovánívkládání číslování, vnořené číslování, ...xx-

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 displaypodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
run-inxx-
compactxx-
marker---
inline-tablexx-

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

vlastnostvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
min-widthminimální šířkaxxx
min-heightminimální výškaxxx
max-widthmaximální šířkaxxx
max-heightmaximální výškaxxx

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

vlastnostvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
overflowchování elementu při přetečeníxxx
clip (dle CSS2.1)nastavení zobrazované oblasti elementuxxx
visibilityviditelnost obsahu elementuxxx

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í:

vlastnostvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
caption-sideumístění popisu tabulkyčástečněčástečněx
text-align: "znak"zarovnání obsahu buněk na určitý znak---
visibility: collapseschování části tabulky použitelné při dynamických efektech---
table-layoutnastavení algoritmu vykreslování tabulkyxxx
border-collapsenastavení druhu okraje tabulkyxxx
border-spacingmezera mezi buňkamixxx
empty-cellschování okraje u buněk bez obsahuxxx
border: hidden;zrušení okraje u zhrouceného modeluxxx

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í:

vlastnostvýznampodpora v Opeře 7.54podpora v Opeře 8b3podpora ve Firefox 1.0.1
position: relativerelativní umístění vůči původní polozexxx
position: absoluteabsolutní určení pozicexxx
position: fixedelement zůstává stále na zadané pozicixxx
floatnastavení elementu jako plovoucíhoxxx
clearzakázání obtékání elementuxxx
z-indexz souřadnice elementuxxx

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.

Dudek, Jan (13. 4. 2005)

CSS2 - kaskádové styly druhé generace

Autor zde zmapoval nejnovějších vlastnosti CSS2 a pustil se i na tenký led jejich podpory různými prohlížeči. Zvláštní pozornost věnoval méně obvyklým, málo rozšířeným a přitom velmi užitečným vlastnostem CSS. Tato série článků již byla uzavřena, ačkoli další pokračování nelze vyloučit.