استعلامات حاوية CSS: دليل شامل لتعريف استعلامات الحاوية

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

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

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

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

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

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

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

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

خاصية container-type

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

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

مثال:

            
.container {
  container-type: size;
}

            

              
                Copy
              
            
          

يُعرّف هذا المقتطف البرمجي عنصرًا يحمل الفئة container كحاوية استعلام، مما يجعل حجمه متاحًا لاستعلامات الحاوية.

بدلاً من ذلك، يمكنك استخدام container: inline-size أو container: size. يمكن لخاصية container المختصرة تعيين كل من container-type و container-name في تصريح واحد. يتم استخدام اسم الحاوية لاستهداف حاوية معينة عند تداخل الحاويات.

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

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

قاعدة @container

قاعدة @container تشبه قاعدة @media، ولكن بدلاً من استهداف إطار العرض، فإنها تستهدف حاوية معينة. الصيغة هي كما يلي:

            
@container [container-name] (condition) {
  /* Styles to apply when the condition is met */
}

            

              
                Copy
              
            
          

• container-name (اختياري): إذا كنت قد أعطيت حاويتك اسمًا باستخدام خاصية container-name، فيمكنك تحديده هنا لاستهداف تلك الحاوية المحددة. إذا تم حذفه، فسيتم تطبيقه على أقرب حاوية أصل.
• condition: الشرط الذي يجب تحقيقه لتطبيق الأنماط. يمكن أن يعتمد هذا على عرض الحاوية أو ارتفاعها أو خصائص أخرى.

مثال:

            
.card {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، سيتحول عنصر .card من تخطيط عمودي إلى تخطيط صفي عندما يكون عرض حاويته 400 بكسل على الأقل. سيتم أيضًا تعديل عرض عنصري .card__image و .card__content وفقًا لذلك.

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

تقدم استعلامات الحاوية وحدات جديدة مرتبطة بأبعاد الحاوية:

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

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

مثال:

            
.element {
  font-size: 2cqw;
  padding: 1cqh;
}

            

              
                Copy
              
            
          

في هذا المثال، سيكون حجم خط عنصر .element هو 2% من عرض الحاوية، وستكون الحشوة (padding) الخاصة به 1% من ارتفاع الحاوية.

أمثلة من الواقع العملي

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

مثال 1: مكون البطاقة

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

HTML:

            

  

    
    

      
Product Title
      
Product description goes here.
      Learn More
    
  


            

              
                Copy
              
            
          

CSS:

            
.container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

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

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
    margin-bottom: 0;
    margin-right: 16px;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، يتم تعريف عنصر .container كحاوية ذات حجم مضمّن (inline-size). عندما يكون عرض الحاوية أقل من 500 بكسل، سيعرض مكون البطاقة الصورة والمحتوى في تخطيط عمودي. وعندما يكون عرض الحاوية 500 بكسل أو أكثر، سيتحول مكون البطاقة إلى تخطيط صفي، مع الصورة على اليسار والمحتوى على اليمين. وهذا يضمن أن مكون البطاقة يبدو جيدًا بغض النظر عن مكان وضعه في الصفحة.

مثال 2: قائمة التنقل

حالة استخدام شائعة أخرى لاستعلامات الحاوية هي تكييف قائمة التنقل بناءً على المساحة المتاحة.

HTML:

            

  


            

              
                Copy
              
            
          

CSS:

            
.nav-container {
  container-type: inline-size;
  width: 100%;
  background-color: #f0f0f0;
}

.nav {
  padding: 16px;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav__item {
  margin-bottom: 8px;
}

.nav__link {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

@container (max-width: 400px) {
  .nav__list {
    flex-direction: column;
  }

  .nav__item {
    margin-bottom: 16px;
  }

  .nav__link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، يتم تعريف عنصر .nav-container كحاوية ذات حجم مضمّن (inline-size). عندما يكون عرض الحاوية 400 بكسل أو أقل، ستتحول قائمة التنقل إلى تخطيط عمودي، حيث يأخذ كل رابط العرض الكامل للحاوية. وعندما يكون عرض الحاوية أكبر من 400 بكسل، ستعرض قائمة التنقل الروابط في صف واحد، مع وجود مسافة بينها. وهذا يسمح لقائمة التنقل بالتكيف مع أحجام الشاشات والاتجاهات المختلفة.

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

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

مثال:

            

  

    
Content
  


            

              
                Copy
              
            
          

            
.outer-container {
  container-type: inline-size;
  container-name: outer;
}

.inner-container {
  container-type: inline-size;
  container-name: inner;
}

@container outer (min-width: 500px) {
  .inner-container {
    background-color: lightblue;
  }
}

@container inner (min-width: 300px) {
  p {
    font-size: 1.2rem;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، تم تسمية .outer-container باسم "outer" وتم تسمية .inner-container باسم "inner". تستهدف قاعدة @container الأولى الحاوية "outer" وتطبق لون خلفية على .inner-container عندما يكون عرض الحاوية "outer" 500 بكسل على الأقل. تستهدف قاعدة @container الثانية الحاوية "inner" وتزيد حجم خط عنصر p عندما يكون عرض الحاوية "inner" 300 بكسل على الأقل.

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

تتمتع استعلامات الحاوية بدعم ممتاز ومتزايد من المتصفحات. تدعم معظم المتصفحات الحديثة بشكل كامل ميزات container-type و container-name و @container. من الجيد دائمًا التحقق من Can I use للحصول على أحدث معلومات التوافق.

بالنسبة للمتصفحات القديمة التي لا تدعم استعلامات الحاوية، يمكنك استخدام polyfills لتوفير دعم احتياطي. ومع ذلك، من المهم ملاحظة أن polyfills قد لا تكرر تمامًا سلوك استعلامات الحاوية الأصلية، ويمكن أن تزيد من وقت تحميل الصفحة.

أفضل الممارسات

فيما يلي بعض أفضل الممارسات التي يجب مراعاتها عند العمل مع استعلامات الحاوية:

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

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

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

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

ما هو أبعد من الحجم: استعلامات الحالة

في حين أن استعلامات الحاوية المستندة إلى الحجم هي الأكثر شيوعًا، فإن مستقبل استعلامات الحاوية يمتد إلى ما هو أبعد من مجرد الحجم. هناك مواصفات ومقترحات ناشئة لـ استعلامات النمط (style queries) واستعلامات الحالة (state queries).

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

ستسمح لك استعلامات الحالة بالاستعلام عن حالة الحاوية، مثل ما إذا كانت في حالة التركيز (focused) أو التحويم (hovered) أو تم تطبيق فئة معينة عليها. وهذا يمكن أن يفتح المزيد من الإمكانيات للمكونات التكيفية التي تستجيب لتفاعل المستخدم.

الخاتمة

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

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

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