管理画面のコーディングをしていたら、コミット前に最終確認をと見たデザイン仕様書の欄外にレスポンシブ指示が書いてあるのを発見しました。ちょっとギョッとしながらも、せっかくなので前から気になっていたコンテナクエリで対応してみることにしました。
コンテナクエリとは、ビューポートの幅ではなく親要素の幅に応じてスタイルを変えられるCSS機能です。「このコンポーネントが何pxになったときにレイアウトを変える」という指定ができるので、どのページに置いても同じコンポーネントが表示上賢く振る舞えるようになります。
書き方自体はそんなに難しくはなく、むしろ楽しかったんですが、書き終わった後で「あれ、これブラウザ対応大丈夫だっけ…」と不安になってきました。ひとまずこれで納品してみて、もし動かないと言われたらメディアクエリに書き換えようかなという方針にしました。
それで改めて気づいたんですが、もしメディアクエリで書こうとしたら、今回は親パーツがページごとに変わるのでページ2枚分にそれぞれ書かないといけないんですよね。コンテナクエリなら親要素を定義するだけでいいので、確かに便利です。ただ便利になった分、「これはコンポーネント側で完結させよう」「ここはページ側に持たせよう」みたいな細かい設計の判断が増えていく感じもあって、その辺が今後の悩みどころになりそうです。
ふと思ったのが、AIで作業が速く回るようになってきた分、こういう細かい設計判断やクオリティの部分を人間が丁寧に拾っていく形になっていくのかな、ということ。全部AIに任せれば終わりというより、AIが速く動ける分、人間の目と判断がより大事になっていく感じがしました。
初コンテナクエリ、なんとか使えた感じはあります。ブラウザ対応はちょっとドキドキしながら待ちます。
