【CSS】displayの2つの役割と2値構文

displayの振る舞いに疑問を持ったことはありませんか？

CSSについて調べているときに、偶然知った2値構文についてまとめてみました。
https://developer.mozilla.org/ja/docs/Web/CSS/display/two-value_syntax_of_display#2_値の構文を使い始めることはできるのか？

displayとは

そもそもdisplayとは、その要素をブロック要素として扱うかインライン要素として扱うかを設定します。また、その要素の子に使用されるレイアウト（flow、grid、flex）なども設定できる２つの性質を持っています。
例えば、よく使われるキーワード値として次のようなものがあります。

• block
• inline
• flex
• grid
• inline-block
• inline-flex
• inline-block

この他にもいくつかあり、特にcontentsなどは面白い振る舞いをするのですが、ここでは2値構文にフォーカスを当てていきます。

displayの2値構文

結論から話すと、2値構文とは新しい何かをもたらすものではなく、既存の表記方法を置き換えるものです。

displayの効果

冒頭でも述べた通りdisplayには２種類の効果があります。

1. その要素がinlineかblockなのかを設定する
2. その要素の子要素をどのようにレイアウトするかを設定する

例えば、元々inline要素である<span>にdisplay:flexを指定すると、子要素はもちろんフレックスレイアウトになるのですが、その<span>自体はblock要素となります。
次の例は、四番目の<span>にdisplay:flexを与えたものです。
display:blockを指定した時と同じ様に、横並びではなく縦並びになっていることが分かります。

.flex_span {
  display:flex;
}

2値構文とは

2値構文とは、今まで１単語で表されていたdisplayの効果を、その要素自体の振る舞いと子要素の振る舞いの2つに分けて表す構文です。
よって、既存の単語は次の２単語に対応づけられます。

既存の値	2値構文での値
block	block flow
inline	inline flow
flex	block flex
grid	block grid
inline-block	inline flow-root
inline-flex	inline flex
inline-grid	inline grid

完全な対応表はこちらです→ https://drafts.csswg.org/css-display/#display-value-summary
よって、先ほどのflexは次の様に書き換えることができます。

.flex_span {
  display:block flex;
}

ちなみに、最初の2値のうち最初の値のことを外側の表示型(outer diplay type)、2番目の値のことを 内側の表示型(inner diplay type) と呼ぶ様です。

なお現在2値構文に対応しているブラウザは次の二つのみです。

• Firefox 70
• Safari 15

そのため、今すぐに使うメリットはありません。
ただ、この構文を使えると、その要素と子要素への影響が分かりやすくなり、個人的にもしっくりくる書き方なので、対応するブラウザが増えて普及してくれれば嬉しいです。