💡 Personal notes about anything I'm interested in

The display value property (box / legacy)

The display value property (list-item / internal)の続き。2. Box Layout Modes: the display propertyからdisplayプロパティのvalueについて、残りのboxとlegacyについて確認していく。


<display-box> = contents | none

While display can control the types of boxes an element will generate, it can also control whether an element will generate any boxes at all.


The keywords are defined as follows:

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).

その要素自身のboxは生成しなくなるが、子孫要素や擬似要素についてはboxとtext runを通常通りに生成する。その目的として、要素が中のコンテンツ(source-documentの子孫要素と::before::afterなど子孫要素の前後に生成される擬似要素を両方含む)によって要素のツリーが置き換わるかのように扱われなければならない。

Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. As of writing, however, this is not implemented correctly in major browsers, so using this feature on the Web must be done with care as it can prevent accessibility tools from accessing the element’s semantics.

box treeのみが影響を受けるので、セレクタやイベントハンドリング、プロパティの継承など、document treeをベースにしたセマンティクスには影響を与えない。


This value computes to display: none on replaced elements and other elements whose rendering is not entirely controlled by CSS; see Appendix B: Effects of display: contents on Unusual Elements for details.

この値は、置換要素などレンダリングがCSSによる制御の外にある要素上では、display:noneとして計算される。詳細はAppendix B: Effects of display: contents on Unusual Elements


Note: Replaced elements and form controls are treated specially because removing only the element’s own generating box is a more-or-less undefined operation. As this behavior may be refined if use cases (and more precise rendering models) develop, authors should use display: none rather than display: contents on such elements for forward-compatibility.


The element and its descendants generate no boxes or text runs.
Similarly, if a text node is defined to behave as display: none, it generates no text runs.

noneでは、その要素および子孫要素がboxとtext runを生成しなくなる。同様に、もしテキストノードがdisplay:noneとして振舞うように定義された場合、text runを生成しなくなる。

Elements with either of these values do not have inner or outer display types, because they don’t generate any boxes at all.

display-boxがついた要素は、boxを生成しないため、innerとouter display typeを持たない。

Note: As these values cause affected elements to not generate a box, anonymous box generation rules will ignore the elided elements entirely, as if they did not exist in the box tree.

Markup-based relationships, however, are not affected by these values, as they are solely rendering-time effects. For example, although they may affect which table cell appears in a column, they do not affect which table cell is associated with a particular column element. Similarly, they cannot affect which HTML summary element is associated with a particular table or whether a legend is considered to be labelling the contents of a particular fieldset.

これらの値の影響下にある要素はboxを生成しないので、anonymous boxの生成ルールは、まるでbox treeに存在しないかのように、その生成されなかった要素を無視するだろう。

しかしながら、マークアップを基礎にしたリレーションシップの場合、それらがレンダリング時の効果であることから、display-boxの値による影響を受けない。たとえば、display-boxはカラム内にtable cellの表示に影響を与えるかもしれないけれど、特定のカラム要素に関係するtable cellには影響を与えない。



<display-legacy> = inline-block | inline-table | inline-flex | inline-grid

CSS level 2 used a single-keyword syntax for display, requiring separate keywords for block-level and inline-level variants of the same layout mode. These keywords map as follows:

inline-blockなど、CSS2で一つのキーワードとして使われていたもので、CSS3のDisplay moduleではoutsideとinsideに分けて記述されるべきものなのがここに入ってる。

  • inline-block
    Behaves as inline flow-root.
  • inline-table
    Behaves as inline table.
  • inline-flex
    Behaves as inline flex.
  • inline-grid
    Behaves as inline grid.