CSS @container: إتقان استعلامات الحاويات لتصميم سريع الاستجابة حديث

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

قيود الاستجابة المستندة إلى طريقة العرض

لسنوات، اعتمدت الطريقة الأساسية لجعل مواقع الويب سريعة الاستجابة على استعلامات الوسائط المستندة إلى طريقة العرض. تسمح هذه الاستعلامات، مثل @media (min-width: 768px)، للمطورين بتطبيق أنماط مختلفة اعتمادًا على عرض نافذة المتصفح. لقد كان هذا فعالاً بشكل لا يصدق في إنشاء تخطيطات تتكيف بأناقة مع أحجام الشاشات المختلفة، من شاشات سطح المكتب الكبيرة إلى الأجهزة المحمولة الأصغر حجمًا.

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

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

تقديم CSS @container: قاعدة استعلام الحاويات

يقدم CSS @container مفهوم استعلامات الحاويات. بدلاً من الاستعلام عن خصائص طريقة العرض، تسمح لنا استعلامات الحاويات بالاستعلام عن خصائص حاوية الأصل لعنصر تم تحديده صراحةً كحاوية استعلام.

فكر في الأمر بهذه الطريقة: بدلاً من طرح سؤال "ما مدى عرض نافذة المتصفح؟" يمكننا الآن أن نسأل "ما مدى عرض العنصر الذي يحتوي على هذا المكون؟" هذا يحول التركيز من السياق العالمي (طريقة العرض) إلى السياق المحلي (العنصر الأصل أو حاوية مخصصة).

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

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

القيمة الأكثر شيوعًا لـ container-type هي normal. ومع ذلك، لأغراض التصميم، ستستخدم غالبًا inline-size أو size.

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

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

مثال: إعداد حاوية استعلام

            
.product-card-container {
  container-type: inline-size;
  container-name: product-card;
  width: 50%; /* Example width for the container itself */
  margin: 20px;
  border: 1px solid #ccc;
  padding: 15px;
}

            

              
                Copy
              
            
          

في هذا المثال، العنصر الذي يحمل الفئة .product-card-container هو الآن حاوية استعلام تسمى 'product-card'، ويمكن الاستعلام عن حجمها المضمن (العرض).

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

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

بناء الجملة:

            
@container [<name> | <family>] <condition> {
  /* CSS rules to apply */
}

            

              
                Copy
              
            
          

• [<name> | <family>] (اختياري): تحدد اسم أو عائلة الحاوية للاستعلام عنها. إذا تم حذفها، فإنها تستعلم عن أي حاوية تحدد container-type.
• <condition>: هذا هو المكان الذي تحدد فيه خصائص الحاوية التي تريد الاستعلام عنها. تتضمن الشروط الشائعة width و height و inline-size و block-size و aspect-ratio و orientation و resolution.

مثال: تطبيق الأنماط على بطاقة منتج داخل حاويتها

            
.product-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Querying the container named 'product-card' */
@container product-card (min-width: 400px) {
  .product-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .product-card img {
    margin-right: 20px;
    margin-bottom: 0;
  }
}

@container product-card (min-width: 600px) {
  .product-card {
    padding: 30px;
  }

  .product-card h3 {
    font-size: 1.8em;
  }
}

            

              
                Copy
              
            
          

في هذا المثال الشامل:

• يتم تعيين .product-card-container كحاوية استعلام.
• يتلقى العنصر .product-card بداخله أنماطًا افتراضية.
• عندما يكون .product-card-container بعرض 400 بكسل أو أكثر، يتحول .product-card إلى تخطيط مرن قائم على الصفوف، ويقوم بمحاذاة النص إلى اليسار، ويعدل هوامش الصورة.
• عندما يكون .product-card-container بعرض 600 بكسل أو أكثر، يتم تعديل الحشو وحجم خط العنوان في .product-card بشكل أكبر.

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

ميزات وخصائص استعلام الحاويات الرئيسية

بالإضافة إلى قاعدة @container الأساسية و container-type، هناك العديد من الخصائص والميزات الأخرى ذات الصلة التي تعزز قوة استعلامات الحاويات:

1. container-name

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

مثال:

            
.sidebar {
  container-type: inline-size;
  container-name: sidebar-queries;
}

.main-content {
  container-type: inline-size;
  container-name: main-content-queries;
}

@container sidebar-queries (min-width: 200px) {
  /* Styles for elements within the sidebar container */
}

@container main-content-queries (min-width: 700px) {
  /* Styles for elements within the main content container */
}

            

              
                Copy
              
            
          

2. الاستعلام عن محاور الحاويات المختلفة

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

• width / inline-size: استعلامات بناءً على البعد الأفقي للحاوية.
• height / block-size: استعلامات بناءً على البعد الرأسي للحاوية.
• aspect-ratio: استعلامات بناءً على نسبة عرض الحاوية إلى ارتفاعها.
• orientation: استعلامات بناءً على ما إذا كان inline-size للحاوية أكبر من أو يساوي block-size (portrait) أو أقل من (landscape).

مثال باستخدام block-size:

            
.chart-container {
  container-type: size;
  container-name: chart;
  height: 300px;
}

.chart {
  /* Default chart styles */
}

@container chart (min-height: 250px) {
  .chart {
    /* Adjustments for taller charts */
    font-size: 1.1em;
  }
}

@container chart (orientation: landscape) {
  .chart {
    /* Adjustments for wider-than-tall charts */
    transform: rotate(90deg);
  }
}

            

              
                Copy
              
            
          

3. وحدات استعلام الحاويات

تقدم استعلامات الحاويات وحدات CSS جديدة ذات صلة بأبعاد حاوية الاستعلام، على غرار وحدات طريقة العرض (vw و vh) ولكنها خاصة بالحاوية.

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

تُعد هذه الوحدات قوية بشكل لا يصدق لإنشاء أنماط مكونات مقترنة بإحكام تتناسب مع حاوياتها.

مثال:

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

.product-card h3 {
  font-size: 2.5cqi; /* Font size scales with container inline size */
  margin-bottom: 1cqi;
}

.product-card p {
  font-size: 1.2cqi;
}

            

              
                Copy
              
            
          

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

4. خاصية contain (وعلاقتها بـ container-type)

خاصية CSS contain ليست جزءًا مباشرًا من بناء جملة استعلام الحاوية ولكنها ذات صلة كبيرة. تخبر المتصفح عن محتوى عنصر لمساعدة المتصفح على تحسين العرض. عندما تقوم بتعيين container-type على inline-size أو size، فهذا يعني شكلًا من أشكال الاحتواء. يعرف المتصفح أن الأنماط الموجودة داخل هذه الحاوية تعتمد على حجمها ولا تحتاج إلى إعادة عرض أجزاء غير ذات صلة من الصفحة عند تغيير حجم الحاوية.

على وجه التحديد، container-type: inline-size; هو اختصار يحدد ضمنيًا contain: layout style inline-size;. هذا تحسين أداء حاسم.

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

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

1. قوائم التنقل سريعة الاستجابة

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

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

2. مكونات واجهة المستخدم التكيفية (الأزرار والبطاقات والنماذج)

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

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

3. التخطيطات ولوحات المعلومات المعقدة

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

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

4. أنماط الطباعة والمحتوى المصدر

بينما تُستخدم استعلامات الوسائط عادةً للطباعة، يمكن أن تساعد استعلامات الحاويات أيضًا في إدارة تصميم المكونات عند تصدير المحتوى أو طباعته، مما يضمن الاتساق بناءً على 'الحاوية' (مثل عرض صفحة معين في ورقة أنماط طباعة).

5. أنظمة التصميم والمكونات القابلة لإعادة الاستخدام

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

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

دعم المتصفح والتنفيذ

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

• Chrome/Edge: الدعم متاح منذ فترة، وغالبًا ما يتطلب علامة في البداية، ولكنه مدعوم الآن على نطاق واسع.
• Firefox: الدعم متاح.
• Safari: الدعم متاح.
• Other Browsers: الدعم في ازدياد، ولكن تحقق دائمًا لجمهورك المستهدف.

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

مثال على إستراتيجية احتياطية (مفاهيمية):

            
.product-card-container {
  container-type: inline-size;
  /* Default styles for the component */
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for browsers that don't support container queries */
@media (min-width: 400px) {
  .product-card-container {
    /* Equivalent styles to @container (min-width: 400px) */
    flex-direction: row;
  }
}

/* Container query specific styles */
@container (min-width: 400px) {
  .product-card-container {
    /* Specific styles for when the container is 400px+ */
    /* These will override the media query fallback if supported */
  }
}

            

              
                Copy
              
            
          

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

أفضل الممارسات والنصائح لاستخدام استعلامات الحاويات

للاستفادة من القوة الكاملة لاستعلامات الحاويات بشكل فعال والحفاظ على قاعدة تعليمات برمجية قوية وقابلة للصيانة:

• تحديد الحاويات بشكل صريح: قم دائمًا بتعيين container-type على العناصر التي يجب أن تعمل كحاويات استعلام. لا تعتمد على السلوك الضمني.
• استخدم الأسماء لتحقيق الوضوح: استخدم container-name عند التعامل مع الحاويات المتداخلة أو المستقلة المتعددة لتجنب تعارضات التسمية والتأكد من أن الاستعلامات تستهدف العناصر الصحيحة.
• فكر في المكون أولاً: قم بتصميم وبناء مكوناتك مع وضع استعلامات الحاويات في الاعتبار. ضع في اعتبارك كيف ستتصرف بأحجام حاويات مختلفة.
• استخدم وحدات استعلام الحاويات بحكمة: تُعد cqw و cqh وما إلى ذلك قوية للمكونات القابلة للتطوير. استخدمها لأحجام الخطوط والتباعد والأبعاد الأخرى التي يجب أن تتكيف بشكل متناسب.
• الجمع بين استعلامات الوسائط: استعلامات الحاويات ليست بديلاً لجميع استعلامات الوسائط. استخدم استعلامات الوسائط لتخطيط الصفحة العام والطباعة لموقع الويب بأكمله وميزات إمكانية الوصول، واستعلامات الحاويات للاستجابة على مستوى المكون.
• اختبار شامل: اختبر مكوناتك بأحجام حاويات وبيئات متصفح مختلفة للتأكد من أنها تتصرف كما هو متوقع. قم بتغيير حجم نافذة متصفحك، واستخدم أدوات المطور لمحاكاة أحجام العناصر المختلفة، والتحقق من التوافق.
• ضع في اعتبارك الأداء: في حين أن استعلامات الحاويات يمكن أن تحسن الأداء عن طريق عزل التصميم، كن على دراية بالتداخل المفرط التعقيد أو عدد كبير جدًا من حاويات الاستعلامات إذا لم تتم إدارتها بشكل صحيح.
• التحسين التدريجي: تأكد من أن موقعك يظل قابلاً للاستخدام والعرض في المتصفحات التي لا تدعم استعلامات الحاويات عن طريق توفير طرق احتياطية أنيقة.

الخلاصة: عصر جديد للتصميم سريع الاستجابة

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

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