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 | *A | 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 { 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.
