تا امروز media query تنها ابزار CSS برای طراحی واکنش‌گرا بوده است. مشکل اینجاست که media query فقط عرض صفحه نمایش را می‌بیند، نه فضای واقعی که هر کامپوننت در اختیار دارد. حالا با Container Queries، این محدودیت برطرف شده و طراحان می‌توانند کامپوننت‌ها را کاملاً مستقل از صفحه طراحی کنند.

کوئری کانتینر چیست؟

Container Query به مرورگر می‌گوید استایل یک عنصر را بر اساس اندازه والد آن تغییر بده، نه اندازه کل صفحه. این یعنی یک کارت محصول می‌تواند در ستون باریک سایدبار یک شکل بگیرد و در بخش اصلی صفحه شکلی کاملاً متفاوت، بدون اینکه هیچ اطلاعاتی از ساختار کلی صفحه داشته باشد.

برای فعال کردن این قابلیت، ابتدا باید یک عنصر والد را به‌عنوان Containment Context معرفی کنیم. این کار با ویژگی container-type انجام می‌شود که می‌تواند مقادیر inline-size، size یا normal بگیرد. رایج‌ترین حالت استفاده، inline-size است که فقط عرض عنصر را زیر نظر می‌گیرد.

نمونه کد

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

با استفاده از container-name، می‌توان چند کانتینر مختلف در یک صفحه تعریف کرد و در کوئری‌ها دقیقاً مشخص کرد کدام کانتینر مدنظر است. این ویژگی به‌خصوص در سیستم‌های طراحی بزرگ که کامپوننت‌های تودرتو دارند، بسیار کاربردی است.

چرا برای طراحان مهم است؟

در دنیای کامپوننت‌محور امروز، رابط کاربری باید مستقل از مکان قرارگیری‌اش درست کار کند.

پشتیبانی مرورگرها و نکات عملی

خوشبختانه امروز اکثر مرورگرهای مدرن از جمله Chrome، Edge، Safari و Firefox از Container Queries پشتیبانی می‌کنند. با این حال برای پروژه‌هایی که باید از مرورگرهای قدیمی‌تر پشتیبانی کنند، بهتر است از تکنیک Progressive Enhancement استفاده شود؛ یعنی طراحی پایه بدون کوئری کانتینر کار کند و در مرورگرهای جدید رفتار پیشرفته‌تری اضافه شود.

نکته مهم دیگر، واحد جدید cqw و cqh است که اندازه‌ها را نسبت به عرض یا ارتفاع کانتینر محاسبه می‌کند، مشابه واحدهای vw و vh که نسبت به viewport کار می‌کردند. این واحدها امکان طراحی تایپوگرافی واکنش‌گرا در سطح کامپوننت را نیز فراهم می‌کنند.

جمع‌بندی

Container Queries یکی از مهم‌ترین به‌روزرسانی‌های CSS در سال‌های اخیر است و به‌تدریج جایگزین بسیاری از راه‌حل‌های جاوااسکریپتی برای واکنش‌گرایی کامپوننت‌ها می‌شود. آشنایی با این ابزار و به‌کارگیری آن در پروژه‌های واقعی، مهارتی است که هر توسعه‌دهنده فرانت‌اند امروز باید آن را در کارنامه خود داشته باشد.