<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))' />
<p id='prepend'>V tomto Φlßnku o budoucφm doporuΦenφ CSS3 si p°iblφ₧φme zm∞ny, kterΘ se chystajφ v modulech zab²vajφcφch se kaskßdou, d∞diΦnostφ a obdΘlnφkov²m modelem.</p>
<h3>Kaskßda a d∞diΦnost</h3>
<p>Tento modul vznikl p°edevÜφm proto, aby shrnul popis kaskßdy a d∞diΦnosti z CSS2 do jedinΘho samostatnΘho dokumentu. Je ve fßzi <em>pracovnφho nßvrhu</em> a lze oΦekßvat, ₧e ve finßle bude slouΦen s n∞kter²m jin²m modulem.</p>
<p>Jedinou podstatnou novinkou je mo₧nost p°i°adit hodnot∞ kterΘkoli vlastnosti klφΦovΘ slovo <code>initial</code>. Tφm lze vynutit, aby za jejφ hodnotu byla dosazena v²chozφ (<strong>initial</strong>) hodnota.</p>
<h3>ObdΘlnφkov² model</h3>
<p>Zatφmco v p°edchozφm modulu toho k vid∞nφ p°φliÜ nebylo, dokument zab²vajφcφ se obdΘlnφkov²m modelem (<strong>box model</strong>) to nahrazuje m∞rou vφce ne₧ vrchovatou. Konsorcium se nebßlo ud∞lat zßsadnφ zm∞ny i ve fundamentßlnφch Φßstech kaskßdov²ch styl∙ a v²sledkem je modul, kter² se v urΦit²ch Φßstech znaΦn∞ odklßnφ od druhΘ verze CSS.</p>
<p>I tento modul je zatφm ve fßzi <em>pracovnφho nßvrhu</em> a hem₧φ se r∙zn²mi poznßmkami a komentß°i autor∙, ze kter²ch je z°ejmΘ, ₧e ne vÜechny popsanΘ mo₧nosti a vlastnosti se do₧ijφ finßlnφ verze, a naopak, ₧e n∞kterΘ p°ibudou. Nßsledujφcφ text je proto nutno brßt s rezervou, p°esto jsem p°esv∞dΦen², ₧e budoucnost obdΘlnφkovΘho modelu z n∞j lze vyΦφst bez problΘm∙.</p>
<h4><code>display</code> je mrtev, a¥ ₧ije <code>display</code>!</h4>
<p>D∙kazem, ₧e se s tφm konsorcium W3C tentokrßt skuteΦn∞ p°φliÜ nepßralo, je zavr₧enφ fundamentßlnφ vlastnosti <code>display</code> ve prosp∞ch dvou nov²ch vlastnostφ, <code>display-model</code> a <code>display-role</code>. Vlastnost <code>display</code> je sice zachovßna, ale p°edstavuje pouze zkrßcen² zßpis n∞kter²ch (ale zdaleka ne vÜech) dvojic hodnot zmφn∞n²ch nov²ch vlastnostφ.</p>
<p>Vlastnost <code>display-model</code> urΦuje, jak²m zp∙sobem bude dan² element vykreslovat svoje potomky. Momentßln∞ m∙₧e nab²vat Φty° r∙zn²ch hodnot, <code>inline-inside</code>, <code>block-inside</code>, <code>table</code> a <code>ruby</code>. Vlastnost <code>display-role</code> definuje roli, kterou element hraje uvnit° svΘho rodiΦovskΘho elementu. Jeho hodnoty jsou vφcemΘn∞ znßmΘ jako hodnoty p∙vodnφ vlastnosti <code>display</code> - <code>none</code>, <code>block</code>, <code>inline</code>, <code>list-item</code>, <code>run-in</code>, <code>compact</code>, <code>table-row</code>, <code>table-cell</code>...</p>
<p>Pou₧itφ t∞chto vlastnostφ lze demonstrovat nap°φklad na hodnotßch <code>table</code> a <code>inline-table</code> vlastnosti <code>display</code>. Ob∞ urΦujφ, ₧e obsah elementu se mß formßtovat jako tabulka. Hodnota <code>table</code> znaΦφ, ₧e tabulka se chovß jako klasick² blokov² element (zjednoduÜen∞ °eΦeno, p°ed a za tabulkou je od°ßdkovßno). Naopak hodnota <code>inline-table</code> tabulce p°ikazuje, aby byla vlo₧ena p°φmo do p°φsluÜnΘho °ßdku.</p>
<p>Pokud budeme chtφt v CSS3 vytvo°it element, kter² svΘ d∞ti bude formßtovat do tabulkovΘ struktury, nastavφme mu <samp>display-model: table;</samp>. Pokud z n∞j budeme chtφt uΦinit klasickou blokovou tabulku (<samp>display: table;</samp>), dßme mu <samp>display-role: block;</samp>, pro °ßdkovou tabulku (<samp>display: inline-table;</samp>) pak <samp>display-role: inline;</samp>.</p>
<p>Musφm se p°iznat, ₧e jsem z tΘto zm∞ny lehce rozpaΦit², prohlφ₧eΦe dodnes zdaleka nezvlßdajφ vÜechny hodnoty vlastnosti <code>display</code>, dokonce i p°i urΦit²ch kombinacφch podporovan²ch hodnot majφ problΘmy, a najednou jim p°ibude spousta nov²ch mo₧nostφ. Uvidφme, jak²m zp∙sobem se poperou prohlφ₧eΦe t°eba s polo₧kou seznamu (<samp>display-role: list-item;</samp>), kterß bude zßrove≥ tabulkou (<samp>display-model: table</samp>)!</p>
<h4>NahrazovanΘ elementy</h4>
<p>V∞tÜφ kontrolu budeme mφt nad nahrazovan²mi elementy (nap°φklad elementy <code>img</code> v XHTML nahrazovanΘ obrßzkem). CSS3 se toti₧ mnohem vφce zaobφrß formßtovßnφm t∞chto element∙.</p>
<p>Vlastnosti <code>width</code>, <code>height</code> by m∞ly nov∞ p°ijφmat krom∞ stßvajφcφch hodnot i celoΦφselnou hodnotu (bez jednotek), kterß p°edstavuje nßsobek velikosti nahrazujφcφho objektu (tedy nap°φklad obrßzku). Nßsledujφcφ p°edpis znamenß, ₧e box bude dvakrßt vyÜÜφ a ÜirÜφ ne₧ obrßzek, kter² obklopuje:</p>
<div class='sample'>
img
<br />{
<br /> width: 2;
<br /> height: 2;
<br />}
</div>
<p>S nastavovßnφm rozm∞r∙ nahrazovanΘho elementu p°φmo souvisφ otßzka, jak se to projevφ na velikosti objektu, kter² jej nahrazuje (v naÜem p°φpad∞ obrßzku). Toto nov∞ ovliv≥ujφ vlastnosti <code>fit</code> a <code>fit-position</code>. Prvn∞ zmφn∞nß urΦuje, jestli a jak se majφ upravit rozm∞ry objektu v zßvislosti na velikosti definovanΘ v CSS. Lze urΦit, zda se mß objekt roztßhnout tak, aby zabral cel² obsah nahrazovanΘho elementu (hodnota <code>fill</code>, takto se chovajφ prohlφ₧eΦe nynφ), nebo jestli se mß p°evzφt pouze jedna velikost a druhß dopoΦφtat tak, aby byl pom∞r stran zachovßn (hodnoty <code>meet</code> a <code>slice</code>), respektive jestli se mß obrßzek ponechat v plnΘ velikosti (<code>none</code>). Druhß vlastnost <code>fit-position</code> urΦuje, kde se mß objekt umφstit v rßmci nahrazovanΘho elementu. Funguje podobn∞ jako <code>background-position</code> ovliv≥ujφcφ umφst∞nφ obrßzku na pozadφ.</p>
<p>S t∞mito vlastnostmi se dajφ d∞lat celkem zajφmavΘ efekty. Nßsledn² (trochu samo·Φeln²) p°φklad nastavφ vÜechny elementy <code>img</code> na dvojnßsobek velikosti obrßzku, kter² je nahradφ. Obrßzek si zachovß svoji p∙vodnφ velikost a je umφst∞n uprost°ed tohoto boxu:</p>
<div class='sample'>
img
<br />{
<br /> border: 1px solid black;
<br /> background-color: gray;
<br /> width: 2;
<br /> height: 2;
<br /> fit: none;
<br /> fit-position: 25% 25%;
<br />}
</div>
<p>P°φklad by mohl v prohlφ₧eΦi vypadat nßsledovn∞:</p>
<p>Nejzajφmav∞jÜφ novinkou na poli plovoucφch box∙ je bezesporu vlastnost <code>clear-after</code>, kterß rozÜφ°φ box tak, aby <em>konΦil a₧ pod sv²m poslednφm plovoucφm dφt∞tem</em>. Dφky tomu lze efektivn∞ vy°eÜit nap°φklad <a href='http://interval.cz/clanek.asp?article=2895' title='KuΦera, Miroslav: ProblΘmy s obrßzkov²m pozadφm v Mozille'>problΘmy s obrßzkov²m pozadφm plovoucφch prvk∙</a>, kdy pot°ebujeme prßv∞ definovanΘ chovßnφ, tedy aby se rodiΦovsk² prvek roztßhl na celou v²Üku svΘho plovoucφho dφt∞te. Nynφ tuto situaci obvykle °eÜφme p°idßnφm prßzdnΘho bloku s nastavenou vlastnostφ <code>clear</code>:</p>
<div class='sample'>
<p>
<br /> <div style="float: left;">
<br /> Obsah plovoucφho prvku
<br /> </div>
<br /> <div style="clear: left;"></div>
<br /></p>
</div>
<p>Ve t°etφ verzi kaskßdov²ch styl∙ by to m∞lo jφt mnohem jednoduÜeji:</p>
<div class='sample'>
<p style="clear-after: left">
<br /> <div style="float: left;">
<br /> Obsah plovoucφho prvku
<br /> </div>
<br /></p>
</div>
<p>Plovoucφch box∙ se t²kajφ i dv∞ dalÜφ vlastnosti, <code>float-displace</code> a <code>indent-edge-reset</code>, kterΘ ovliv≥ujφ obtΘkßnφ plovoucφch box∙. Nov∞ p∙jde lΘpe p°izp∙sobit vzdßlenost obtΘkßnφ Φi p°φpadn∞ zvolit znaΦn∞ zjednoduÜen² model obtΘkßnφ, ve kterΘm obtΘkajφcφ box bude mφt v celΘm obsahu jednotnou Üφ°ku a nebude tedy obtΘkat nad a pod plovoucφm elementem: </p>
<p>Prvnφ odstavec <samp>p</samp> na obrßzku obtΘkß tφm zp∙sobem, ₧e mß jedinou Üφ°ku, kterß se rovnß minimßlnφ Üφ°ce, kterou by m∞l p°i obtΘkßnφ klasickΘm.</p>
<h4>Rotujφcφ text je zpßtky!</h4>
<p>Na zßv∞r zde mßm jednu perliΦku, u kterΘ si v∙bec nejsem jist², jestli jde ze strany W3C o nepoda°en² vtip, nebo v²sledek intenzivnφho ponocovßnφ na jednΘ z jejich konferencφ. Na scΘnu se toti₧ op∞t dostßvß <code>marquee</code>, nechvaln∞ znßm² efekt rotujφcφho textu z prehistorick²ch dob HTML. Sotva se jej povedlo vystrnadit ze znaΦkovacφho jazyka, hned se vrßtil, tentokrßt p°φmo do stylu!</p>
<p>Rotujφcφmu textu p∙jdou nastavit parametry jako sm∞r a rychlost posouvßnφ a poΦet opakovßnφ. Jß osobn∞ doufßm, ₧e <code>marquee</code> nakonec z finßlnφ verze modulu ·pln∞ zmizφ a webdesignΘ°i nedostanou do sv²ch rukou tuto doslova zbra≥ hromadnΘho niΦenφ.</p>
<h3>Souhrn</h3>
<p>V tomto Φlßnku o CSS3 jsem se p°edevÜφm sna₧il popsat v²znamnΘ zm∞ny na poli obdΘlnφkovΘho modelu kaskßdov²ch styl∙. N∞kterΘ mohou b²t dle mΘho nßzoru skuteΦn∞ u₧iteΦnΘ (<code>clear-after</code>, vlastnosti pracujφcφ s nahrazovan²mi elementy), u jin²ch si nejsem zdaleka jist², jak na n∞ zareagujφ v²robci prohlφ₧eΦ∙ (rozd∞lenφ vlastnosti <code>display</code> do dvou samostatn²ch vlastnostφ a s tφm souvisejφcφ novΘ kombinace) a specißln∞ o <code>marquee</code> si rad∞ji nemyslφm v∙bec nic.</p>
