明日から使えるかもしれないCSS4選

display: grid
box-decoration-break: clone
inset: 0
width: fit-content
まとめ
参考サイト

最近ダイエットして6kg痩せましたが既に2kgリバウンドしました、中田です。
今回は私が最近になって案件で使ったor情報収集する中で知った、ちょっとマイナーかもしれないけど知ってたら明日から使えるかもしれないCSS(長い)を4つほど紹介したいと思います。
最初に言っておきますと、IEでは使えないものもあります。その点はご了承ください(そもそもIEってナンですか？？)

display: grid

1つ目はdisplay: gridです。おいおいグリッドのどこがマイナーなんだよと思わずツッコミを入れてしまった方もいるかもしれないですが、まぁそこは多めにみてください←

例として、以下のようなグリッドレイアウトがあるとします。

フレックスボックスの場合

このようなレイアウトの時に、フレックスボックスで以下のような感じで実装している方も多いと思います。

See the Pen flexの場合 by tomoyuki nakata (@nakata02576) on CodePen.

これでも何ら問題はなく、グリッドが存在しない世界線にいた時の私も上記の方法でレイアウトしていました。
ただ、この方法だと要素の増減に対応するためにネガティブマージンを使っていたり、calcで計算をしていたりと、わかりづらいというか、今風ではないよな〜と思っていました。

グリッドの場合

同じレイアウトを、グリッドを使って実装してみます。

See the Pen flexの場合 by tomoyuki nakata (@nakata02576) on CodePen.

どうでしょうか？フレックスボックスを使ってレイアウトした時に比べると、パッと見でわかりやすく、コードも少なくなったのがわかると思います。

グリッド使ってみたいけど、フレックスボックスでいいか〜と思いグリッドから距離を置いていた私ですが、最近実務で使って思わず感動してしまいました…
細かい説明はコードの方に記載させていただきましたので、気になった方は見てみてください！

box-decoration-break: clone

2つ目はbox-decoration-break: cloneです。こちらは初めて見たという方が多いのではないでしょうか？
このCSSが活躍するのは、カテゴリー名やタグ名の入るラベルが画面幅や親要素の幅によって改行するような場合かと思います。実際に例を見てみましょ〜！

box-decoration-break: cloneなしの場合

まず最初に、box-decoration-break: cloneなしでラベルの実装をしてみます。

See the Pen by tomoyuki nakata (@nakata02576) on CodePen.

この場合に問題になるのが、ラベルの内側の余白です。
普通にpaddingを指定すればいいのでは？と思った方もいるかもしれませんが、それはラベルが1行にしかならない時の話で、今回の例のようにラベルが複数行になってしまうと、paddingでつけた余白が一行目の頭と最終行の末尾にしかつきません。
これだとデザイン的にちょっと微妙ですよね。。

box-decoration-break: cloneありの場合

上記の例に、box-decoration-break: cloneを追加したのが下記になります。

See the Pen box-decoration-break: cloneありの場合 by tomoyuki nakata (@nakata02576) on CodePen.

なんということでしょう、先ほどまで1行目の頭と最終行の末尾にしかついていなかった余白が、各行にしっかりとついています(某リフォーム番組風に)
これなら、中のカテゴリー名やタグ名の長さが変わっても、各行にキレイに余白がついてくれるので安心ですね！

inset: 0

３つ目はinset: 0です。こちらも初めて見たという方が多いかもしれないですが、先日colissさんのこちらの記事で紹介されていたので、それを見たという方もいるんじゃないかなぁと思います。

inset: 0を使わない場合

まずはinset: 0を使わない例から見てみます。今回の例ではハンバーガーメニューの.buttonと、さらにその内側にある三本線の.lineおよび.lineのbefore&afterを、positionとtopやleft、transform等を使った方法で上下左右の中央寄せにしています。

See the Pen box-decoration-break: cloneありの場合 by tomoyuki nakata (@nakata02576) on CodePen.

みなさんお馴染みのよく見る指定方法だと思いますが、これをinset: 0を使ってよりシンプルに記述してみます。

inset: 0を使った場合

ということで、以下がinset: 0で書き換えた例になります。

See the Pen insetを使わない場合 by tomoyuki nakata (@nakata02576) on CodePen.

使わない例で、/* ここが変わります。 */とコメントしていた部分に注目してください。先程のinsetを使わない例では色々とプロパティを指定していましたが、これらをinset: 0に置き換えるだけで少ないコード量で同じレイアウトが再現できました！これだけで同じレイアウトが再現できるなら、使わないに越したことはないですね！
※中央寄せする場合はmarign: autoも一緒に指定してください。

width: fit-content

最後はwidth: fit-contentです。こちらもinset: 0同様、先日colissさんのこちらの記事で紹介されていましたね。(パクリばっかじゃねーか！とか言わないでね?)

width: fit-contentを使わない場合

まずはお決まりの使わない例からです。こちらの例では.card内にある要素の順番を入れ替えるためにflexを使用しているのですが、この場合、.card__titleの背景にテキストの幅分だけ背景色を入れたいとなった時に、.card__titleにdisplay: inline-blockを指定してもflexのせいで効いてくれません。なので、.card__titleがflexの影響を受けないように、1つdivタグを追加して囲ってやる必要があります。

See the Pen width: fit-contentを使わない場合 by tomoyuki nakata (@nakata02576) on CodePen.

これでも大丈夫ですが、できるならHTMLはいじらずCSSだけでなんとか調整したいですよね？ね？(ゴリ押し)

width: fit-contentを使った場合

次にwidth: fit-contentで書き換えたものです。

See the Pen width: fit-contentを使った場合 by tomoyuki nakata (@nakata02576) on CodePen.

先ほどの使わない場合の例と比較すると、.card__title-wrapperがHTMLからなくなり、.card__titleに指定していたdisplay: inline-blockがwidth: fit-contentに書き換わっているのがわかると思います。
これで親要素のflexの影響を受けずに、テキストの幅分だけ背景色を適用することができました。CSSってすごいですね！(何様)