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:
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.
Mohlo by vás také zajímat
-
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
9 nejzajímavějších doménových koncovek
19. srpna 2024 -
Jak zabezpečit váš chytrý telefon před kybernetickými hrozbami
30. listopadu 2023
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024