概要
2023/2/14から全ブラウザで対応になったコンテナクエリについて、
興味を持ってもらうための記事です。
コンテナクエリとは
Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.
コンテナー クエリは、ビューポートサイズやその他のデバイス特性に基づいて要素にスタイルを適用するメディア クエリに代わるものです。
引用： CSS Container Queries - CSS: Cascading Style Sheets | MDNより
メディアクエリでは、「画面幅」を基準にスタイルの分岐をしていましたが
コンテナクエリでは、基準を「親要素のサイズ」に設定することができます。
ブレイクポイントをこちらで決められるので、
レスポンシブのスタイリングがより柔軟になりますね
使い方
使い方は簡単です。
- 基準にしたい要素に、
container-type:でプロパティを追加する -
@containerを@mediaと同じように使うだけ
使えるプロパティや詳細は、MDNなどでご確認ください。
TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらい での鹿野さんの資料が大変わかりやすかったです。
対応状況
2023/2/14時点でfirefoxでも対応されました。
バージョンの確認をしながら、使える際はどんどん使っていきましょう。
引用： https://caniuse.com/mdn-css_at-rules_container
どんなところで使えそう？
例えば、メディアサイトによくありそうな、記事リストの実装に役立ちそうです。
- サイドバー
- 記事の中
- サイト下部
など、さまざまな場所に配置したい・場合によってレイアウトを変えたいものに有効なのではないでしょうか。
demo
実際に、記事リストコンポーネントをコンテナクエリで実装してみました。
親要素のサイズによってレイアウトも変わってくれるので、ありがたいですね！
まとめ
今までだと、別々のコンポーネントとして実装する必要があったものも、
コンテナクエリを使うことで、1つのコンポーネントとして管理することができるようになりそうです。
使いまわせるコンポーネントをどんどん作っていきましょう！