23/07にdisplayの2値構文がChromeでサポートされるらしいので振り返ろう
はじめに
現在displayの2値構文は下記のカードを踏んでいただくと分かる通りSafariとFirefoxのみでしたがChromeのv115でサポートされるようになるということですので振り返っていこうと思います。
↓displayの2値構文のブラウザの対応状況
↓Chrome115に関する情報
まず、displayの2値構文とは何？
現在CSSで使用されるdisplayには大きく分けて、要素の種類を分けるものとレイアウトに関するものの二つがあると思っています。要素の種類というのがblock要素,inline要素であり、レイアウトに関するものがflexやgridなどになります。現在は一つの値でまかなっているものを二つの値に分けてわかりやすく書こうというのがdisplayの2値構文です。下記は同じ意味です。
.block {
display: block;
}
.block {
display: block flow;
}
2値構文の一覧
外（その要素自体）の初期値は "block" ,内（子）の初期値は "flow" になります。
(初期値という表現はあまり正しくないので下記の表を見て特に言及されていない時と考えていただければと思います。)
| ＼ | 一つのプロパティ | 二つのプロパティ(2値構文) |
|---|---|---|
| 例 | display: "値"; | display: "外" "内"; |
| display: block; | display: block flow; | |
| display: inline; | display: inline flow; | |
| display: flow-root; | display: block flow-root; | |
| display: flex; | display: block flex; | |
| display: inline-flex; | display: inline flex; | |
| display: inline-block; | display: inline flow-root; |
上の表の補足（flexを指定するとblockになる）
spanタグで横並びになっているものをflexを付与した時の動きになります。
ボタンを押して確かめていただければと思います。
displayの2値構文のメリットとデメリット
● メリット
・ コードを見た時にわかりやすい
ー外(それ自体)の要素がどのようになっていて、内(子)の要素がどうなっているかが分かりやすいのでレイアウトの崩れなどに気付きやすくなり対応しやすい。
● デメリット
・ わざわざ2つ書くメリットがあまり見つけられない。
ーこの記事自体が本末転倒なのですが、正直感覚的に理解しているのでわざわざ書かなくてもいいと個人的には思ってしまっています。ただこの内と外の2つを元に構成されていると理解することには意味があるのかなと思っています。
まとめ
今回displayの2値構文がサポートされるということで再度まとめてみたのですが、中々メリットを見つけてあげられませんでした。こういうメリットがあるよ！筆者何もわかってないな…という方はぜひコメントなどで教えていただけますと、とても嬉しいです。
displayの話で出てきた要素の内や外がよくわからなかったという方はこちらのdisplayプロパティに関するMDNの中で詳しく解説されていますので、MDNはのぞいてみると知らないことがあって意外と楽しいので良いと思います。
それでは読んでいただいてありがとうございました。失礼しますm(_ _)m
Discussion