آموزش Container Queries در CSS با مثال و دموی زنده (۱۴۰۵)

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

Container Queries در CSS چیست؟

Container Query یک قانون CSS است که استایل یک عنصر را بر اساس اندازهٔ نزدیک‌ترین والدی که به‌عنوان کانتینر تعریف شده تغییر می‌دهد. یعنی به‌جای پرسیدن «صفحه چقدر عرض دارد؟» می‌پرسیم «جایی که این کامپوننت در آن قرار گرفته چقدر عرض دارد؟». نتیجه، کامپوننت‌هایی است که هر جای سایت بگذارید، درست نمایش داده می‌شوند.

تفاوت Container Query و Media Query

این دو رقیب هم نیستند. Media Query هنوز برای چیدمان کلی صفحه (تعداد ستون‌ها، منوی موبایل، فاصله‌های اصلی) بهترین ابزار است. Container Query برای اجزای داخلی مثل کارت، ویجت، فرم و بنر استفاده می‌شود. اگر با چیدمان‌های مدرن آشنا نیستید، اول آموزش Flexbox و آموزش CSS Grid را ببینید؛ Container Queries در کنار این دو قدرت واقعی‌اش را نشان می‌دهد.

نحوهٔ استفاده از Container Queries در دو قدم

1. تعریف کانتینر روی والدبه عنصر والد بگویید که کانتینر است. مقدار inline-size یعنی فقط عرض را بررسی کن (در بیشتر موارد همین کافی است).
2. نوشتن قانون @container برای فرزندانمثل Media Query شرط بنویسید، با این تفاوت که شرط به عرض والد برمی‌گردد.

/* قدم ۱: والد را کانتینر کنید */
.card-container {
  container-type: inline-size;
}

/* حالت پیش‌فرض (کانتینر باریک): عمودی */
.card {
  display: grid;
  gap: 12px;
}

/* قدم ۲: وقتی کانتینر حداقل 420px عرض داشت، افقی شو */
@container (min-width: 420px) {
  .card {
    grid-template-columns: 40% 1fr;
    align-items: center;
  }
}

دموی زنده: عرض کانتینر را تغییر دهید

نام‌گذاری کانتینر با container-name

وقتی کانتینرها تو در تو هستند، @container به نزدیک‌ترین کانتینر والد نگاه می‌کند. اگر بخواهید شرط را به یک کانتینر مشخص وصل کنید، به آن نام بدهید. خاصیت کوتاه container نام و نوع را با هم می‌گیرد:

.sidebar {
  container: sidebar / inline-size;
  /* معادل:
     container-name: sidebar;
     container-type: inline-size; */
}

@container sidebar (max-width: 300px) {
  .widget-title { font-size: 1rem; }
  .widget-thumb { display: none; }
}

واحدهای Container Query: cqw، cqh، cqi و...

همان‌طور که vw درصدی از عرض صفحه است، واحدهای cq درصدی از اندازهٔ کانتینر هستند. بهترین کاربردشان تایپوگرافی و فاصله‌های داخلی کامپوننت است:

.card h3 {
  /* حداقل 16px، حداکثر 24px، در این بین 5٪ عرض کانتینر */
  font-size: clamp(1rem, 5cqi, 1.5rem);
}

پشتیبانی مرورگرها از Container Queries

Size Container Queries از سال ۲۰۲۳ در همهٔ مرورگرهای اصلی پشتیبانی می‌شود و جزو ویژگی‌های Baseline است؛ پس برای پروژه‌های امروز بدون نگرانی قابل استفاده است:

اگر باید از مرورگرهای خیلی قدیمی هم پشتیبانی کنید، استایل پیش‌فرض را طوری بنویسید که بدون Container Query هم قابل قبول باشد (مثلاً چیدمان عمودی) و حالت‌های پیشرفته را داخل @container بگذارید. این همان رویکرد progressive enhancement است. قابلیت جدیدتر Style Queries (مثل @container style(--theme: dark)) هنوز در همهٔ مرورگرها کامل نیست و بهتر است فعلاً فقط به‌عنوان بهبود اختیاری از آن استفاده کنید.

اشتباهات رایج در استفاده از Container Queries