نحوه استفاده از کوئریهای کانتینر CSS: تفاوت با مدیا کوئریهای سنتی
صادقانه بگویم، زمانی که کوئریهای کانتینر CSS برای اولین بار عرضه شدند، من از این موضوع بیخبر بودم. وقتی بالاخره در مورد آن شنیدم، اولین فکرم این بود که «چرا به این نیاز دارم وقتی مدیا کوئریها از قبل وجود دارند؟»
با توجه به اطلاعاتی که اکنون دارم، از این واکنش خود پشیمانم، اما دانستن اینکه تنها نبودم، آرامشبخش بود. در واقع، بسیاری از ما همین تصور را داشتیم.
آنچه مرا متحیر میکند این است که کوئریهای کانتینر ویژگی جدیدی نیستند، زیرا در حال حاضر حدود 94 درصد پشتیبانی مرورگر را دارند. با این حال، افراد بسیار کمی واقعاً از آن استفاده میکنند. طبق نظرسنجی سایت موزیک «وضعیت CSS»، 86 درصد از توسعهدهندگان از کوئریهای کانتینر آگاه هستند، اما تنها 41.4 درصد از آنها واقعاً استفاده میکنند. نظرسنجیها ممکن است سوگیرانه باشند و کاملاً نماینده کل حوزه ما نباشند، اما این یکی مطمئناً بهترین شاخصی است که در اختیار داریم.
کوین پاول نیز در SmashingConf آمستردام 2026 در مورد این موضوع صحبت کرد: «پذیرش کوئریهای کانتینر وحشتناک بوده است.» و این برای من بسیار عجیب است، با توجه به اینکه توانایی کامپوننتها برای تطبیق با اندازه کانتینر بیرونی خود، سالها در صدر لیست آرزوهای بسیاری از توسعهدهندگان CSS بوده است.
من به این اندازه که مردم چگونه از کوئریهای کانتینر استفاده میکنند، علاقهمند نیستم. نمیتوانم همه را در نظر بگیرم، اما از آنچه دیدهام – از جمله در تلاشهای اولیه خودم – بسیاری از ما به اشتباه از آنها استفاده میکنیم.
نتیجه نهایی این است که استفاده نادرست به همان تصوری برمیگردد که من هنگام یادگیری آنها داشتم: در نگاه اول کاملاً شبیه مدیا کوئریها به نظر میرسند. و از آنجایی که شبیه به هم به نظر میرسند، به راحتی میتوان فرض کرد که اهداف مشابهی دارند و به یک شکل کار میکنند.
اما اینطور نیست.
توجه: باید از ابتدا بگویم که آنچه در این مقاله بر آن تمرکز دارم، استفاده از کوئریهای اندازه کانتینر است، یعنی یک تکنیک طراحی واکنشگرا برای پاسخ به اندازه یک کانتینر خاص. همچنین کوئریهای سبک کانتینر نیز وجود دارند که به سبکهای محاسبهشده یک کانتینر پاسخ میدهند (و در زمان نگارش این مقاله آزمایشی هستند).
مدیا کوئریها به بیرون نگاه میکنند
ویوپورت یک واسطه است. همیشه همینطور بوده است. مدیا کوئریها چیزی بودند که به ما این توهم را دادند که تنها عرض صفحه نمایش مسئول چگونگی تطبیق برنامههای واکنشگرا با محیط خود است.
از خود بپرسید: وقتی @media را مینویسید، از مرورگر چه میپرسید؟
من، مانند اکثر توسعهدهندگان، از مرورگر میپرسم: «عرض صفحه نمایش در حال حاضر چقدر است؟» همین.
مدیا کوئریها به زیبایی به این سوال پاسخ میدهند، اما چه اتفاقی میافتد وقتی این کامپوننت .card در یک سلول گرید قرار میگیرد که در یک صفحه دسکتاپ 1920 پیکسلی، 300 پیکسل عرض دارد؟
مدیا کوئری اهمیتی نمیدهد؛ کار خود را انجام میدهد. ویوپورت همچنان 1920 پیکسل است، بنابراین min-width: 1024px فعال میشود و سبکهای کوئری منطبق اعمال میشوند، حتی اگر کارت تنها 300 پیکسل فضا برای کار داشته باشد. در نهایت، همه چیز در کارت تغییر شکل میدهد، سرریز میشود یا فشرده میشود.
«مدیا کوئریها احمق هستند. نه از نظر مفهوم، بلکه از این نظر که اطلاعات زیادی ندارند. در واقع، اکثر مردم فرض میکنند که آنها بیشتر از آنچه هستند میدانند.» — کوین پاول
معمول است که طراحی واکنشگرا را صرفاً سیستمی برای بهروزرسانی طرحبندیهای کامل صفحه در نظر بگیریم، مانند رفتن از دو ستون در یک صفحه بزرگ به یک ستون در یک صفحه کوچک.
کوئریهای کانتینر به درون نگاه میکنند
کوئریهای کانتینر هوشمندتر از آن هستند. آنها طرحبندیهای واکنشگرا را بیشتر به آنچه در داخل یک کامپوننت اتفاق میافتد، وابسته میکنند تا به زمینه بیرونی که هیچ بینشی نسبت به محتویات یک کامپوننت ندارد. بیشتر شبیه این است: «در حال حاضر چقدر فضا برای من در این مکان خاص در دسترس است؟»
این تغییر همه چیز را دگرگون میکند. کارت تحت تأثیر ویوپورت قرار نمیگیرد؛ تنها نگرانی آن این است که آیا wrapper والد کامپوننت .card حداقل 450 پیکسل فضای خطی (یعنی افقی در حالت نوشتاری چپ به راست) دارد یا خیر. اگر این شرط درست باشد، کامپوننت افقی میشود؛ در غیر این صورت، به حالت نمایش بلوک پیشفرض خود باز میگردد.
طرحبندی «ماکرو» در مقابل طرحبندی «میکرو»
یک راه بسیار جالب برای تمایز بین کوئریهای @media و @container، نوع طرحبندی است.
مدیا کوئریها برای طرحبندی «ماکرو» هستند؛ آنها به بیرون نگاه میکنند. مواردی مانند ساختار صفحه، هدر که کل پنجره را پوشش میدهد، فوترها، طرحبندی اصلی گرید، تنظیمات سیستم (prefers-color-scheme)، قابلیتهای دستگاه (صفحههای لمسی). هر چیزی که عمدتاً برای کل ساختار صفحه صادق است.
کوئریهای کانتینر، به نظر من، برای طرحبندیهای «میکرو» هستند، یعنی بیشتر چیزهایی که در داخل طرحبندی «ماکرو» قرار میگیرند. ما از آنها زمانی استفاده میکنیم که هر محتوایی نیاز به تطبیق واکنشگرا با فضایی که به آن اختصاص داده شده است، داشته باشد. کامپوننتهایی که به ذهن میرسند، مواردی مانند کارتها، ویجتها، فرمها، ناوبری و غیره هستند.
به عبارت دیگر، به «طرحبندی صفحه» در مقابل «طرحبندی کامپوننت» فکر کنید.