<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>CSS3 - formßtovßnφ dokumentu pro r∙znß za°φzenφ</h2>
<p id='prepend'>DoporuΦenφ CSS2 p°ineslo oproti svΘmu p°edch∙dci mo₧nost cφlit styl na zvolenΘ mΘdium (obrazovka, tiskßrna a podobn∞) a takΘ novΘ vlastnosti pou₧itelnΘ pouze na urΦitΘm za°φzenφ. CSS3 v tomto pokraΦuje a p°inßÜφ dalÜφ mo₧nosti, jak dodat alternativnφ vzhled v zßvislosti na mΘdiu.</p>
<h3>P°esn∞jÜφ popis za°φzenφ</h3>
<p>Pro v²b∞r konkrΘtnφho mΘdia se v CSS2 dala pou₧φt pouze klφΦovß slova p°edstavujφcφ jednotlivß za°φzenφ. èlo tak nap°φklad pou₧φt blok stylu pouze pro obrazovku (<samp>@media screen {}</samp>) nebo importovat dan² p°edpis pouze v p°φpad∞ tisku na tiskßrn∞ (<samp>@import "print.css" print;)</samp>. Jist²m omezenφm byla nemo₧nost definovat danΘ za°φzenφ p°esn∞ji ne₧ pomocφ t∞chto klφΦov²ch slov.</p>
<p>To se v CSS3 zm∞nφ, na scΘnu toti₧ p°ichßzejφ <strong>media queries</strong> definovanΘ ve stejnojmennΘm modulu <strong>Media Queries</strong>. Ten se nachßzφ ve stavu <em>kandidßta na doporuΦenφ</em> a dß se tedy poΦφtat s tφm, ₧e se ji₧ p°φliÜ m∞nit nebude. Situace je lehce nep°ehlednß v tom, ₧e zßrove≥ vznikß modul <strong>Media Queries 2</strong>, kter² by m∞l p°inΘst n∞kterΘ novΘ mo₧nosti pro popis za°φzenφ. Tento dokument vÜak zatφm v∙bec nenφ k dispozici, proto v tomto Φlßnku budu Φerpat pouze z p∙vodnφho modulu.</p>
<p>Dotazy na mΘdium znaΦn∞ rozÜi°ujφ mo₧nosti v²b∞ru za°φzenφ tφm, ₧e berou v potaz i jeho parametry. Jak takov² dotaz vypadß, to si ukß₧eme na nßsledujφcφm p°φklad∞:</p>
<div class='sample'>
@media screen and (min-width: 1024px)
<br />{
<br /> /*styl pro obrazovky s rozliÜenφm alespo≥ 1024px na Üφ°ku*/
<br />}
</div>
<p>Dotaz na mΘdium je v tomto p°φpad∞ <samp>screen and (min-width: 1024px)</samp>. Ka₧d² takov² dotaz zaΦφnß typem mΘdia (<samp>screen</samp>) nßsledovan²m up°es≥ujφcφm v²razem v zßvorce, kter² mß p°ed sebou logick² operßtor <code>and</code>. Pokud chceme pou₧φt vφce dotaz∙ na mΘdium najednou, odd∞lφme je Φßrkou (kterß mß tedy v²znam logickΘho operßtoru <code>or</code>). V nßsledujφcφm p°φklad∞ bude styl pou₧it pouze v tom p°φpad∞, ₧e jde o obrazovku Üirokou nejmΘn∞ 640px a nejv²Üe 1024px, nebo o tiskßrnu:</p>
<div class='sample'>
<link href="style.css" type="text/css" rel="stylesheet" medium="screen and (min-width: 640px) and (max-width: 1024px), print" />
</div>
<p>V rßmci dotaz∙ budeme moci nap°φklad kontrolovat v²Üku a Üφ°ku zobrazovacφ plochy, respektive jejich pom∞r, schopnost zobrazovat barvy a jejich poΦet, rozliÜenφ a n∞kterΘ jinΘ hodnoty. Navφc v ji₧ zmφn∞nΘm modulu <strong>Media Queries 2</strong> by m∞ly b²t definovßny dalÜφ parametry.</p>
<p>Koncept dotaz∙ na mΘdia se mi zdß sprßvn². V dneÜnφ dob∞ se webovΘ strßnky zaΦφnajφ zobrazovat na ÜirokΘ Ükßle mobilnφch za°φzenφ, kterΘ se Φasto schovßvajφ za stejn²m typem mΘdia, aΦkoli se jednß o za°φzenφ se znaΦn∞ rozdφln²mi parametry. I proto se p°inejmenÜφm dotaz na Üφ°ku a v²Üku zobrazovacφ plochy bude hodit. Na druhou stranu je smutnou skuteΦnostφ, ₧e spousta webdesigner∙ nenφ schopna p°idat ani jednoduch² tiskov² p°edpis, kter² by z dokumentu osekal pro tisk nepot°ebnΘ prvky. Proto je otßzka, zda si tito "v²vojß°i" v∙bec vÜimnou, ₧e majφ v rukou tak siln² nßstroj pro v²b∞r za°φzenφ.</p>
<h3>Tisk v novΘm</h3>
<p>Pro reprezentaci jednΘ strßnky strßnkovΘho mΘdia se v kaskßdov²ch stylech pou₧φvß takzvan² <strong>page box</strong>, kter² lze v p°edpisu vybrat pomocφ pravidla <code>@page</code> zastßvajφcφho zde funkci selektoru. V CSS3 je pro toto pravidlo vyhrazen zvlßÜtnφ modul, <strong>Paged Media</strong>, nachßzejφcφ se momentßln∞ ve stavu <em>kandidßtskΘho doporuΦenφ</em>.</p>
<p>V druhΘ verzi styl∙ Ülo tomuto boxu nastavit pouze vn∞jÜφ okraje (<code>margin</code>) s poznßmkou, ₧e v dalÜφ verzi doporuΦenφ mo₧nß p∙jde nastavit i styl okraje (<code>border</code>) a vnit°nφ v²pl≥ (<code>padding</code>). Co₧ se v t°etφ verzi styl∙ skuteΦn∞ stalo a strßnkov² box se nynφ blφ₧φ chovßnφm ke standardnφm blok∙m tvo°en²ch pomocφ blokov²ch element∙.</p>
<p>Zajφmavou novinkou je Φasto ₧ßdanß mo₧nost vyu₧itφ vn∞jÜφho okraje, nap°φklad pro Φφslovßnφ, zßhlavφ nebo zßpatφ dokumentu. ProblΘmem je zvolit mechanismus, kter² urΦφ, kde p°esn∞ se mß danß informace v okraji zobrazit. W3C se rozhodlo rozd∞lit vn∞jÜφ okraj na 16 Φßstφ:</p>
<div class='image'>
<img src='podklady/dudek/1229/margin.png' alt='Rozd∞lenφ vn∞jÜφho okraje na 16 Φßstφ' title='Rozd∞lenφ vn∞jÜφho okraje na 16 Φßstφ' />
<br /><span class='comment'>Rozd∞lenφ vn∞jÜφho okraje na 16 Φßstφ</span>
</div>
<p>Na tyto Φßsti lze v rßmci bloku <code>@page {}</code> odkazovat pomocφ pravidel <code>@top-left-corner</code>, <code>@top-left</code>, <code>@top-center</code>, <code>@top-right</code>, <code>@top-right-corner</code>, <code>@right-top</code>, <code>@right-middle</code> a dalÜφch. Nßsledujφcφ styl vlo₧φ na ka₧d² konec strßnky doprost°ed jejφ Φφslo:</p>
<div class='sample'>
@page
<br />{
<br /> counter-increment: pageNr;
<br /> margin-bottom: 2cm;
<br />
<br /> @bottom-center
<br /> {
<br /> content: counter(pageNr);
<br /> }
<br />}
</div>
<p>Navφc lze nov∞ pou₧φt implicitnφ poΦφtadlo <code>pages</code>, kterΘ v₧dy obsahuje celkov² poΦet strßnek. Toto poΦφtadlo je k dispozici na ka₧dΘm strßnkovΘm mΘdiu. V nßsledujφcφm p°φpad∞ vlo₧φme jako zßhlavφ nßzev dokumentu spoleΦn∞ s celkov²m poΦtem stran a na konec strßnky Φφslo konkrΘtnφ strßnky. Nastavenφ se bude liÜit pro levΘ a pravΘ strany:</p>
<p>Novinkou je takΘ mo₧nost definovat v rßmci strßnky mφsta, kam se budou umis¥ovat plovoucφ elementy. Tato oblast se definuje pomocφ pomocφ pravidla <code>@float-area</code> nßsledovanΘho jednφm z klφΦov²ch slov (<code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>). Plovoucφ element s <samp>float: left</samp> je umφst∞n do oblasti <samp>@float-area left {}</samp>, element s <samp>float: top</samp> do <samp>@float-area top {}</samp> a vice versa.</p>
<p>Nßsledujφcφ p°φklad reprezentuje vytvo°enφ oblasti pro levΘ plovoucφ boxy:</p>
<div class='sample'>
@page
<br />{
<br /> @float-area left
<br /> {
<br /> border-right: 1px dotted black;
<br /> max-width: 25%;
<br /> }
<br />}
</div>
<p>Na strßnce vlevo se tak vytvo°φ pruh s maximßln∞ Φtvrtinovou Üφ°kou, do kterΘho budou ulo₧eny vÜechny vlevo plovoucφ elementy. Od samotnΘ strßnky bude tento pruh odd∞len teΦkovanou Φßrou.</p>
<h3>OzvuΦujeme dokumenty</h3>
<p>Konsorcium W3C nezapomn∞lo ani na vaÜe uÜi a hned t°i moduly se zab²vajφ zvukovou strßnkou dokument∙.</p>
<h4>╚tenß reprezentace dokumentu</h4>
<p>DoporuΦenφ CSS2 mimo jinΘ definovalo typ mΘdia <code>aural</code> pro mluvenou reprezentaci dokument∙. V CSS3 se tento typ mΘdia pova₧uje za p°ekonan² (<em>deprecated</em>) a je nahrazen typem <code>speech</code>, definovan²m v modulu <strong>Speech Module</strong> (zatφm je ve fßzi <em>pracovnφho nßvrhu</em>).</p>
<p>Tento typ umo₧≥uje nastavit podobnΘ parametry Φtenφ jako jeho p°edch∙dce (druh hlasu, hlasitost, mezery p°ed a za elementy a podobn∞). Hlavnφm d∙vodem, proΦ je toto novΘ mΘdium v∙bec definovßno, je kompatibilita s dalÜφm doporuΦenφm z dφlny W3C, jazykem <a href='http://www.w3.org/TR/speech-synthesis/'>SSML</a> (<em>Speech Synthesis Markup Language</em>).</p>
<h4>Kombinovanß za°φzenφ</h4>
<p>Zcela nov²m typem mΘdia je <code>reader</code>. Jde o za°φzenφ, kterΘ Φte pomocφ hlasovΘho v²stupu dan² dokument a zßrove≥ jej zobrazuje, a¥ ji₧ na monitoru nebo na jinΘm za°φzenφ. P°i takovΘm dvojφm zpracovßnφ dokumentu se musφ °eÜit problΘmy, kter²m nemusφme Φelit nikde jinde, jako nap°φklad synchronizace ΦtenΘho textu s mluven²m, zv²raz≥ovßnφ prßv∞ ΦtenΘho textu a podobn∞. Tento typ mΘdia je pouze hrub²m konceptem, modul <strong>The CSS 'Reader' Media Type</strong> je ve stavu <em>pracovnφho nßvrhu</em>.</p>
<h4>P°i°azenφ zvuku element∙m</h4>
<p>Poslednφm okruhem, kter² bych cht∞l zmφnit, je pou₧φvßnφ zvukov²ch podklad∙ na strßnce. Slou₧it by k tomu m∞ly vlastnosti z modulu <strong>Audio</strong>, kter² ovÜem zatφm nenφ k dispozici. MyÜlenkou je p°i°adit elementu zvuk, kter² se bude p°ehrßvat p°i jeho prostΘ existenci v dokumentu, nebo jenom p°i urΦitΘm stavu (nap°φklad p°i p°ejetφ myÜφ).</p>
<p>P°esto₧e na prvnφ pohled jde o u₧iteΦnΘ vlastnosti, kterΘ by nahradily nyn∞jÜφ °eÜenφ (nap°φklad pou₧itφ flashovΘ komponenty), nejsem si ·pln∞ jist², jestli by souΦasnß armßda "takywebdesigner∙" m∞la do sv²ch rukou dostat takovΘto mo₧nosti. Na druhou stranu je ale nutno podotknout, ₧e za°azenφ t∞chto vlastnostφ do CSS takΘ znamenß, ₧e bude mo₧no vÜechny zvuky na strßnce jednoduÜe vypnout pomocφ vlastnφho stylu.</p>
<h3>Souhrn</h3>
<p>V tomto Φlßnku jsem se sna₧il struΦn∞ popsat novinky na poli stylovßnφ pro r∙znß za°φzenφ. Jak u₧ jsem si jednou v textu post∞₧oval, je Ükoda, ₧e jsou n∞kterΘ mo₧nosti (zvlßÜt∞ pak z oblasti upravovßnφ dokument∙ pro tisk) tak mßlo vyu₧φvßny, p°esto₧e jejich podpora je ji₧ nynφ relativn∞ sluÜnß. Doufejme tedy, ₧e vylepÜenφm t∞chto mo₧nostφ v CSS3 dojde i k jejich ÜirÜφmu aplikovßnφ.</p>
