Ahmad Shadeed はコンテナー クエリに早くから飛びつき、 例のコレクションの増加 日常のパターンに基づいています。
そして、あなたがそれを逃した場合、彼の コンテナー クエリに関する最新の投稿 今月 Chrome 105 に登場して以来、それらがどのように機能するかをカバーする素晴らしい仕事をしています (まもなく Safari 16 で見られるでしょう)。 いくつかの選択のハイライトと要点:
- コンテナは
container-type財産。 以前のデモと提案は使用していましたcontainを代わりにお使いください。 - コンテナ クエリは、ビューポート サイズをターゲットにするためにずっと書いてきたメディア クエリと非常によく似ています。 だから、のようなものではなく
@media (min-width: 600px) {}、 我々は持っています@container (min-width: 600px) {}. これにより、これらのメディア クエリの多くをコンテナー クエリに変換する作業がかなり簡単になり、新しいブレークポイント値を見つける作業が不要になります。 - コード内でコンテナーを区別しやすいように、コンテナーに名前を付けることができます (例:
container-name: blockquote).
よくやった、アフマド！ そして、共有してくれてありがとう！
