CSS vlastnost display urΦuje zp∙sob zobrazenφ prvku.
| hodnoty | zßkladnφ zp∙soby zobrazenφ prvku |
|---|---|
| block | prvek se zobrazφ jako blok, to jest s °ßdkov²m zlomem na konci |
| inline | prvek se zobrazφ jako kus °ßdku, to jest bez °ßdkovΘho zlomu na konci |
| list-item | prvek by se m∞l zobrazit jako polo╛ka seznamu, tj. jako tag <li> |
| none | prvek se nezobrazφ |
V²chozφ zobrazenφ je block, inline nebo list-item podle toho, jak² se pou╛ije html tag. N∞kterΘ tagy se od p°irozenosti zobrazujφ blokovΘ (nap°. <div>, <p>), jinΘ °ßdkovΘ (<span>, <strong>). (Tagy <ins> a <del> nejsou to ani to.) BlokovΘ prvky (display: block) za sebou d∞lajφ konec °ßdku a jde jim nastavit v²╣ka a ╣φ°ka. ╪ßdkovΘ prvky (display: inline) za sebou konec °ßdku ned∞lajφ, ╣φ°ka a v²╣ka by jim nem∞la jφt nastavit (v quirk m≤du Exploreru jde). Vlastnostφ display se dajφ z °ßdkov²ch prvk∙ d∞lat blokovΘ a naopak. Nap°φklad odkaz (tag <a>) je prvek °ßdkov². Zßpisem
a {display: block}
se z odkaz∙ ud∞lajφ prvky blokovΘ = bude za nimi zalomen² °ßdek a p∙jdou jim nastavit rozm∞ry.
Tag <li> se zobrazuje jako list-item, to znamenß polo╛ku seznamu. I z jin²ch tag∙ (nap°. div) lze ud∞lat polo╛ku seznamu, ale jen jsou-li obklopeny tagy <ul>, <ol>, <dir> nebo <menu>. P°φklad: test vlastnosti display: list-item. Z jinΘho tagu se zßpisem display: list item dß ud∞lat polo╛ka seznamu (s Φφslem nebo odrß╛kou, to se nastavuje pomocφ list-style-type), ale funguje to pouze v modernφch prohlφ╛eΦφch.
Prvky dokumentu lze skr²t pomocφ display: none. Jde o ·plnΘ skrytφ, ne pouze o zneviditeln∞nφ jako p°i visibility: hidden. Po prvku nez∙stane volnΘ mφsto (co╛ po visibility: hidden z∙stane). Prohlφ╛eΦe prvky skrytΘ pomocφ display: none normßln∞ stahujφ, pouze Opera 7 je nestahuje. Mo╛nß si °φkßte, k Φemu je dobrΘ dßvat do strßnky prvky, kterΘ se nezobrazφ. Je to dobrΘ na prßci s javascriptem a v hektickΘ praxi takΘ na skr²vßnφ v∞cφ, kterΘ prost∞ je╣t∞ nejsou hotovΘ. Dal╣φ uplatn∞nφ se najde p°i tisku, kdy se prost∞ n∞kterΘ v∞ci na obrazovce viditelnΘ na tisk nepo╣lou.
Zd∞d∞nΘ nezobrazenφ nelze p°etlouct. Pokud mßm nap°. skryt² (display: none) cel² vn∞j╣φ prvek, vnit°nφ prvky, kterΘ obsahuje, nelze nijak zobrazit ╛ßdnou hodnotou vlastnosti display.
V²╣e uvedenΘ hodnoty fungujφ v Internet Exploreru (nejlΘpe v 5.5 a 6), v Mozille a Ope°e 7. V modernφch prohlφ╛eΦφch fungujφ takΘ dal╣φ hodnoty vlastnosti display, vhodnΘ zejmΘna pro stylovßnφ XML dokument∙. Jde o hodnoty compact, run-in, marker a hodnoty pro tabulkovΘ vykreslenφ. Pro prßci s HTML strßnkami kv∙li ignoraci Internet Exploreru nemajφ v²znam (psßno 2003).
TabulkovΘ hodnoty fungujφ v Mozille a Ope°e a jejich v²znam je celkem z°ejm². Jsou to hodnoty: table, table-row-group, table-header-group, table-footer-group, table-cell, table-column, table-column-group, table-caption. Hodnota display: inline-table mß ud∞lat tabulku le╛φcφ na °ßdku, ale Mozilla ji vykreslφ jako display: table (uvßdφ Pixy).
| Prohlφ╛eΦ | Podpora hodnot ve verzφch | |||
|---|---|---|---|---|
| hodnota none | p°epnutφ list-item | p°epnutφ block / inline | hodnoty table-* | |
| 4, 5, 5.5, 6 | 6 | 5, 5.5, 6 | ne | |
| Mozilla (Netscape 6+) | v╣echny verze | v╣echny verze | v╣echny verze | v╣echny verze |
| Opera | 3, 4, 5, 6, 7 | 4, 5, 6, 7 | 4, 5, 6, 7 | 6, 7 |
| Konqueror | ano | nevφm | nevφm | nevφm |
| IE 5 / Mac | ano | ano | ano | chybn∞ (Pixy) |
| Netscape Navigator 4 | ano s chybami | ne | ne | |
Hodnota display: run-in funguje pouze v IE 5 / Mac a v Ope°e od verze 5. Hodnoty table-* fungujφ pouze v Mozille a v Ope°e 5 +.
╚asto se display: none pou╛φvß na skrytφ prvk∙, kterΘ majφ b²t vid∞t na za°φzenφch bez podpory kaskßdov²ch styl∙ (r∙znΘ mobily, roboti apod.). Do takov²ch prvk∙ se n∞kdy umis╗ujφ hlß╣ky o tom, ╛e "mßte debilnφ prohlφ╛eΦ bez podpory CSS", nebo rad∞ji (proto╛e ta p°edchozφ hlß╣ka nenφ moc q∞ci) pomocnΘ navigaΦnφ prvky. ╪φkß se tomu skrytß navigace:
<a href="#zacatek" style="display: none">p°eskoΦit navigaci</a>
Takov² prvek je v normßlnφch prohlφ╛eΦφch neviditeln².
Pokud chci mφt pod sebou n∞kolik odkaz∙, m∙╛u je prostrkat °ßdkov²mi zlomy (tag <br>). Nenφ to v╣ak t°eba prostrkßvat, staΦφ nastavit takov²m odkaz∙m (tag∙m <a>, kterΘ jsou normßln∞ °ßdkovΘ) display: block a ud∞lat z nich tak blokovΘ prvky.
Takhle budou odkazy v °ßdku:
<div class="menu">
<a href="prvni.html">Prvnφ odkaz</a>
<a href="druhy.html">Druh² odkaz</a>
<a href="treti.html">T°etφ odkaz</a>...
</div>
Po p°idßnφ stylu se odkazy zalßmajφ pod sebe:
<style>
.menu a {display: block}
</style>
Visibility = viditelnost prvku, Width = ╣φ°ka, Height = v²╣ka, List-style = vlastnosti seznamu
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek