<meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
<h2>CSS2 - podpora kaskßdov²ch styl∙ v prohlφ₧eΦφch Opera a Firefox</h2>
<p id='prepend'>Op∞t se vracφme k norm∞ CSS2, kterß znaΦn²m zp∙sobem rozÜi°uje mo₧nosti p∙vodnφch kaskßdov²ch styl∙. Tento Φlßnek dopl≥uje p°ehlednΘ informace o podporu CSS2 v nov²ch °adßch Opery a v prohlφ₧eΦi Firefox.</p>
<p>Je a₧ p°φznaΦnΘ, jak radikßln∞ se m∞nily po₧adavky na modernφ prohlφ₧eΦ v pr∙b∞hu rozvoje internetu. Zatφmco d°φve byla tato aplikace posuzovßna p°edevÜφm z hlediska podpory vlastnφch proprietßrnφch technologiφ a rozÜφ°enφ, v poslednφch letech je jasn∞ patrn² trend p°iklßdßnφ d∙razu na bezpeΦnost a podporu standard∙. A prßv∞ v tomto Φlßnku si shrneme situaci na poli podpory jednΘ z nejd∙le₧it∞jÜφch norem, druhΘ verze kaskßdov²ch styl∙, a doplnφme tak informace uvedenΘ v jednotliv²ch dφlech serißlu. Testovan²mi prohlφ₧eΦi jsou Opera 7.54, t°etφ betaverze velmi ambici≤znφ Opery 8 a Firefox 1.0.1.</p>
<h3>Selektory</h3>
<p>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 <a href='http://interval.cz/clanek.asp?article=1778' title='Dudek, Jan: CSS2 - selektory, pseudot°φdy a pseudoelementy'>CSS2 - selektory, pseudot°φdy a pseudoelementy</a>. VÜechny t°i prohlφ₧eΦe je zvlßdajφ bez problΘm∙:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>selektor</th><th>syntaxe</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<tr><td>typov² selektor</td><td>A</td><td>vÜechny elementy A</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>selektor t°φdy</td><td>A.trida</td><td>vÜechny elementy A s atributem <samp>class="trida"</samp></td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>ID selektor</td><td>A#mujid</td><td>element A s jedineΦn²m identifikßtorem <samp>id="mujid"</samp></td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>selektor nßslednφka</td><td>A B</td><td>vÜechny elementy B, kterΘ jsou uvnit° elementu A</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>selektor dφt∞te</td><td>A>B</td><td>vÜechny elementy B, kterΘ jsou dφt∞tem elementu A</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>selektor p°φmΘho sourozence</td><td>A+B</td><td>vÜechny elementy B, kterΘ majφ stejnΘho rodiΦe jako A jsou v dokumentu hned za nφm</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>atributovΘ selektory</td><td>A[atr]</td><td>vÜechny elementy A, kterΘ majφ nastaven² atribut atr na libovolnou hodnotu</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>atributovΘ selektory</td><td>A[atr=hod]</td><td>vÜechny elementy A, kterΘ majφ nastaven² atribut atr na hodnotu hod</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>atributovΘ selektory</td><td>A[atr~=hod]</td><td>vÜechny elementy A, jejich₧ atribut atr je tvo°en slovy odd∞len²mi mezerami a jedno slovo je rovno hod</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>atributovΘ selektory</td><td>A[atr|=hod]</td><td>vÜechny elementy A, jejich₧ atribut atr zaΦφnß hod, pokraΦuje pomlΦkou a dalÜφmi znaky</td><td>x</td><td>x</td><td>x</td></tr>
</table>
</div>
<p>Selektory se dßle dajφ rozÜi°ovat o pseudo-t°φdy a pseudo-elementy. Jejich podporu prezentuje nßsledujφcφ tabulka:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>pseudo-t°φda/pseudo-element</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<tr><td>:after</td><td>mφsto za elementem</td><td>x</td><td>x</td><td>x</td></tr>
</table>
</div>
<p>I zde se testovanΘ prohlφ₧eΦe vyznamenaly. Jedin²m detailem je rozdφlnΘ p°edßvßnφ zam∞°enφ (<em>focus</em>) v Ope°e a Firefoxu. Firefox podporuje p°edßvßnφ zam∞°enφ (v OS Windows standardn∞ pomocφ klßvesy Tab) nad vÜemi aktivnφmi Φßstmi strßnky (odkazy a formulß°ovΘ prvky), zatφmco Opera p°edßvß focus pouze mezi prvky formulß°e. Proto u nφ nem∙₧ete poΦφtat se zv²razn∞nφm odkaz∙ pomocφ p°edßnφ zam∞°enφ.</p>
<p>VÜechny zmi≥ovanΘ prohlφ₧eΦe sprßvn∞ interpretujφ dynamickΘ pseudo-t°φdy <code>:hover</code> a <code>:active</code> a umo₧≥ujφ je aplikovat na libovolnΘ elementy, ne pouze na odkazy, jako je tomu u MSIE.</p>
<h3>@pravidla</h3>
<p>ZavinßΦovß pravidla 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 <a href='http://interval.cz/clanek.asp?article=1805' title='Dudek, Jan: CSS2 - at rules aneb pravidla zavinßΦe'>CSS2 - at rules aneb pravidla zavinßΦe</a>. Jejich podporu znßzor≥uje tato tabulka:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>@pravidlo</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<p>Importovßnφ i cφlenφ styl∙ zvlßdajφ vÜechny prohlφ₧eΦe bez problΘm∙, ani v jednom naopak nenφ podporovßna <a href='http://interval.cz/clanek.asp?article=2711' title='Dudek, Jan: StahovatelnΘ fonty poprvΘ'>dynamickß definice font∙</a> pomocφ pravidla <code>@font-face</code>.</p>
<h4>Nastavenφ tisknutelnΘ oblasti a °φzenφ toku textu</h4>
<p>Pomocφ vlastnostφ uveden²ch uvnit° pravidla <code>@page</code> lze ovlivnit <a href='http://interval.cz/clanek.asp?article=1811' title='Dudek, Jan: CSS2 - pravidlo strßnky'>nastavenφ tisknutelnΘ oblasti</a>. Prohlφ₧eΦe umo₧≥ujφ tato nastavenφ:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>mo₧nost/vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<tr><td>size</td><td>velikost tisknutelnΘ oblasti, resp. orientace dokumentu</td><td>x</td><td>x</td><td>-</td></tr>
<tr><td>strßnkovΘ pseudo-t°φdy :first, :left, :right</td><td>pseudo-t°φdy pro prßci s lev²mi, resp. prav²mi strßnkami a titulnφ strßnkou</td><td>ΦßsteΦn∞</td><td>x</td><td>-</td></tr>
<tr><td>orphans, widows</td><td>min. poΦet °ßdk∙ na zaΦßtku/konci strßnky</td><td>x</td><td>x</td><td>-</td></tr>
</table>
</div>
<p>Operu provßzφ u₧ od ÜestΘ verze problΘmy s interpretacφ strßnkov²ch pseudot°φd. Testovanß sedmiΦkovß verze dokßzala sprßvn∞ interpretovat pseudot°φdy <code>:left</code> a <code>:right</code> a naopak ignorovala <code>:first</code>. Pokud byla uvedena t°φda pro levou i pravou stranu, doÜlo ke zvlßÜtnφmu bugu, kdy pozd∞ji uvedenß pseudot°φda byla ·pln∞ ignorovßna (neÜlo tedy zßrove≥ nastavit levou i pravou strßnku).</p>
<p>Beta Opery 8 se pouΦila z p°edchozφch chyb a umo₧≥uje tΘm∞° veÜkerß nastavenφ pomocφ pravidla <code>@page</code> a jejich p°φpadnΘ kombinace. Nezvlßdß, stejn∞ jako jejφ p°ech∙dkyn∞, pojmenovanΘ strßnky.</p>
<p>Firefox 1.0.1 zde ·pln∞ vyho°el, zdß se, ₧e pravidlo <code>@page</code> v∙bec nepodporuje.</p>
<h3>Generovan² obsah</h3>
<p>Druhß verze kaskßdov²ch styl∙ nßm umo₧≥uje vklßdat do v²slednΘho dokumentu dalÜφ obsah, nap°φklad text, obsah atribut∙ nebo Φφslovßnφ, na zaΦßtek, respektive konec elementu pomocφ ji₧ zmφn∞n²ch pseudo-element∙ <code>:before</code> a <code>:after</code>. 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 <a href='http://interval.cz/clanek.asp?article=1828' title='Dudek, Jan: CSS2 - automaticky generovan² obsah'>CSS2 - automaticky generovan² obsah</a>. Podporu v prohlφ₧eΦφch zjistφte z nßsledujφcφ tabulky:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<tr><td>content: "°et∞zec"</td><td>vlo₧φ °et∞zec na zaΦßtek/konec elementu</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>content: url("jmeno_souboru")</td><td>vlo₧φ obsah zadanΘho souboru</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>content: attr(atr)</td><td>vlo₧φ obsah zadanΘho atributu</td><td>x</td><td>x</td><td>x</td></tr>
<p>V p°φpad∞ generovanΘho Φφslovßnφ nemßm k ob∞ma Operßm ₧ßdnΘ nßmitky. Bez problΘm∙ zvlßdajφ vklßdßnφ jakΘhokoli obsahu p°ed a za element a problΘmy jim ned∞lajφ ani uvozovky nebo Φφslovßnφ element∙. Naopak Firefox nezvlßdß r∙znΘ ·rovn∞ uvozovek a vklßdßnφ Φφslovßnφ.</p>
<h3>Vizußlnφ model</h3>
<p>Spoustu mo₧nostφ p°ineslo CSS2 do vizußlnφho modelu. P°edevÜφm p°ibyly novΘ hodnoty pro st∞₧ejnφ vlastnost <code>display</code>. O t∞chto zm∞nßch se doΦtete ve Φlßnku <a href='http://interval.cz/clanek.asp?article=1845' title='Dudek, Jan: CSS2 - vizußlnφ formßtovacφ model'>CSS2 - vizußlnφ formßtovacφ model</a>. Nynφ ji₧ k podpo°e t∞chto hodnot ve sledovan²ch prohlφ₧eΦφch:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>hodnota vlastnosti display</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<p>A koneΦn∞ takΘ norma CSS2 definovala novΘ vlastnosti pou₧itelnΘ pro dynamickΘ efekty vyvolanΘ n∞kter²m skriptovacφm jazykem:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<tr><td>overflow</td><td>chovßnφ elementu p°i p°eteΦenφ</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>clip (dle CSS2.1)</td><td>nastavenφ zobrazovanΘ oblasti elementu</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>visibility</td><td>viditelnost obsahu elementu</td><td>x</td><td>x</td><td>x</td></tr>
</table>
</div>
<p>V tΘto Φßsti pom∞rn∞ zklamal Firefox, kter² nezvlßdß ani jednu z nov²ch hodnot vlastnosti <code>display</code>. Naopak ob∞ Opery zvlßdajφ a₧ na jedinou v²jimku vÜechna nastavenφ vizußlnφho modelu CSS2.</p>
<h3>CSS2 a tabulky</h3>
<p>Velk² pokrok v CSS2 takΘ zaznamenala <a href='http://interval.cz/clanek.asp?article=1874' title='Dudek, Jan: CSS2 - formßtovacφ mo₧nosti tabulek'>podpora tabulek</a>. V p°edchozφ Φßsti jsme si ukßzali, jak prohlφ₧eΦe podporujφ hodnotu <code>inline-table</code> vlastnosti <code>display</code>, tedy vlo₧enφ tabulky jako °ßdkov² element. Zde je v²Φet dalÜφch vlastnostφ:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<tr><td>caption-side</td><td>umφst∞nφ popisu tabulky</td><td>ΦßsteΦn∞</td><td>ΦßsteΦn∞</td><td>x</td></tr>
<tr><td>text-align: "znak"</td><td>zarovnßnφ obsahu bun∞k na urΦit² znak</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>border-collapse</td><td>nastavenφ druhu okraje tabulky</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>border-spacing</td><td>mezera mezi bu≥kami</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>empty-cells</td><td>chovßnφ okraje u bun∞k bez obsahu</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>border: hidden;</td><td>zruÜenφ okraje u zhroucenΘho modelu</td><td>x</td><td>x</td><td>x</td></tr>
</table>
</div>
<p>P°esto₧e podpora CSS2 v tΘto oblasti nenφ tak velkß jako v jin²ch oblastech, lze s klidn²m sv∞domφm °φci, ₧e vÜechny d∙le₧itΘ mo₧nosti druhΘ verze kaskßdov²ch styl∙ jsou implementovßny. VÜemi testovan²mi prohlφ₧eΦi je ignorovßno pouze zarovnßnφ na znak a specißlnφ hodnota <code>collapse</code> vlastnosti <code>visibility</code>, urΦenß pro dynamickΘ skr²vßnφ °ßdk∙. Opery majφ problΘm s umis¥ovßnφm popisu tabulky pomocφ vlastnosti <code>caption-side</code>, zvlßdajφ pouze umφst∞nφ nad a pod tabulkou, ostatnφ vlastnosti pova₧ujφ za umφst∞nφ nad tabulkou. Poslednφ poznßmka se t²kß implicitnφ hodnoty vlastnosti <code>empty-cells</code>, u Opery to je <code>hide</code>, zatφmco u Firefoxu <code>show</code>.</p>
<h3>Polohovßnφ</h3>
<p>Poslednφ skupina vlastnostφ umo₧≥uje umφs¥ovat elementy mimo normßlnφ tok dokumentu. Takto se dajφ vytvß°et takzvanΘ <em>CSS layouty</em>. O polohovßnφ se doΦtete vφce ve Φlßnku <a href='http://interval.cz/clanek.asp?article=1883' title='Dudek, Jan: CSS2 - pozicovßnφ element∙'>CSS2 - pozicovßnφ element∙</a>. Nßsleduje poslednφ tabulka tohoto Φlßnku reprezentujφcφ podporu polohovacφch vlastnostφ:</p>
<div class='table'>
<table cellspacing='0'>
<tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.54</th><th>podpora v Ope°e 8b3</th><th>podpora ve Firefox 1.0.1</th></tr>
<p>Ve vÜech testovan²ch prohlφ₧eΦφch se tedy nebojte zobrazovat jakΘkoli strßnky s CSS layoutem, m∞ly by je zvlßdnout bez problΘm∙.</p>
<h3>Formßtovßnφ XML</h3>
<p>VÜechny t°i prohlφ₧eΦe dßle umo₧≥ujφ zobrazovat obecnΘ XML soubory. Pokud jim nep°i°adφte ₧ßdn² styl, budou v Ope°e vÜechny elementy vypsßny za sebou jako °ßdkovΘ elementy, p°esn∞ podle normy. Firefox naopak nabφdne obsah souboru podobn∞ jako MSIE ve form∞ stromovΘho v²pisu, a poznßmku, ₧e k souboru nebyl p°i°azen ₧ßdn² popis stylu. V opaΦnΘm p°φpad∞ bude dokument sprßvn∞ naformßtovßn podle danΘho stylu.</p>
<h3>Nastavenφ posuvnφk∙</h3>
<p>Microsoft Internet Explorer p°iÜel s mo₧nostφ nastavit pomocφ svΘho rozÜφ°enφ CSS barvu posuvnφk∙ (scrollbar∙). Opera tuto mo₧nost podporuje takΘ. Ale proto₧e jde o nestandardnφ rozÜφ°enφ, musφte to nejd°φve povolit. Provedete to p°es <kbd class='mouse'>| Tools | Preferences | Page style |</kbd> zaÜkrtnutφm mo₧nosti <em>Enable styling of scrollbars</em>. V osmΘ verzi Opery odpovφdajφcφ nabφdku najdete v <kbd class='mouse'>| Tools | Preferences | Advanced |C ontent |</kbd>. Firefox toto rozÜφ°enφ nepodporuje.</p>
<h3>Souhrn</h3>
<p>Pokud bychom hledali absolutnφho vφt∞ze tohoto testu prohlφ₧eΦ∙, stala by se jφm osmß verze Opery, kterß stavφ na v²born²ch v²sledcφch svΘ p°edchozφ verze. Firefox p°ekvapiv∞ v n∞kter²ch oblastech zaostßvß, neznßmou je pro n∞j nastavovßnφ oblasti tisku. P°esto lze i o n∞m °φci, ₧e podporuje vÜechny d∙le₧itΘ prvky CSS2 a ₧e jde o kvalitnφ prohlφ₧eΦ, zvlßÜt∞ ve srovnßnφ s Microsoft Internet Explorerem.</p>
