استعلامات الحاوية في CSS @container: نظرة معمقة

عالم تطوير الويب في تطور مستمر، ومعه يجب أن تتطور أساليبنا في التصميم المتجاوب. بينما كانت استعلامات الوسائط (media queries) هي المعيار لفترة طويلة لتكييف التخطيطات مع أحجام الشاشات المختلفة، إلا أنها غالبًا ما تكون قاصرة عند التعامل مع التصاميم المعقدة القائمة على المكونات. هنا يأتي دور استعلامات الحاوية في CSS (CSS Container Queries) – وهي ميزة جديدة قوية تتيح لنا إنشاء مكونات قابلة للتكيف وإعادة الاستخدام حقًا. يقدم هذا المقال دليلاً شاملاً لفهم وتطبيق استعلامات الحاوية في CSS، مما يمكنك من بناء واجهات مستخدم أكثر مرونة وسهولة في الصيانة.

ما هي استعلامات الحاوية؟

استعلامات الحاوية، التي تُعرّف بقاعدة @container، تشبه استعلامات الوسائط ولكنها بدلاً من الاستجابة لحجم منفذ العرض (viewport)، فإنها تستجيب لحجم أو حالة عنصر *حاوية*. هذا يعني أن المكون يمكنه تعديل مظهره بناءً على المساحة المتاحة داخل حاويته الأبوية، بغض النظر عن حجم الشاشة الكلي. وهذا يسمح بسلوك استجابة أكثر دقة وإدراكًا للسياق.

تخيل مكون بطاقة يعرض معلومات منتج. على شاشة كبيرة، قد يعرض وصفًا تفصيليًا وصورًا متعددة. ولكن، داخل شريط جانبي أصغر، قد يحتاج إلى عرض عنوان وصورة مصغرة فقط. مع استعلامات الحاوية، يمكنك تحديد هذه التخطيطات المختلفة داخل المكون نفسه، مما يجعله مكتفيًا ذاتيًا وقابلاً لإعادة الاستخدام حقًا.

لماذا نستخدم استعلامات الحاوية؟

توفر استعلامات الحاوية العديد من المزايا الهامة مقارنة باستعلامات الوسائط التقليدية:

• استجابة على مستوى المكون: تتيح لك تحديد سلوك الاستجابة على مستوى المكون، بدلاً من الاعتماد على أحجام منفذ العرض العالمية. وهذا يعزز النمطية وقابلية إعادة الاستخدام.
• تحسين قابلية الصيانة: من خلال تغليف منطق الاستجابة داخل المكونات، فإنك تقلل من تعقيد CSS الخاص بك وتجعله أسهل في الصيانة.
• مرونة أكبر: تمكّنك استعلامات الحاوية من إنشاء واجهات مستخدم أكثر تكيفًا وإدراكًا للسياق، مما يوفر تجربة مستخدم أفضل عبر مجموعة أوسع من الأجهزة والسياقات. فكر في موقع ويب متعدد اللغات؛ يمكن لاستعلام الحاوية ضبط حجم الخط داخل مكون إذا اكتشف لغة بكلمات أطول، مما يضمن عدم تجاوز النص لحدوده.
• تقليل تضخم CSS: بدلاً من تجاوز الأنماط العالمية لمكونات معينة، يدير المكون سلوكه الاستجابي الخاص، مما يؤدي إلى CSS أنظف وأكثر كفاءة.

تعريف الحاوية

قبل أن تتمكن من استخدام استعلامات الحاوية، تحتاج إلى تعريف عنصر حاوية. يتم ذلك باستخدام خاصية container-type.

هناك عدة قيم محتملة لـ container-type:

• size: ستستجيب استعلامات الحاوية للحجم الخطي (inline) والحجم الكتلي (block) للحاوية. هذا هو الخيار الأكثر شيوعًا وتنوعًا.
• inline-size: ستستجيب استعلامات الحاوية فقط للحجم الخطي (العرض في وضع الكتابة الأفقي) للحاوية.
• normal: العنصر ليس حاوية استعلام. هذه هي القيمة الافتراضية.

إليك مثال على كيفية تعريف حاوية:

            .card-container {
  container-type: size;
}

            

              
                Copy
              
            
          

بدلاً من ذلك، يمكنك استخدام خاصية الاختصار container لتعريف كل من container-type و container-name (الذي سنناقشه لاحقًا):

            .card-container {
  container: card / size; /* container-name: card, container-type: size */
}

            

              
                Copy
              
            
          

كتابة استعلامات الحاوية

بمجرد تعريفك للحاوية، يمكنك استخدام قاعدة @container لكتابة استعلامات الحاوية. الصيغة مشابهة لصيغة استعلامات الوسائط:

            @container card (min-width: 300px) {
  .card {
    background-color: lightblue;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، سيتغير لون خلفية عنصر .card إلى الأزرق الفاتح عندما يكون عرض حاويته الأبوية (ذات الفئة .card-container و container-type: size) على الأقل 300 بكسل.

يمكنك استخدام أي من ميزات استعلامات الوسائط القياسية داخل استعلام الحاوية، مثل min-width و max-width و min-height و max-height وغيرها الكثير. يمكنك أيضًا دمج شروط متعددة باستخدام العوامل المنطقية مثل and و or و not.

مثال: تكييف حجم الخط

لنفترض أن لديك عنوانًا داخل مكون بطاقة، وتريد تقليل حجم خطه عندما يتم عرض البطاقة في حاوية أصغر:

            .card-container {
  container-type: size;
}

.card h2 {
  font-size: 2em;
}

@container (max-width: 400px) {
  .card h2 {
    font-size: 1.5em;
  }
}

            

              
                Copy
              
            
          

في هذه الحالة، عندما يكون عرض الحاوية 400 بكسل أو أقل، سيتم تقليل حجم خط عنصر h2 إلى 1.5em.

تسمية الحاويات

للتخطيطات الأكثر تعقيدًا التي تحتوي على حاويات متداخلة، يمكنك استخدام خاصية container-name لإعطاء الحاويات أسماء فريدة. يتيح لك هذا استهداف حاويات معينة باستعلاماتك.

            .main-content {
  container: main-content / size;
}

.sidebar {
  container: sidebar / inline-size;
}

@container main-content (min-width: 700px) {
  /* Styles applied when the main-content container is at least 700px wide */
}

@container sidebar (min-inline-size: 200px) {
  /* Styles applied when the sidebar container is at least 200px wide */
}

            

              
                Copy
              
            
          

من خلال تسمية حاوياتك، يمكنك تجنب التعارضات المحتملة والتأكد من تطبيق أنماطك بشكل صحيح على العناصر المقصودة. وهذا مفيد بشكل خاص عند العمل مع تطبيقات الويب الكبيرة والمعقدة التي تطورها فرق دولية.

استخدام وحدات استعلام الحاوية

تقدم استعلامات الحاوية وحدات جديدة تكون نسبية لحجم الحاوية:

• cqw: 1% من عرض الحاوية.
• cqh: 1% من ارتفاع الحاوية.
• cqi: 1% من الحجم الخطي للحاوية (العرض في وضع الكتابة الأفقي).
• cqb: 1% من الحجم الكتلي للحاوية (الارتفاع في وضع الكتابة الأفقي).
• cqmin: الأصغر بين cqi أو cqb.
• cqmax: الأكبر بين cqi أو cqb.

يمكن أن تكون هذه الوحدات مفيدة بشكل لا يصدق لإنشاء تخطيطات تتناسب مع حجم الحاوية. على سبيل المثال، يمكنك تعيين حجم خط العنوان ليكون نسبة مئوية من عرض الحاوية:

            .card h2 {
  font-size: 5cqw;
}

            

              
                Copy
              
            
          

يضمن هذا أن يحافظ العنوان دائمًا على علاقة مرئية متسقة مع حجم البطاقة، بغض النظر عن أبعادها المطلقة.

أمثلة عملية وحالات استخدام

دعنا نستكشف بعض الأمثلة العملية لكيفية استخدام استعلامات الحاوية لإنشاء واجهات مستخدم أكثر تكيفًا واستجابة.

1. شريط تنقل متجاوب

تخيل أن لديك شريط تنقل مع سلسلة من الروابط. على الشاشات الكبيرة، تريد عرض جميع الروابط أفقيًا. ولكن، على الشاشات الأصغر، تريد طي الروابط في قائمة منسدلة.

مع استعلامات الحاوية، يمكنك تحقيق ذلك دون الاعتماد على استعلامات الوسائط العالمية.

            .nav-container {
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-toggle {
  display: none;
}

@container (max-inline-size: 600px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، سيتم إخفاء روابط التنقل وعرض زر تبديل التنقل عندما يكون عرض .nav-container أقل من 600 بكسل.

2. بطاقات منتجات قابلة للتكيف

كما ذكرنا سابقًا، تعد بطاقات المنتجات حالة استخدام رائعة لاستعلامات الحاوية. يمكنك تعديل تخطيط ومحتوى البطاقة بناءً على المساحة المتاحة داخل حاويتها.

            .product-card-container {
  container-type: size;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-description {
  font-size: 0.9em;
  margin-bottom: 10px;
}

.product-price {
  font-weight: bold;
}

@container (max-width: 300px) {
  .product-image {
    display: none;
  }

  .product-description {
    display: none;
  }

  .product-title {
    font-size: 1em;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، عندما يكون عرض .product-card-container أقل من 300 بكسل، سيتم إخفاء صورة المنتج ووصفه، وسيتم تقليل حجم خط عنوان المنتج.

3. شبكات معدلة ديناميكيًا

تُعد استعلامات الحاوية مفيدة جدًا عند العمل مع تخطيطات الشبكة. يمكن لشبكة تعرض الصور، على سبيل المثال، ضبط عدد الأعمدة وفقًا للعرض المتاح في الحاوية التي توضع فيها. قد يكون هذا مفيدًا بشكل خاص في مواقع التجارة الإلكترونية أو صفحات معرض الأعمال.

            .grid-container {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
}

@container (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

            

              
                Copy
              
            
          

ينشئ الكود أعلاه شبكة بعرض عمود لا يقل عن 200 بكسل، مع التكيف لملائمة مساحة الحاوية المتاحة. إذا تم تضييق الحاوية إلى أقل من 500 بكسل، فستتم إعادة تكوين الشبكة إلى تخطيط من عمود واحد، مما يضمن بقاء المحتوى قابلاً للقراءة والوصول إليه.

اعتبارات إمكانية الوصول

عند تنفيذ استعلامات الحاوية، من المهم مراعاة إمكانية الوصول لضمان أن موقعك قابل للاستخدام من قبل الجميع.

• HTML الدلالي: استخدم عناصر HTML الدلالية لتوفير بنية واضحة للمحتوى الخاص بك. يساعد هذا التقنيات المساعدة على فهم الغرض من كل عنصر.
• التباين الكافي: تأكد من وجود تباين كافٍ بين ألوان النص والخلفية لتسهيل قراءة المحتوى على الأشخاص الذين يعانون من ضعف البصر. يمكنك تقييم التباين باستخدام أدوات مثل مدقق التباين من WebAIM.
• التنقل باستخدام لوحة المفاتيح: تأكد من إمكانية الوصول إلى جميع العناصر التفاعلية عبر التنقل بلوحة المفاتيح. هذا ضروري للمستخدمين الذين لا يستطيعون استخدام الماوس.
• مؤشرات التركيز: وفر مؤشرات تركيز واضحة ومرئية لمستخدمي لوحة المفاتيح. يساعدهم هذا على فهم العنصر المحدد حاليًا.
• الصور المتجاوبة: استخدم عنصر <picture> أو السمة srcset لتوفير صور متجاوبة محسّنة لأحجام الشاشات المختلفة. هذا يحسن الأداء ويقلل من استخدام النطاق الترددي.
• الاختبار باستخدام التقنيات المساعدة: اختبر موقعك باستخدام التقنيات المساعدة مثل قارئات الشاشة للتأكد من أنه يمكن الوصول إليه بالكامل.

دعم المتصفحات

دعم المتصفحات لاستعلامات الحاوية جيد بشكل عام في المتصفحات الحديثة. يمكنك التحقق من حالة الدعم الحالية على مواقع الويب مثل Can I use....

اعتبارًا من أواخر عام 2024، تدعم معظم المتصفحات الرئيسية، بما في ذلك Chrome و Firefox و Safari و Edge، استعلامات الحاوية. ومع ذلك، من الجيد دائمًا التحقق من آخر التحديثات والتأكد من اختبار موقعك عبر متصفحات وأجهزة مختلفة.

أفضل الممارسات لاستخدام استعلامات الحاوية

لتحقيق أقصى استفادة من استعلامات الحاوية، ضع في اعتبارك هذه الممارسات الأفضل:

• ابدأ صغيرًا: ابدأ بتنفيذ استعلامات الحاوية في مكونات أصغر ومكتفية ذاتيًا. سيساعدك هذا على فهم المفاهيم وتجنب التعقيدات المحتملة.
• استخدم أسماء حاويات ذات معنى: اختر أسماء وصفية وذات مغزى لحاوياتك لتحسين قابلية قراءة الكود وصيانته.
• تجنب الإفراط في التحديد: حافظ على محددات استعلام الحاوية بسيطة قدر الإمكان لتجنب التعارضات والتأكد من تطبيق أنماطك بشكل صحيح.
• اختبر جيدًا: اختبر موقعك عبر متصفحات وأجهزة وأحجام شاشات مختلفة للتأكد من أن استعلامات الحاوية تعمل كما هو متوقع.
• وثق الكود الخاص بك: وثّق تطبيقات استعلامات الحاوية الخاصة بك لتسهيل فهم الكود وصيانته على المطورين الآخرين.

الأخطاء الشائعة وكيفية تجنبها

بينما تقدم استعلامات الحاوية فوائد كبيرة، هناك أيضًا بعض الأخطاء الشائعة التي يجب الانتباه إليها:

• التبعيات الدائرية: تجنب إنشاء تبعيات دائرية حيث يعتمد حجم الحاوية على حجم عناصرها الفرعية، والذي يعتمد بدوره على حجم الحاوية. يمكن أن يؤدي هذا إلى حلقات لا نهائية وسلوك غير متوقع.
• التعقيد المفرط: لا تفرط في تعقيد تطبيقات استعلام الحاوية. اجعلها بسيطة ومباشرة قدر الإمكان.
• مشاكل الأداء: يمكن أن يؤثر الاستخدام المفرط لاستعلامات الحاوية على الأداء، خاصة في التخطيطات المعقدة. استخدمها بحكمة وحسّن الكود الخاص بك من أجل الأداء.
• نقص التخطيط: يمكن أن يؤدي عدم التخطيط لاستراتيجيتك المتجاوبة قبل تنفيذ استعلامات الحاوية إلى كود غير منظم وصعب الصيانة. خذ الوقت الكافي للنظر بعناية في متطلباتك وتصميم مكوناتك وفقًا لذلك.

مستقبل التصميم المتجاوب

تمثل استعلامات الحاوية خطوة مهمة إلى الأمام في تطور التصميم المتجاوب. فهي توفر نهجًا أكثر مرونة ونمطية وسهولة في الصيانة لإنشاء واجهات مستخدم قابلة للتكيف. مع استمرار تحسن دعم المتصفحات، من المرجح أن تصبح استعلامات الحاوية أداة أساسية لمطوري الويب.

الخاتمة

تعد استعلامات الحاوية في CSS ميزة جديدة وقوية تمكنك من إنشاء مكونات قابلة للتكيف وإعادة الاستخدام حقًا. من خلال فهم المفاهيم وأفضل الممارسات الموضحة في هذا المقال، يمكنك الاستفادة من استعلامات الحاوية لبناء تطبيقات ويب أكثر مرونة وقابلية للصيانة وسهولة في الاستخدام.

جرّب استعلامات الحاوية، واستكشف حالات استخدام مختلفة، واكتشف كيف يمكنها تحسين سير عملك في التصميم المتجاوب. مستقبل التصميم المتجاوب هنا، وهو مدعوم باستعلامات الحاوية!

من منصات التجارة الإلكترونية الدولية التي تحتاج إلى عروض منتجات قابلة للتكيف إلى المواقع الإخبارية متعددة اللغات التي تتطلب تخطيطات محتوى مرنة، تقدم استعلامات الحاوية حلاً قيماً لإنشاء تجارب ويب عالمية ويمكن الوصول إليها حقًا.

فكر في استكشاف التقنيات المتقدمة مثل استخدام JavaScript لضبط خصائص الحاوية ديناميكيًا بناءً على تفاعلات المستخدم أو بيانات الواجهة الخلفية. على سبيل المثال، يمكن لمكون خريطة تفاعلي ضبط مستوى التكبير الخاص به بناءً على حجم حاويته، مما يوفر تجربة أكثر سهولة للمستخدمين عبر الأجهزة وأحجام الشاشات المختلفة.

الإمكانيات لا حصر لها، لذا احتضن استعلامات الحاوية وافتح الباب أمام المستوى التالي من التصميم المتجاوب.