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.

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