Display
CSS vlastnost display určuje způsob zobrazení prvku. Je to extrémně důležitá vlastnost s mnoha rozmanitými hodnotami.
| 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 |
| none | prvek se nezobrazí |
| inline-block | prvek se zobrazí jako kus řádku bez zlomu na konci, jdou mu nastavit rozměry |
| list-item | prvek by se měl zobrazit jako položka seznamu, tj. jako tag <li> |
| tabulkové hodnoty | prvky se zobrazí jako části tabulky. Jde o hodnoty table, inline-table, table-caption, table-cell, table-column-group, table-footer-group, table-header-group, table-row a table-row-group. Dle mého názoru málo použitelné. |
| grid | prvek se zobrazí jako mřížka, která se může postupně naplnit dalšími prvky |
| flex | vnořené prvky budou dobře využívat volné místo |
| flow-root | jako kdyby se po prvku vždycky přidal clear: both, tedy vhodné pro použití float |
Block a inline = blokové a řádkové prvky
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.
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.
Display: inline-block
Velice kouzelná hodnota. Způsobí, že se z prvku stane řádkový prvek, kterému ale půjdou nastavit rozměry (výška height a šířka width), rámeček, padding a margin. Potom se prvek bude chovat velmi podobně, jako se normálně chovají obrázky (tag <img>) -- sedí na řádku, ale mají své rozměry.
Teprve u prvků, které mají nastaveno inline-block, má smysl širší použití vlastnosti vertical-align.
Setkáte-li se někde s vlastností run-in, je to stará, ale již nefunkční varianta inline-block.
Display: list-item
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 než <li> se zápisem display: list item dá udělat položka seznamu (s číslem nebo odrážkou, to se nastavuje pomocí list-style-type).
Display: none
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. Pokud je takové chování potřeba, musí se to zkusit s visibility: hidden (tip: nastavit tomu absolutní pozici).
Stejný efekt jako display: none; se dá udělat pomocí html atributu hidden. Hidden je součástí HTML 5 a už je dobře podporován v prohlížečích.
Tabulkové hodnoty
Tabulkové hodnoty fungují ve všech prohlížečích bezpečně už asi od roku 2010. Jejich význam je doufám 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 udělá tabulku ležící na řádku. Hodnoty display: table používám např. v řešení univerzálního vertikálního centrování.
Má-li něco display: table-caption nebo je-li to tag <caption> v tabulce, pak na to lze uplatit vlastnost caption-side s hodnotami top nebo bottom. Hodnota bottomo způsobí, že popisek tabulky bude pod tabulkou, nikoli nad ní.
Display: flex
S vymizením Internet Exploreru 10 začne být extrémně zajímavá hodnota display: flex. Zařídí, že všechny vnořené prvky budou předepsaným způsobem využívat volné místo prvku. Odkaz na návod na flexbox (anglicky).
Display: grid
Od roku 2019 je použitelná hodnota grid. Display: grid je výjimečně vhodný pro rozvržení celé stránky pomocí mřížky. Prvku, který má nastavený display: grid, se musejí nastavit další nové vlastnosti (já nastavuji grid-template-areas, grid-tempalte-columns, grid-template-rows a grid-gap). Potomkům hlavního prvku se pak nastavují další vlastnosti (mně obvykle stačí grid-area). Možnosti display: grid jsou bezmála dechberoucí, ale ještě jsem o tom nic nenapsal, jenom už tak sám dělám weby. Zatím si přečtěte https://www.vzhurudolu.cz/prirucka/css-grid a https://www.root.cz/clanky/css-grid-revoluce-ve-web-designu/
Další hodnoty vlastnosti display
V moderních prohlížečích fungují také další hodnoty vlastnosti display. Jde o hodnoty různě podporované hodnoty compact, content, marker nebo flow-root.
Jakmile čemukoliv nastavíte float rozdílné od none, stává se to blokovým prvkem (jakoby display: block).
Display chce řešit dvě věci najednou
Display je hodně blbě navržená CSS vlastnost, protože se snaží do jedné vlastnosti pojmout dvě úplně různé věci:
- jak se prvek s display vykresluje vůči svému okolí (hodnoty block a inline)
- jak se vykresluje, co je uvnitř prvku s display, tedy jiné jím obalené prvky (hodnoty table, flex, grid, float-root)
Tyhle dvě věci jsou často v konfliktu, protože chcete mít třeba flex sedící na řádku, tabulku chovající se správně jako blok (tedy například aby respektovala overflow) nebo podobnou kombinaci. Prvky se kvůli tomu musely navzájem obalovat (nadřazený měl display: inline a vnořený display: flex). Jako lepší řešení vznikly zoufalé nové hodnoty a dvouslovné kombinace zápisů. Například display: inline-flex; nebo display: inline flex; plus podobné kombinace display: inline-drid; display: inline grid;. Správné řešení, ke kterému se snad někdy prohlížeče odhodlají, bude rozdělení display do více než jedné hodnoty. Display: none; by si totiž také zadložilo vlastní vlastnost, aby se po každém javascriptovém okrytí takového prvku nemuselo vždycky všechno přerenderovávat.
Podpora
| prohlížeč | základní hodnoty | hodnota flex | hodnota grid |
|---|---|---|---|
|
Internet Explorer |
ano | od verze IE 11 | s jinými hodnotami |
| Firefox | ano | ano | ano |
| Chrome, Opera, Safari, Edge | ano | ano | ano |
Příklady
Skrytí prvku
Č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ý.
Převod na blokový element
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>
Poslední aktualizace 18. 2. 2016
Reklama
