آیا مدیا کوئری‌های سنتی دیگر جوابگو نیستند؟ آشنایی با کانتینر کوئری‌ها در CSS

آیا مدیا کوئری‌های سنتی دیگر جوابگو نیستند؟ آشنایی با کانتینر کوئری‌ها در CSS

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

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

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

به نقل از کدیران

ورود کانتینر کوئری‌ها به دنیای CSS یکی از مهم‌ترین تغییرات پارادایم در طراحی واکنش‌گرا طی سال‌های اخیر بوده است. برای بیش از یک دهه، مدیا کوئری‌ها تنها ابزار در دسترس ما برای تطبیق رابط کاربری با اندازه‌های مختلف صفحه بودند؛ اما این ابزار بر یک فرض اساسی استوارند: چیدمان یک المان به اندازه‌ی دیدگاه کاربر وابسته است. در دنیای مدرن توسعه‌ی وب که پر از کامپوننت‌های قابل استفاده‌ی مجدد و سیستم‌های طراحی مقیاس‌پذیر است، این فرض دیگر پاسخگو نیست.

کافی است یک کامپوننت کارت محصول را تصور کنید؛ ممکن است در صفحه‌ی اصلی کنار سایر کارت‌ها نمایش داده شود، در یک سایدبار قرار گیرد یا داخل یک مودال ظاهر شود. در تمام این حالت‌ها اندازه‌ی دیدگاه کاربر ثابت می‌ماند، اما فضای موجود برای کامپوننت به‌شدت متغیر است. مدیا کوئری در این سناریوها فلج می‌شود، زیرا نمی‌تواند زمینه‌ی محلی یک المان را درک کند. کانتینر کوئری‌ها این مشکل را با تعریف یک کانتینر برای هر المان و ارائه‌ی واحدهایی مثل cqw حل می‌کنند.

پیش‌بینی می‌شود با بلوغ بیشتر فریم‌ورک‌ها و کتابخانه‌های کامپوننت‌محور، استفاده از کانتینر کوئری‌ها به سرعت افزایش یابد و بخش بزرگی از منطق مدیا کوئری فعلی جای خود را به این رویکرد مبتنی بر زمینه بدهد. ترکیب این ویژگی با امکانات جدید CSS مثل :has() و زیرگریدها (Subgrids) امکان ساخت کامپوننت‌های واقعاً مستقل و قابل حمل را فراهم می‌کند. برای تیم‌هایی که روی سیستم‌های طراحی مقیاس‌پذیر کار می‌کنند، یادگیری عمیق این مفهوم دیگر یک انتخاب نیست، بلکه ضرورت است.

منبع: SmashingMagazine (مشاهده متن اصلی)