چگونه با CSS @container کامپوننت‌های واکنش‌گرا بسازیم؟

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

Container Query چیست؟

Container Query قابلیتی جدید در CSS است که به توسعه‌دهندگان اجازه می‌دهد استایل‌هایی را بر اساس اندازه‌ی کانتینر (پدر) یک عنصر اعمال کنند، نه صرفاً اندازه‌ی ویوپورت (صفحه مرورگر). این ویژگی امکان طراحی ماژولارتر و تطبیق‌پذیرتر را فراهم می‌کند.

"Container queries به شما اجازه می‌دهند تا بر اساس ویژگی‌هایی از کانتینر، به یک عنصر استایل بدهید."
— MDN Web Docs

چرا از Container Query استفاده کنیم؟

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

"Container queries مخصوصاً برای طراحی واکنش‌گرا و کامپوننت‌های قابل استفاده مجدد بسیار مفید هستند."
— web.dev

چگونه از Container Query استفاده کنیم؟

1. تعریف کانتکست برای کانتینر

ابتدا باید کانتینر (عنصر والد) را با استفاده از ویژگی container-type مشخص کنید:

2. استفاده از قانون @containe

حالا می‌توانید از @container برای اعمال استایل بر اساس اندازه کانتینر استفاده کنید:

"Container queries به ما این امکان را می‌دهند که عناصر را با توجه به اندازه‌ی پدرشان استایل‌دهی کنیم."
— LogRocket Blog

مثال عملی

فرض کنید یک کارت (Card) داریم که بسته به عرض کانتینرش باید چیدمانش تغییر کند:

HTML

CSS

با این روش، کارت بسته به عرض کانتینرش چیدمان خود را تغییر می‌دهد، نه عرض کل صفحه.

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

Container Queries در همه مرورگرهای اصلی پشتیبانی می‌شود:

• Chrome: نسخه 105 به بالا

• Firefox: نسخه 110 به بالا

• Safari: نسخه 16 به بالا

• Edge: نسخه 105 به بالا

"Container queries بالاخره رسیدند! حالا تقریباً در تمام مرورگرهای اصلی پشتیبانی می‌شوند."
— Josh W. Comeau

جمع‌بندی

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

همین امروز Container Query را تست کنید و طراحی واکنش‌گرای خود را آینده‌نگرانه‌تر کنید!