Własność CSS display

Własność CSS display określa sposób zachowywania się elementu względem innych elementów w układzie strony oraz decyduje o sposobie rozmieszczenia jego elementów potomnych.

Inaczej mówiąc, własność display określa zewnętrzny typ prezentacji (ang. outer display type) i wewnętrzny typ prezentacji (ang. inner display type) pola elementu.

Zewnętrzny typ prezentacji decyduje o tym, jak element zachowuje się wśród innych elementów znajdujących się w jego sąsiedztwie na stronie. Teoretycznie dostępne są trzy ustawienia w tej kategorii: block (zachowanie elementów blokowych), inline (zachowanie elementów śródliniowych) i run-in (element „wsuwa się” na początek znajdującego się za nim elementu blokowego). Jednak ostatnia z tych opcji nie jest jeszcze obsługiwana przez prawie żadną przeglądarkę.

Wewnętrzny typ prezentacji decyduje o rozmieszczeniu elementów znajdujących się wewnątrz danego elementu, czyli określa, jaki rodzaj kontekstu formatowania on tworzy. W tej kategorii jest znacznie więcej opcji, których dokładny opis znajduje się poniżej.

Wartości i składnia

W CSS 2 własność display przyjmuje jako wartość jedno słowo kluczowe, a więc nie daje możliwości oddzielnego określania wewnętrznego i zewnętrznego typu prezentacji elementu. Są za to specjalne słowa kluczowe, które dają taki sam efekt. Jeśli na przykład chcemy, aby element zachowywał się jak tabela (która domyślnie jest elementem blokowym) to użyjemy słowa kluczowego table, a jeśli chcemy, aby zachowywał się jak tabela śródliniowa, to użyjemy słowa kluczowego inline-table, np.:

div {
  display: inline-table;
}

Mimo że domyślnie div jest elementem blokowym, to teraz będzie się on zachowywał jak element śródliniowy, a jednocześnie będzie tworzył kontekst formatowania tabelarycznego, czyli będzie mógł zawierać wszystkie standardowe elementy tabeli HTML.

W specyfikacji CSS Display Module Level 3 dostrzeżono fakt, że każdy element ma dwa typy prezentacji – wewnętrzny i zewnętrzny – i postanowiono umożliwić określanie każdego z nich osobno. W efekcie poprzednia składnia własności display została zmodyfikowana w taki sposób, aby pozwalała na używanie dwóch, a nawet trzech, słów kluczowych jako wartości. Jeśli na przykład chcemy, aby element zachowywał się jak „zwykła” tabela (element blokowy), to użyjemy słów kluczowych block table, a jeśli chcemy, aby zachowywał się jak tabela śródliniowa, to użyjemy słów kluczowych inline table, np.:

/* Ten element będzie zachowywał się jak element blokowy reprezentujący tabelę */
span {
  display: block table;
}
/* Ten element będzie zachowywał się jak element śródliniowy reprezentujący tabelę */
div {
  display: inline table;
}

W ten sposób bezpośrednio określamy relację elementu z otoczeniem zewnętrznym (zewnętrzny typ prezentacji) oraz to, jaki kontekst formatowania tworzy on dla swojej zawartości (wewnętrzny typ prezentacji).

Posługując się przykładem tabeli, element z ustawieniem display: block table wśród innych elementów na stronie zachowuje się, jak każdy inny element blokowy, np. div, p, blockquote itd., natomiast wewnętrznie tworzy kontekst tabelaryczny, czyli jego elementy potomne są traktowane jako elementy wewnętrzne tabeli.

Innym przykładem jest układ Flexbox. Jeśli elementowi przypiszemy ustawienie display: block flex, to utworzymy element, który wśród innych elementów na stronie będzie zachowywał się jak każdy inny element blokowy. Natomiast wewnętrznie utworzy on kontekst formatowania Flexbox, czyli stanie się tzw. kontenerem elastycznym (ang. flex container) i jego elementy potomne będą reagowały na ustawienia własności Flexbox.

Według zasad starej składni blokowy element Flexbox można utworzyć za pomocą słowa kluczowego flex, a śródliniowy element Flexbox można utworzyć za pomocą słowa kluczowego inline-flex. Natomiast w nowej składni napisalibyśmy odpowiednio block flex i inline flex.

Krótko mówiąc, nowa składnia własności display jest bardziej elastyczna i bezpośrednia, ale niestety jej obsługa przez przeglądarki wciąż pozostawia wiele do życzenia. Dlatego warto o niej wiedzieć, ale z jej stosowaniem w prawdziwych projektach lepiej jeszcze poczekać, zwłaszcza że deklaracja typu display: block flex nie jest obiektywnie w niczym lepsza od display: flex.

Zaletą nowej składni jest przede wszystkim to, że powinna ona ułatwić rozwijanie standardu w przyszłości, ale nie unieważnia ona w żaden sposób poprzedniej wersji.

Podział słów kluczowych na grupy

Słowa kluczowe, których można używać jako wartości własności display, są podzielone na sześć kategorii.

• Prezentacja zewnętrzna (<display-outside>) – block, inline, run-in
• Prezentacja wewnętrzna (<display-inside>) – flow, flow-root, table, flex, grid, ruby
• Element listy (<display-listitem>) – list-item. To słowo kluczowe można łączyć z dowolnym słowem kluczowym z kategorii <display-outside> oraz ze słowami kluczowymi flow i flow-root
• Prezentacja wewnątrzelementowa (<display-internal>) – table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption, ruby-base, ruby-text, ruby-base-container, ruby-text-container
• Prezentacja polowa (<display-box>) – contents, none
• Historyczne (<display-legacy>) – inline-block, inline-table, inline-flex, inline-grid

Dwa rodzaje składni

Według zasad nowej składni, wartością własności display może być od jednego do trzech słów kluczowych z powyższych kategorii, przy czym obowiązują następujące zasady.

• Prezentacja zewnętrzna i wewnętrzna: można wybrać po jednym słowie kluczowym z każdej z tych kategorii, tylko jedno z dowolnej z nich lub można nie użyć żadnego
• Pozostałe typy: opcjonalnie można wybrać jedno słowo kluczowe z dowolnej z pozostałych kategorii

Formalnie zasadę tę wyraża się w następujący sposób:

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

Natomiast według zasad starej składni wartością własności display może być tylko jedno słowo kluczowe.

Ze względu na istnienie dwóch sposobów zapisu, w specyfikacji CSS Display Module Level 3 wyróżniono tzw. składnię krótką (ang. short display) i składnię pełną (ang. full display). Poniższa tabela zawiera zestawienie odpowiadających sobie wartości z każdej z tych form zapisu. Forma krótka to niekoniecznie forma obsługiwana w CSS 2, ale większość elementów z tej kolumny rzeczywiście jest dostępna w CSS 2 (są oznaczone gwiazdką).

* Słowo kluczowe dostępne także w CSS 2

Opis słów kluczowych

Poniżej znajduje się opis wszystkich słów kluczowych własności display z podziałem na kategorie według specyfikacji CSS Display Module Level 3.

Kategoria outside

Słowa kluczowe z tej kategorii określają zewnętrzny typ prezentacji elementu, czyli decydują o tym, jak zachowuje się on wśród innych elementów na stronie.

block

Jeśli element znajduje się w normalnym układzie elementów, to tworzy on pole poziomu blokowego.

inline

Jeśli element znajduje się w normalnym układzie elementów, to tworzy pole poziomu śródliniowego.

run-in

Element tworzy tzw. pole wsuwane (ang. run-in box), czyli pole poziomu śródliniowego, które „próbuje” scalić się ze znajdującym się za nim kontenerem blokowym.

Kategoria inside

Słowa kluczowe z tej kategorii określają wewnętrzny typ prezentacji elementu, czyli decydują o tym, jaki kontekst formatowania tworzy ten element dla swoich elementów potomnych.

flow

Zawartość elementu podlega zasadom układu blokowo-śródliniowego (ang. block-and-inline layout), tzn. jeśli element ma zewnętrzny typ prezentacji inline lub run-in oraz należy do blokowego lub śródliniowego kontekstu formatowania, to tworzy pole śródliniowe.

W pozostałych przypadkach element tworzy pole kontenera blokowego (ang. block container box).

flow-root

Element tworzy pole kontenera blokowego, którego zawartość jest rozmieszczana według zasad układu blokowo-śródliniowego. Taki element zawsze ustanawia nowy blokowy kontekst formatowania dla swojej treści.

table

Element zachowuje się jak element HTML table i definiuje tabelaryczny kontekst formatowania.

flex

Element tworzy pole blokowe, którego elementy potomne podlegają zasadom rozmieszczenia według modelu Flexbox.

grid

Element tworzy pole blokowe, którego elementy potomne podlegają zasadom rozmieszczenia według modelu Grid.

ruby

Element tworzy pole śródliniowe, którego elementy potomne podlegają zasadom rozmieszczenia według modelu Ruby.

Kategoria listitem

Ta kategoria obejmuje tylko jedno słowo kluczowe, którego opcjonalnie można używać w połączeniu z dowolnym słowem kluczowym z kategorii <display-outside> oraz ze słowami kluczowymi flow i flow-root.

list-item

Element tworzy pole blokowe dla swojej zawartości oraz dodatkowo generuje pseudoelement ::marker, który można stylizować za pomocą własności list-style-type, list-style-image i list-style-position.

Kategoria internal

Ta kategoria obejmuje słowa kluczowe tworzące typy elementów, które mają zastosowanie tylko w określonych elementach definiujących pewien specyficzny sposób rozmieszczenia elementów.

table-caption

Element zachowuje się jak element HTML caption

table-cell

Element zachowuje się jak element HTML td

table-column

Element zachowuje się jak element HTML col

table-column-group

Element zachowuje się jak element HTML colgroup

table-footer-group

Element zachowuje się jak element HTML tfoot

table-header-group

Element zachowuje się jak element HTML thead

table-row

Element zachowuje się jak element HTML tr

table-row-group

Element zachowuje się jak element HTML tbody

ruby-base

Element zachowuje się jak element HTML rb

ruby-base-container

Element zachowuje się jak element HTML rbc

ruby-text

Element zachowuje się jak element HTML rt

ruby-text-container

Element zachowuje się jak element HTML rtc

Kategoria box

Słowa kluczowe z tej kategorii decydują, czy element tworzy jakiekolwiek pole.

contents

Sam element nie tworzy pola, ale jego elementy dzieci i pseudoelementy tworzą pola w normalny sposób.

none

Element i jego elementy potomne nie tworzą żadnych pól i nie mają wpływu na układ innych elementów na stronie. Są traktowane tak, jakby w ogóle nie istniały.

Kategoria legacy

Ta kategoria zawiera „podwójne” słowa kluczowe z CSS 2.

inline-block

Element tworzy pole blokowe, które wśród otaczających elementów zachowuje się jak pole śródliniowe. Równoznaczne z ustawieniem inline flow-root.

inline-table

Element tworzy pole śródliniowe i zachowuje się jak śródliniowy element table.

inline-flex

Element tworzy pole śródliniowe, którego zawartość jest rozmieszczana według zasad rozmieszczenia elementów Flexbox.

inline-grid

Element tworzy pole śródliniowe, którego zawartość jest rozmieszczana według zasad rozmieszczenia elementów Grid.

Zastosowanie

Własność CSS display ma zastosowanie do wszystkich elementów HTML.

Podsumowanie