ظل التصميم المتجاوب لسنوات طويلة يعتمد على أداة واحدة رئيسية هي استعلامات الوسائط Media Queries، التي تغير شكل الصفحة بحسب عرض الشاشة. لكن مع انتشار التصميم القائم على المكونات، ظهرت مشكلة واضحة: المكون الواحد قد يوضع في عمود جانبي ضيق أو في منطقة محتوى واسعة على الشاشة نفسها، فلا يكفي أن يعرف حجم الشاشة، بل يحتاج أن يعرف حجم المساحة التي وُضع فيها. ومن هنا جاءت استعلامات الحاويات Container Queries التي غيرت طريقة التفكير في التصميم المتجاوب، ومعها مجموعة من ميزات CSS الحديثة التي تغني عن كثير من أكواد جافاسكربت. في هذا الموضوع نشرح هذه الميزات وكيف تستفيد منها في مشاريعك.
ما هي استعلامات الحاويات ولماذا نحتاجها؟
استعلامات الحاويات ميزة في CSS تسمح للعنصر بأن يغير تنسيقه بناءً على حجم العنصر الأب الذي يحتويه، لا بناءً على حجم نافذة المتصفح. خذ مثلًا بطاقة عرض لموضوع في منتدى، تريدها أن تظهر بشكل أفقي فيه الصورة بجانب النص عندما تكون المساحة واسعة، وبشكل عمودي مضغوط عندما توضع في الشريط الجانبي. باستعلامات الوسائط وحدها كنت ستضطر لكتابة أصناف مختلفة لكل مكان، أما مع استعلامات الحاويات فالبطاقة نفسها تعرف كيف تتكيف أينما وضعتها.
وتعمل الفكرة بخطوتين بسيطتين: أولًا تعلن أن عنصرًا ما حاوية عبر الخاصية
container-type: inline-size، ويمكنك إعطاؤه اسمًا بالخاصية container-name إن كان في الصفحة أكثر من حاوية. ثانيًا تكتب القاعدة @container (min-width: 400px) وبداخلها الأنماط التي تطبق على العناصر الموجودة داخل هذه الحاوية عندما يتجاوز عرضها القيمة المحددة. وهذه الميزة مدعومة في جميع المتصفحات الحديثة منذ عام 2023، ما يجعل استخدامها آمنًا في أغلب المشاريع اليوم.كما تأتي استعلامات الحاويات مع وحدات قياس جديدة مثل cqi وcqw التي تمثل نسبة من عرض الحاوية، فيمكنك مثلًا جعل حجم خط العنوان داخل البطاقة يتناسب مع عرضها لا مع عرض الشاشة، فتحصل على تصميم متناسق في كل الأماكن دون حسابات معقدة.
المحدد :has() أخيرًا محدد الأب في CSS
طالما تمنى المطورون وجود طريقة في CSS لتنسيق عنصر بناءً على ما يحتويه، وهو ما عرف طويلًا بحلم محدد الأب. وقد تحقق هذا الحلم مع المحدد
:has() المدعوم في جميع المتصفحات الرئيسية منذ أواخر عام 2023. فيمكنك مثلًا تنسيق البطاقة بشكل مختلف إذا كانت تحتوي على صورة، أو تغيير لون حدود النموذج كاملًا إذا كان أحد حقوله غير صالح، أو إخفاء عنصر إذا كان مربع اختيار معين محددًا، وكل ذلك دون سطر جافاسكربت واحد.وتكمن قوة هذا المحدد في أنه ينقل كثيرًا من منطق الواجهة من جافاسكربت إلى CSS، مما يجعل الكود أبسط وأسرع وأقل عرضة للأخطاء. لكن يجب استخدامه بحكمة، فالمحددات الواسعة جدًا التي تفحص الصفحة كلها قد تؤثر في الأداء في الصفحات الضخمة، والأفضل حصر استخدامه في نطاق المكونات.
التداخل الأصلي والطبقات وأدوات حديثة أخرى
من الميزات التي جعلت كتابة CSS أكثر راحة دعم التداخل الأصلي CSS Nesting، الذي يسمح بكتابة أنماط العناصر الفرعية داخل قاعدة العنصر الأب، كما كان المطورون يفعلون في Sass لسنوات، لكن هذه المرة في CSS العادية دون أي أداة معالجة. ومعها جاءت طبقات التتالي
@layer التي تنظم أولوية الأنماط بشكل صريح، فتنهي المعارك المعتادة مع الخاصية important وتعقيدات الأولوية بين ملفات القالب والإضافات.ومن الميزات الحديثة أيضًا واجهة انتقالات العرض View Transitions التي تتيح حركات انتقال سلسة بين حالات الصفحة أو حتى بين الصفحات المختلفة، ودالة color-mix لمزج الألوان، والمحدد :is و:where لتبسيط المحددات الطويلة. وكلها أدوات تقلل الاعتماد على المكتبات الخارجية وتجعل الموقع أخف وأسرع.
كيف تبدأ باستخدامها في مشاريعك؟
أفضل طريقة للبدء هي اختيار مكون واحد متكرر في موقعك، مثل بطاقة المنتج أو بطاقة الموضوع، وتحويله ليعتمد على استعلامات الحاويات بدل استعلامات الوسائط، ثم ملاحظة كيف يصبح استخدامه في أماكن مختلفة أسهل بكثير. ولا تحتاج إلى التخلي عن استعلامات الوسائط، فهي ما زالت الأداة المناسبة لتخطيط الصفحة العام، بينما تتولى استعلامات الحاويات تفاصيل المكونات الداخلية.
وإذا كان جزء من جمهورك يستخدم متصفحات قديمة، فيمكنك الاستفادة من القاعدة
@supports لتقديم تصميم أساسي مقبول للمتصفحات التي لا تدعم هذه الميزات، وتطبيق التحسينات الحديثة فوقه، وهو ما يعرف بالتحسين التدريجي. وتستطيع التحقق من نسب دعم أي ميزة عبر موقع Can I Use قبل اعتمادها في المشاريع الحساسة.الخلاصة
تمر CSS اليوم بأقوى مراحل تطورها، واستعلامات الحاويات Container Queries مع المحدد :has() والتداخل الأصلي والطبقات أدوات تغير طريقة بناء الواجهات جذريًا، وتجعل الكود أبسط وأخف وأقرب إلى التصميم القائم على المكونات. والمطور الذي يتقن هذه الميزات يستطيع الاستغناء عن كثير من الحلول الملتوية والمكتبات الإضافية. فهل جربتم استعلامات الحاويات في مشاريعكم؟ وما ميزة CSS الحديثة التي غيرت طريقة عملكم؟ شاركونا في الردود.
