کوئری‌های کانتینر CSS را مثل مدیا کوئری‌های قدیمی استفاده نکنید!

کوئری‌های کانتینر CSS را مثل مدیا کوئری‌های قدیمی استفاده نکنید!

با وجود پشتیبانی گسترده مرورگرها، همچنان شاهد هستیم که «کوئری‌های کانتینر» (Container Queries) در CSS به طرز عجیبی کم‌استفاده می‌شوند و اغلب هم توسط توسعه‌دهندگان به درستی درک نمی‌شوند. خیلی‌ها هنوز آن‌ها را صرفاً جایگزین یا نسخه جدیدی از مدیا کوئری‌ها می‌بینند، در حالی که این دو ابزار برای حل مشکلات کاملاً متفاوتی طراحی شده‌اند.

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

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

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