Navigace

Hlavní menu

 

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

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:

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

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.22
:linknenavštívený odkazx
:visitednavštívený odkazx
:hovernad elementem je kurzorx
:activeelement je aktivovánx
:focuselement je zaměřen (focused)-
:lang(jazyk)element je napsán v daném jazyce-
:first-childelement je prvním dítětem jiného elementux
:first-letterprvní písmeno elementux
:first-lineprvní řádek elementux
:beforemísto před elementemx
:aftermísto za elementemx

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:

@pravidlovýznampodpora v Opeře 7.22
@import "styl.css";importuje styl.cssx
@import "styl.css" media;na zařízení odpovídající media importuje styl.cssx
@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é oblastix

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/vlastnostvýznampodpora v Opeře 7.22
margin-left,...okraje tisknutelné oblastix
sizevelikost tisknutelné oblasti, resp. orientace dokumentux
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ě
@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:

vlastnostvýznampodpora v Opeře 7.22
content: "řetězec"vloží řetězec na začátek/konec elementux
content: url("jmeno_souboru")vloží obsah zadaného souborux
content: attr(atr)vloží obsah zadaného atributux
content: open_quote (close_quote)vloží otevírající/uzavírající uvozovkux
quotes: seznam_uvozovekdefinice různých uvozovek pro zanořené elementyx
čí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 displaypodpora v Opeře 7.22
run-inx
compactx
marker-
inline-tablex

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

vlastnostvýznampodpora v Opeře 7.22
min-widthminimální šířkax
min-heightminimální výškax
max-widthmaximální šířkax
max-heightmaximální výškax

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.22
overflowchování elementu při přetečeníx
clipnastavení zobrazované oblasti elementux
visibilityviditelnost obsahu elementux

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

vlastnostvýznampodpora v Opeře 7.22
caption-sideumístění popisu tabulkyčástečně
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í tabulkyx
border-collapsenastavení druhu okraje tabulkyx
border-spacingmezera mezi buňkamix
empty-cellschování okraje u buněk bez obsahux
border: hidden;zrušení okraje u zhrouceného modelux

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:

vlastnostvýznampodpora v Opeře 7.22
position: relativerelativní umístění vůči původní polozex
position: absoluteabsolutní určení pozicex
position: fixedelement zůstává stále na zadané pozicix
floatnastavení elementu jako plovoucíhox
clearzakázání obtékání elementux
z-indexz souřadnice elementux

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.

Dudek, Jan (26.11. 2003)