Interval.cz

CSS3 - zßklady styl∙ v novΘm kabßt∞

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.

Kaskßda a d∞diΦnost

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 pracovnφho nßvrhu a lze oΦekßvat, ₧e ve finßle bude slouΦen s n∞kter²m jin²m modulem.

Jedinou podstatnou novinkou je mo₧nost p°i°adit hodnot∞ kterΘkoli vlastnosti klφΦovΘ slovo initial. Tφm lze vynutit, aby za jejφ hodnotu byla dosazena v²chozφ (initial) hodnota.

ObdΘlnφkov² model

Zatφmco v p°edchozφm modulu toho k vid∞nφ p°φliÜ nebylo, dokument zab²vajφcφ se obdΘlnφkov²m modelem (box model) 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.

I tento modul je zatφm ve fßzi pracovnφho nßvrhu 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∙.

display je mrtev, a¥ ₧ije display!

D∙kazem, ₧e se s tφm konsorcium W3C tentokrßt skuteΦn∞ p°φliÜ nepßralo, je zavr₧enφ fundamentßlnφ vlastnosti display ve prosp∞ch dvou nov²ch vlastnostφ, display-model a display-role. Vlastnost display 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φ.

Vlastnost display-model urΦuje, jak²m zp∙sobem bude dan² element vykreslovat svoje potomky. Momentßln∞ m∙₧e nab²vat Φty° r∙zn²ch hodnot, inline-inside, block-inside, table a ruby. Vlastnost display-role 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 display - none, block, inline, list-item, run-in, compact, table-row, table-cell...

Pou₧itφ t∞chto vlastnostφ lze demonstrovat nap°φklad na hodnotßch table a inline-table vlastnosti display. Ob∞ urΦujφ, ₧e obsah elementu se mß formßtovat jako tabulka. Hodnota table znaΦφ, ₧e tabulka se chovß jako klasick² blokov² element (zjednoduÜen∞ °eΦeno, p°ed a za tabulkou je od°ßdkovßno). Naopak hodnota inline-table tabulce p°ikazuje, aby byla vlo₧ena p°φmo do p°φsluÜnΘho °ßdku.

Pokud budeme chtφt v CSS3 vytvo°it element, kter² svΘ d∞ti bude formßtovat do tabulkovΘ struktury, nastavφme mu display-model: table;. Pokud z n∞j budeme chtφt uΦinit klasickou blokovou tabulku (display: table;), dßme mu display-role: block;, pro °ßdkovou tabulku (display: inline-table;) pak display-role: inline;.

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 display, 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 (display-role: list-item;), kterß bude zßrove≥ tabulkou (display-model: table)!

NahrazovanΘ elementy

V∞tÜφ kontrolu budeme mφt nad nahrazovan²mi elementy (nap°φklad elementy img v XHTML nahrazovanΘ obrßzkem). CSS3 se toti₧ mnohem vφce zaobφrß formßtovßnφm t∞chto element∙.

Vlastnosti width, height 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:

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 fit a fit-position. 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 fill, 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 meet a slice), respektive jestli se mß obrßzek ponechat v plnΘ velikosti (none). Druhß vlastnost fit-position urΦuje, kde se mß objekt umφstit v rßmci nahrazovanΘho elementu. Funguje podobn∞ jako background-position ovliv≥ujφcφ umφst∞nφ obrßzku na pozadφ.

S t∞mito vlastnostmi se dajφ d∞lat celkem zajφmavΘ efekty. Nßsledn² (trochu samo·Φeln²) p°φklad nastavφ vÜechny elementy img 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°φklad by mohl v prohlφ₧eΦi vypadat nßsledovn∞:

Ukßzka formßtovßnφ obrßzku

Plovoucφ boxy

Nejzajφmav∞jÜφ novinkou na poli plovoucφch box∙ je bezesporu vlastnost clear-after, kterß rozÜφ°φ box tak, aby konΦil a₧ pod sv²m poslednφm plovoucφm dφt∞tem. Dφky tomu lze efektivn∞ vy°eÜit nap°φklad problΘmy s obrßzkov²m pozadφm plovoucφch prvk∙, 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φ clear:

Ve t°etφ verzi kaskßdov²ch styl∙ by to m∞lo jφt mnohem jednoduÜeji:

Plovoucφch box∙ se t²kajφ i dv∞ dalÜφ vlastnosti, float-displace a indent-edge-reset, 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:

Ukßzka zjednoduÜenΘho obtΘkßnφ plovoucφch element∙

Prvnφ odstavec p 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.

Rotujφcφ text je zpßtky!

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ß marquee, 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!

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 marquee nakonec z finßlnφ verze modulu ·pln∞ zmizφ a webdesignΘ°i nedostanou do sv²ch rukou tuto doslova zbra≥ hromadnΘho niΦenφ.

Souhrn

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Θ (clear-after, 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 display do dvou samostatn²ch vlastnostφ a s tφm souvisejφcφ novΘ kombinace) a specißln∞ o marquee si rad∞ji nemyslφm v∙bec nic.

Vyhledßvßnφ