Information
いにしえのコーダー・フロントエンジニアに送る、いつの間にか追加されていたCSSの新たな便利機能
InternetExplorerのサポートが終了してからというもの、CSSの新機能が続々と追加され各ブラウザがそれらに対して対応していくサイクルもかなり早くなってきました。
とはいえ、忙しい中それらを追えていない方も多いのではないでしょうか。
そこで今回はいつの間にか追加されていた機能の中で私が特に便利に感じた機能について紹介していきたいと思います。
親要素の幅を子要素に合わせる「width: fit-content」
親要素の幅を子要素に合わせることは今までdisplay: inline-blockであったりjavascriptの制御によって行われていましたが、このプロパティが登場したことによりCSSのみで簡単に実装できるようになりました。
サンプル
ウィンドウ幅ではなく親要素の幅によってスタイル分岐させる「コンテナクエリ」
レスポンシブデザインをする場合、ウィンドウ幅によってスタイルを切り替えるのが通常でしたが、コンテナクエリが実装されたことにより親要素の幅によってスタイルを変更できるようになりました。
サンプル
要素を指定した形に切り抜く「clip-path」
三角形を表現する際にCSSではborderなどを裏技的に使用したやり方が主流でしたが、clip-pathプロパティが登場したおかげでその必要は無くなりました。
polygon関数による指定であれば座標をパーセントで設定できるため、リサイズにも適応できます。
サンプル
色相ごとのコントラストを揃えやすくする「color: oklch()」
色相を変えやすい色関数といえばhslがありましたが、これで色相を変えた場合黄色がやたら明るくなってしまって、上にのっているテキストが読みづらくなるなどということがありました。
oklchではコントラストを維持しながら色相を変えるため、カラーパレットなどを作成する際に非常に便利なものとなっています。
下のサンプルのHueを調整してみてください。色相を変更してもテキストの読みやすさなどは維持されているかと思います。
サンプル
注意点としてLightnessやChromaの上限下限が色相によって異なっているため、LightnessやChromaの値によってはコントラストが適切に維持されなくなります。
LightnessやChromaの設定には以下のサイトが役に立ちます。
透過要素の背景に視覚効果を与える「backdrop-filter」
透過した要素をぼかして表示するなどといった表現がこのプロパティによって実現できるようになりました。
サンプル
モーダル内のスクロール伝搬を制御する「overscroll-behavior」
モーダル内でスクロールをして一番下までいった際にbodyまでスクロールしてしまうということがありましたが、このプロパティを設定することによりスクロールの伝搬を制御できるようになりました。
ただし内部要素の高さがこのプロパティを設定した要素の高さを超えていない場合はそのまま上位の要素がスクロールされてしまうため、それを抑えるためには子要素インナーを設けにmin-height: calc(100%+1px)を設定するなどの工夫が必要です。
サンプル
テキスト上下のハーフレディングを取り除く「text-box-trim」
テキストの上下にはline-heightによるハーフレディングという余計なスペースが空いてしまい、長年デザイナーを悩ませていましたがtext-box-trimでついにその悩みを解消できるようになりました。
特に新しいプロパティなので、記事作成時点では一部のブラウザのみ使用可能です。
サンプル
文字詰めをいい感じにしてくれる「font-feature-settings」
「カッコ」などの前後には余計なスペースなどがありますが、こういったスペースをより視覚的に文字詰めできるようになりました。
このプロパティで文字詰めをした場合かなり文字間が窮屈になるためletter-spacingなどを使って多少調節などしたほうが良さそうです。
サンプル
個人的にこれらの機能の追加によってCSSによるストレスはかなり解消されたように感じています。
特にコンテナクエリなどは今後制作していく上での標準になっていくのではないでしょうか。
