CSS2 – podpora kaskádových stylů v sedmičkové řadě Opery

26. listopadu 2003

•

Před delší dobou vycházel zde na Intervalu seriál o normě CSS2, která značným způsobem rozšiřuje možnosti původních kaskádových stylů. Součástí každého dílu byla i tabulka demonstrující podporu jednotlivých vlastností CSS2 v různých prohlížečích. Tento článek doplní tyto informace o podporu CSS2 v sedmičkové řadě Opery.

Pokud jste původní seriál o CSS2 pozorně sledovali, asi vám neušlo, že už starší Opera 6.x měla mnohem lepší podporu druhé verze kaskádových stylů než nejpoužívanější Internet Explorer. Podívejme se, nakolik se tato podpora ještě vylepšila v nové řadě Opery. Testování proběhlo v Opeře 7.22 na platformě Windows.

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. Opera je 7.22 všechny zvládá na jedničku:

selektor	syntaxe	význam	podpora v Opeře 7.22
univerzální selektor	*	všechny elementy	x
typový selektor	A	všechny elementy A	x
selektor třídy	A.trida	všechny elementy A s atributem `class="trida"`	x
ID selektor	A#mujid	element A s jedinečným identifikátorem `id="mujid"`	x
selektor následníka	A B	všechny elementy B, které jsou uvnitř elementu A	x
selektor dítěte	A>B	všechny elementy B, které jsou dítětem elementu A	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
atributové selektory	A[atr]	všechny elementy A, které mají nastavený atribut atr na libovolnou hodnotu	x
atributové selektory	A[atr=hod]	všechny elementy A, které mají nastavený atribut atr na hodnotu hod	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
atributové selektory	A[atr\|=hod]	všechny elementy A, jejichž atribut atr začíná hod, pokračuje pomlčkou a dalšími znaky	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.22
:link	nenavštívený odkaz	x
:visited	navštívený odkaz	x
:hover	nad elementem je kurzor	x
:active	element je aktivován	x
:focus	element je zaměřen (focused)	–
:lang(jazyk)	element je napsán v daném jazyce	–
:first-child	element je prvním dítětem jiného elementu	x
:first-letter	první písmeno elementu	x
:first-line	první řádek elementu	x
:before	místo před elementem	x
:after	místo za elementem	x

I zde podporuje Opera 7.22 všechny důležité pseudo-třídy a pseudo-elementy. Nezvládá pouze jazykovou pseudo-třídu. Pseudo-třída :focus je v Opeře zbytečná, protože nemá žádný mechanismus, jak předávat focus jednotlivým elementům. Opera podobně jako Mozilla správně interpretuje dynamické pseudo-třídy :hover a :active a umožňuje je aplikovat na libovolné elementy, ne pouze na odkazy, jak se domnívají vývojáři z Microsoftu.

@pravidla

Zavináčová pravidla dále 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.22
@import „styl.css“;	importuje styl.css	x
@import „styl.css“ media;	na zařízení odpovídající media importuje styl.css	x
@media media {}	styl ve složených závorkách bude aplikován pouze na daném zařízení	x
@fontface {}	definice nového fontu	–
@page {}	nastavení tisknutelné oblasti	x

Importování i cílení stylů zvládá Opera 7.22 bez problémů, naopak nezvládá technologii stahovatelných fontů. O využití @pravidla @page se dozvíte v následujících odstavcích.

Nastavení tisknutelné oblasti

Pomocí vlastností uvedených uvnitř @pravidla @page lze ovlivnit nastavení tisknutelné oblasti. Opera 7.22 umožňuje tato nastavení:

možnost/vlastnost	význam	podpora v Opeře 7.22
margin-left,…	okraje tisknutelné oblasti	x
size	velikost tisknutelné oblasti, resp. orientace dokumentu	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ě
@page jmeno_stranky {}	pojmenované stránky	–

Jak vidíte, Opera 7.22 zvládá možnosti @pravidla @page tak napůl. Podporuje nastavení okrajů, velikosti a orientace tisknutelné oblasti. Už původní šestková Opera měla značné problémy se stránkovými pseudo-třídami, sedmičková verze se poučila pouze částečně. Pro levé a pravé stránky lze zvlášť nastavit okraje vlastností margin, ale nikoliv velikost (resp. orientaci) pomocí size. Navíc jsem při testování asi narazil na bug, pokud použijete stránkovou pseudo-třídu :first, tak nejen že ji Opera nezná, ale navíc nesmyslně začne ignorovat i pseudo-třídy levé a pravé stránky.

Zde tedy Opera 7.22 zrovna nepřesvědčila, budiž jí ke cti, že nejdůležitější nastavení, tj. různé okraje pro levé a pravé stránky, zvládá bez problému.

Generovaný obsah

Druhá verze kaskádových stylů nám umožňuje vkládat do výsledného dokumentu další obsah, např. text, obsah atributů nebo číslování, na začátek, resp. konec elementu pomocí 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 Opeře zjistíte z následující tabulky:

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

V případě generovaného číslování nemám k Opeře 7.22 žádné námitky. Bez problémů zvládá vkládání jakéhokoliv obsahu před a za element a problémy jí nedělají ani uvozovky nebo číslování elementů.

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 v Opeře:

hodnota vlastnosti display	podpora v Opeře 7.22
run-in	x
compact	x
marker	–
inline-table	x

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

vlastnost	význam	podpora v Opeře 7.22
min-width	minimální šířka	x
min-height	minimální výška	x
max-width	maximální šířka	x
max-height	maximální výška	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.22
overflow	chování elementu při přetečení	x
clip	nastavení zobrazované oblasti elementu	x
visibility	viditelnost obsahu elementu	x

Narozdíl od předešlé šestkové verze se Opera 7.22 v implementaci těchto vlastností značně zlepšila. Nejdůležitější změnou bezesporu je, že již dokáže elementům s přetečeným obsahem správně přiřadit scrollbary, pokud je o to požádána hodnotami scroll, auto vlastnosti overflow.

CSS2 a tabulky

Velký pokrok v CSS2 také zaznamenala podpora tabulek. V minulé kapitole jsme si ukázali, že Opera 7.22 podporuje 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.22
caption-side	umístění popisu tabulky	částečně
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
border-collapse	nastavení druhu okraje tabulky	x
border-spacing	mezera mezi buňkami	x
empty-cells	chování okraje u buněk bez obsahu	x
border: hidden;	zrušení okraje u zhrouceného modelu	x

I v případě tabulek zvládá Opera všechny důležité vlastnosti, neumí pouze zarovnávat obsahy buněk pod sebe na určitý znak a nepodporuje dynamické schovávání řádků. Polohu popisu tabulky zvládá napůl, umí jej umístit nahoru a dolů, ale už ne vlevo nebo vpravo od tabulky.

Polohování

Poslední skupina vlastností umožňuje umísťovat elementy mimo normální tok dokumentu. Takto se dají vytvářet tzv. 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í v Opeře:

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

V Opeře se tedy nebojte zobrazovat jakékoliv stránky s CSS layoutem, měla by je zvládnout bez problémů.

Opera a XML

Opera dále umožňuje zobrazovat obecné XML soubory. Pokud jim nepřiřadíte žádný styl, budou všechny elementy vypsány za sebou jako řádkové elementy, přesně podle normy. V opačném případě bude dokument správně naformátován podle daného stylu.

Nastavení posuvníků

Internet Explorer přišel s možností nastavit pomocí svého rozšíření CSS barvu posuvníků (scrollbarů). Sedmičková Opera tuto možnost podporuje také. Ale protože jde o nestandardní rozšíření, musíte to nejdříve povolit. Provedete to přes File|Preferences|Page style zaškrtnutím možnosti Enable styling of scrollbars.

Problémy se zalomením

Zatím jsem Operu pořád jenom chválil, ale samozřejmě není bez chyby. Tou nejzávažnější je občasné nesprávné interpretování elementu br, za které pravděpodobně může nějaká chyba ve zpracování kaskádových stylů. Zkrátka jde o to, že sedmičková Opera v některých svých verzích zdvojí zalomení vyvolané pomocí <br /> a v jiných ho úplně ignoruje, resp. vloží místo něj nesmyslné znaky. Je zvláštní, že se tak neděje ve všech elementech, ale pouze v některých. Řešení tohoto problému sice existuje, ale není úplně dokonalé. V adresáři Styles domovského adresáře Opery vložte do souboru user.css následující dva řádky:

br:before { content: inherit !important; }
br { display: block !important; height:0 !important; }

Následně se podívejte do File|Preferences|Page style a v poli My style sheet zadejte cestu se jménem editovaného souboru (pokud tam ještě není). Pak klikněte na tlačítko Configure modes… a v následujícím formuláři zaškrtněte My style sheet pro oba módy.

Jak už jsem předesílal, ani toto řešení není bez chyby. Aplikování uvedeného stylu má totiž za následek, že všechna vícenásobná zalomení se smrsknou do jednoho.

Závěr

I přes problémy se zalamováním je sedmičková Opera moderní a výborně použitelný prohlížeč, který podporuje drtivou většinu možností CSS2. Uvidíme, jak (a zdali) na to Microsoft zareaguje a společně s novým operačním systémem konečně přijde se skutečně použitelným prohlížečem.