Určení typu prvku – vlastnost display

V části o XHTML jsem prvky rozlišoval na blokové a řádkové. Tato jejich charakteristika ve skutečnosti není pevně dána. Navíc existuje ještě několik dalších typů prvků. Rozhoduje o nich vlastnost display, jejíž hodnoty jsou následující:

inline

Vytvoří řádkový materiál, který je běžnou součástí řádku. Uplatňuje se v něm dělení řádků a veškeré další chování, na něž jste zvyklí od běžného obsahu řádků. Toto je výchozí hodnota vlastnosti display.

block

Vytvoří samostatný blok – obdélníkovou vlastnost, jež zabere veškerou dostupnou šířku (napředepíšete-li odpovídajícími vlastnotmi jinak) a bude umístěna pod předchozí blok.

inline-block

Obsah řádkového bloku je formátován jako u normálního bloku, ale výsledný blok je pak zařazen do řádku jako velké písmeno. Takto se chovají například vkládané obrázky (prvek <img>).

list-item

Položka seznamu de facyo vytvoří dva bloky – jeden pro odrážku či pořadové číslo, druhý pro vlastní obsah položky.

none

Prvek nebude vůbec zobrazen. Zbytek stránky se chová, jako by vůbec neexistoval. Použijete-li display: none, zmizí společně s prvkem i veškerý jeho obsah, všichni jeho potomci (bez ohledu na to, jakou hodnotu má jejich vlastnost display).

run-in

Představuje poměrně komplikované chování, někdy blokové, jindy řádkové. Pokud se za ním nachází normální blok (který není plovoucí či absolutně umístěn), stane se run-in prvek řádkovým materiálem na jeho začátku. V opačném případě vytvoří svůj vlastní blok.

tabulkové hodnoty

Deset dalších hodnot je určeno pro různé součásti tabulek (např. table, table-cell či table-column). Upřímně řečeno není radno je modifikovat, tabulky zkrátka nechte svému vlastnímu životu.

Použití

Přestože nabídka hodnot vlastnosti display se zdá být široká, ve skutečnosti svět není tak růžový. Podpora inline-block a run-in je mizivá, na seznamové a tabulkové vlastnosti je lépe nesahat. V praxi se proto pracuje skoro výlučně se třemi hodnotami: inline, block a none.

none se používá, když chcete skrýt určitou část stránky. Například je obvyklé při tisku stránek odstranit menu a další navigační prvky a ponechat jen vlastní obsah. Podívejte se například na tiskový náhled této stránky. Zmizelo z něj menu i horní lišta, protože pro tisk má jejich vlastnost display hodnotu none.

V kombinaci s pseudotřídou hover lze hrátkami s display zajistit chování napodobující JavaScript. Například Eric Meyer títmo způsobem vytvořil dynamicky se zobrazující popisky: Část odkazu v menu (vyznačenou pomocí <span>) skryl použitím display: none. Až když na dotyčnou položku najedete myší, změní se display na block a text popisky bude dočasně zobrazen.

Menu vůbec představují oblast, kde speciální nastavení vlastnosti display často najde své uplatnění – viz třeba tento příklad.