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

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

با وجود پشتیبانی گسترده مرورگرها، هنوز هم استفاده از کوئری‌های کانتینر (Container Queries) به‌طرز عجیبی کم است و خیلی‌ها این ویژگی قدرتمند را اشتباه متوجه می‌شوند. شاید دلیلش کلمه «کوئری» باشد؛ همین که آن را می‌شنوید، ذهنتان ناخودآگاه به سمت همان مدیا کوئری‌های قدیمی و آشنا می‌رود و توقع دارید دقیقاً مثل آن‌ها رفتار کنند.

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

این تغییر زاویه دید، برای کامپوننت‌های قابل‌استفاده مجدد (reusable components) یک نجات‌بخش واقعی است. کارت محصول، هدر یا ویجتی که در صفحات مختلف و در بطن لِی‌اوت‌های گوناگون استفاده می‌شود، حالا می‌تواند طبیعی و روان با محیط اطرافش سازگار شود. قانون ساده این است: اگر هدفتان واکنش به اندازه صفحه دستگاه است، مدیا کوئری همان کافی است؛ اما اگر می‌خواهید کامپوننتی مستقل و قابل‌حمل داشته باشید که در هر جایی که گذاشتید درست به نظر برسد، وقتش است که جدی به کوئری‌های کانتینر روی بیاورید.

به نقل از کدیران این مقاله به یکی از جالب‌ترین «تغییر پارادایم‌های آرام» در دنیای CSS اشاره می‌کند؛ تحولی که بدون سر و صدای زیاد، شیوه ساخت رابط‌های کاربری مدرن را زیر و رو می‌کند. سال‌هاست توسعه‌دهندگان مدیا کوئری‌ها را تنها راه ممکن برای طراحی واکنش‌گرا می‌دانند و همین وابستگی طولانی‌مدت، نوعی تفکر «کار می‌کند، پس دست نزن» در اکوسیستم فرانت‌اند ایجاد کرده است. مشکل اساسی مدیا کوئری‌ها این است که کاملاً «صفحه‌محور» هستند؛ یعنی کامپوننت شما از شرایط محیطی خودش بی‌خبر است و صرفاً دستوراتی از بیرون دریافت می‌کند. در معماری‌های مدرن مبتنی بر کامپوننت، این رویکرد به یک گلوگاه جدی تبدیل می‌شود، چون تیم‌ها را مجبور می‌کند برای هر لِی‌اوت جدید کلاس‌های شرطی و کدهای تکراری بنویسند. پیش‌بینی کدیران این است که با بلوغ بیشتر ابزارها و افزایش آگاهی، کوئری‌های کانتینر به‌ همراه واحدهای کانتینری و style queries به یک مهارت پایه تبدیل می‌شوند؛ درست مثل مسیری که Flexbox و Grid طی کردند. کتابخانه‌های UI و ابزارهای build نیز به‌تدریج APIهای خود را بر این اساس بازنویسی می‌کنند. برای تیم‌هایی که محصولات بزرگ و چندپلتفرمی می‌سازند، یادگیری این الگو دیگر یک انتخاب نیست، بلکه پیش‌نیازه توسعه و پذیرش یک سیستم‌طراحی یکپارچه و مقیاس‌پذیر است.

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