🧊
displayプロパティの新しい2値構文がきた。
はじめに
displayプロパティの新しい2値構文対応が来たみたいです！！！
個人的にアウトプット用として記事を残しますが、参考になれば幸いです☺️
displayプロパティの2値構文とは？
従来のキーワードに加えて、2つのキーワード値を設定する
/**1つ目のキーワード値**/
<display-outside>
/**2つ目のキーワード値**/
<display-inside>
/**以下のように記載する**/
display: <display-outside> <display-inside>;
それぞれのキーワード値に設定できる値
<display-outside>に設定できる値
blockinlinerun-in
<display-inside>に設定できる値
flowflow-roottableflexgridruby
記述方法
/* 従来のCSS */
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
/* 新しい記述方法（2値構文） */
display: block flow; /*display: block;*/
display: inline flow; /*display: inline;*/
display: inline flow-root; /*display: inline-block;*/
display: block flex; /*display: flex;*/
display: block grid; /*display: grid;*/
ブラウザのサポート状況
現時点でサポートされてるブラウザは以下です。
・Safari
・Firefox
※ChromeとEdgeは7月リリース予定の115でサポートとのことです。
参考記事
Discussion