どうも、何でも屋さんのささぴよです。
「比較的新しいCSSの機能に追いついていきつつ、すぐに使える物を紹介するシリーズ」ということで2回目はコンテナクエリのお話です。
今までだとメディアクエリはありましたが、（ザックリというと）画面幅を基準に振分することしかできませんでした。が、コンテナクエリが登場したことにより、もっと複雑な設定ができる可能性が出てきました。
とても大事なこと
コンテナクエリは、記事執筆時のFireFox v106では対応していません。また、現在見えている範囲でこの先にリリースされるバージョン(v108まで)での対応も予定されていないようです。
つまり、現状でコンテナクエリを使う為にはFireFoxを見捨てる必要があります。日本全体で3%程度のユーザーがいるとされるFireFox(PC版の数字です)を見捨てて良いのかどうかは、ターゲットによって異なってくるでしょう。
最近FireFoxのサポートを打ち切るという発表をするサービスが増えてきているように思いますが、こういうところも関連しているのでは無いかと思います。そもそも現在はHTML5ではなくHTML Living Standard (HTML LS)が標準とされているわけですが、この策定などはWebkit系が主導となったこともあり、古くはNetscape時代から有るMozzila系のFireFoxがちょっとした反発をしているようにも見えます。
どんな新技術も「せーの！」でドン！と搭載されることは殆どありません。各ブラウザで検証を行い、策定された規格に則っているのか等をチェックした上で順次リリースされる物です。おそらくはFireFoxもコンテナクエリを実装する日が来るのだろうと推測しますが、いつになるかわからない状態で採用できるかどうかは、ちょっと悩ましいところです。
勘の鋭い方ならお気づきかもしれませんがポリフィル(Polyfill)が用意されています。コレを使えば FireFoxでも対応させることは可能ですが、ポリフィルを信用していいかどうかという問題が出るかもしれませんので、コーダーや案件としての方針次第なのかなと思います。
Chromeについてはv101からv104までだと、機能のフラグをオンにする必要があります。またv93からv100までではそれ以外の注意点もあります。特殊な環境でブラウザのアップデートを止めている場合などには注意が必要です。
サポート状況についてはCanIUseのサイトを確認するのをお勧めします。
改めてコンテナクエリとは
とはいえ、便利ですので使えるなら使ってみたい。そんなこともあるとおもいます。
まずはコンテナクエリそのものがどんな物かという点です。
先程もお話に出したとおり、メディアクエリが画面幅を基準に振り分けできる物だとしたら、コンテナクエリは要素の幅を基準に振り分けできる物です。
例えば、画面幅に対して2カラムで配置してるカード形式の要素があったとします。左に画像・右にタイトルなどが並んでいるとしましょう。その際に、画面幅が狭くなったら画像とタイトルを縦に並べ替えたいということがあると思います。でも、コレは本来「画面幅」が基準なのでは無く、「入れているブロックの幅が狭くなったから」というのが理由であるはずです。コレをかなえてくれるのがコンテナクエリです。
コンテナクエリの使い方
まずは基準となるブロックに contain プロパティを記述します。いろいろと指定できることはあるのですが、個人的には content が一番登場するのではないかと思います。 contain: content; と記述するのは contain: layout paint; とすることと同等とされており、外部の要素が影響しないようにした上でコンテナ内に全ての要素をおさめるという意味合いがあります。（逆にこれ以外を使うシーンがイメージできませんでした。）実際のところコレはおまじない程度の役割になるのかもしれませんが、書いておいて損はないのかなと思いました。検証した上で要らないようなら外しても良いかもしれませんね。
それを踏まえて、ついにコンテナクエリ本体です。@container を利用します。@media の時と同じように記述するので、 @conteiner (max-width: 600px) のような書き方になります。続けて { } の中にCSSを記述するわけですが、このときの記述は子要素を含める形になります。基準となるブロックの記述は不要です。勝手に親要素を判断してくれるというわけです。
コレによって「親要素の幅によって表示を変える」という記述を書くことが出来ました。簡単ですね！
いいなと思った使いどころ
記事を書くに当たっていろいろな方の書かれた情報を見ていたわけですが、一番スマートだと感じたのはページネーションにこの技を使うというパターンです。
親要素が狭ければ縦に「前へ」と「次へ」を並べる…少し広がったら右左に並べる…更に広がったら間に各ページに飛べる直リンクを置く…というような変化を作る事ができます。この様な見せ方は前々から有ったことはあったのですが、デザインの本質として「画面幅」を基準に判断されるわけではなく、あくまでも要素が入るエリアのサイズが基準で決まるべきであるという点でとても納得感がありました。
おまけ : resizeプロパティとの併用
resize プロパティを併用すると検証がしやすくなります。
親要素の方（つまりは contain を指定したブロック）にresize: both; としてあげるとブロックのリサイズが可能になります。 resize: both; でも良いでしょう。これで親要素をリサイズすることで、動作確認ができますので、便利ですね。
ということで、簡単ではありますが、コンテナクエリの紹介でした。
既に活用しているサイトなどもあるようですが、個人的に気になるのはポリフィル周りです。気軽に入れても良いと思いますが、使う物が増えるということはメンテナンスの問題が発生してきます。
制作した全てのサイトで何を使っているか管理するのは無謀ですので、何かあったときの事を考えると個人的には「無くて済むなら使いたくない」という心情があります。
使っていることが悪いという話ではないので、「どんどん使っていく！」というやり方もアリですが、一歩立ち止まってメリット・デメリットを天秤にかけた上で対応するのが良いのかなと常々思っていたりします。
このシリーズで紹介して欲しい内容があれば、是非Twitterなどでお知らせ下さい。全てにお応えできるかはわかりませんが、参考にしつつ記事を増やして行けたらと思います。
ではまた次回！