皆さんは今年新たに実装されたCSSの新機能はもう利用されたでしょうか？
2022年も年末に迫り、「Interop 2022」にて取り上げられた、主要な重点分野について対応が進みつつあります。
今回は、全ブラウザ対応済みとはなっていないものの、一部で実装がされた新機能について、個人的に便利だったりおもしろかったものをご紹介したいと思います。
「Interop 2022」とは？
今年、2022年はブラウザのWebサイト表現の互換性問題への対処として「Interop 2022」が開催されました。
これは、世界的なシェアを持つGoogle、Mozilla、Appleや、BocoupとIgalia、そしてChromiumベースのブラウザーを提供しているMicrosoftが協力して、開催されたものです。
たくさんのユーザーを抱えているブラウザであっても、他のブラウザとの互換性が低い場合、そのサービスは開発のコストや・ユーザーの使い勝手の点から、衰退する可能性があります。
そのため、こうした危険を回避するため、それぞれのブラウザがWeb標準のサポート状況を評価する、というプロジェクトです。
昨年の「Compat 2021」で取り上げられた重点分野5点に加えて、今年はさらに10の主要分野での相互運用性の向上に取り組んでいくことが、目標として述べられています。
2022年に追加された機能
続いて、新たに追加された具体的な機能について、私が特に気になった機能を4つ解説していきます。
@container ：CSSコンテナクエリ
これまで、WEBサイトなど、レスポンシブ対応する場合はメディアクエリを利用するのが一般的でした。
しかしながら、メディアクエリはブラウザのWindow幅でしかCSSの切り替えができず、端末によって微妙な調整が必要になるなど、問題点がありました。
その問題を解決できるのが、コンテナクエリです。
コンテナクエリはwindow幅ではなく、親要素の幅を基準に子要素に対して、CSSの切り替え対応ができます。
現在、PCやスマホ・タブレットの多用化が進み、window幅だけでは対応が難しくなってきています。コンテナクエリは、そういった多様化に対応できる非常に便利な機能です。
:has() ：疑似クラス
:has()疑似クラスは、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できるという機能です。
これまではCSSのみでは難しかった表現が、:has()疑似クラスを使うことで実装できる様になりました。
上記のほかにも、「子要素に画像があればflexで横並びにする」なども簡単に実装できるため、個人的にかなり便利な機能だと感じました。
accent-color :フォーム要素の色変更
accent-colorは、カスタマイズに手間がかかったフォーム要素の色を、簡単に変更することができるプロパティです。
これまで、フォーム要素のカスタマイズには単純な色変更の場合でも、擬似要素を使用したりと、しっかりとコードを書く必要がありました。
そんなカスタマイズを、accent-colorは一行で対応できます。
手軽にサイトのイメージに合った色合いにフォーム要素を変更できるのはとても便利です。
mix-blend-mode :CSSのブレンドモード
Illustrator、After Effects、XDや、Figmaなどデザインソフトで用いられる、レイヤーの重なりをCSSでも表現できるプロパティです。
背景の画像を透かしたり、色を重ねたりなど、これまで画像データでしかできなかった表現がCSSで簡単に実装できるようになりました。
効果も豊富に揃っており、デザインソフト要らずでちょっと変わった表現を作れるので、時間のある時にちょっと遊んでみると楽しいです。
まとめ
上記以外にもスクロールスナップや色関数など、興味深い機能が盛りだくさんでした。
改めて勉強してみても、CSSは奥が深いです。
残念ながら一部ブラウザで未対応の機能もありますが、今後の対応を注目しつつ、使いこなせるようしっかり勉強していきたいと思います。