کوئری‌های کانتینر CSS را مثل مدیا کوئری‌های معمولی در نظر نگیرید!

کوئری‌های کانتینر CSS را مثل مدیا کوئری‌های معمولی در نظر نگیرید!

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

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

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

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

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

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

با توجه به حرکت پرشتاب صنعت وب به سمت معماری مبتنی بر کامپوننت در اکوسیستم‌هایی مثل React، Vue و Web Components، پیش‌بینی می‌شود کوئری‌های کانتینر خیلی زود به استاندارد طلایی سیستم‌های دیزاین تبدیل شوند. تیم‌هایی که زودتر این الگو را در گردش کار خود بپذیرند، از مزیت کد تمیزتر، کاهش تکرار، نگهداری ساده‌تر و سازگاری طبیعی کامپوننت‌ها در هر محیطی بهره‌مند می‌شوند. در نهایت، آینده طراحی وب دیگر فقط واکنش‌گرا نیست، بلکه «بفهم‌گرا» و وابسته به بستر (context-aware) است و کسانی که این تغییر را زودتر بپذیرند، یک قدم جلوتر خواهند بود.

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