كان من الممكن أن تساعدني استفسارات قليلة عن حجم الحاوية

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

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

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

الحالة 1: شبكة البطاقة

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

لنفترض أنك قد تم تكليفك ببناء شبكة البطاقة هذه مع المتطلبات التي تحتاجها كل بطاقة للحفاظ على نسبة العرض إلى الارتفاع 1: 1:

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

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

في مشروعي الواقعي ، اتبعت نهج JavaScript من شأنه:

1. استمع لحدث تغيير الحجم.
2. احسب عرض كل بطاقة.
3. أضف حجم خط مضمّن لكل بطاقة بناءً على عرضها.
4. صمم كل شيء بالداخل باستخدام em وحدة.

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

كان من الممكن أن تكون استعلامات الحاويات أفضل بكثير لأنها توفر لنا وحدات الاستعلام عن الحاويات، مثل ال cqw وحدة. من المحتمل أنك حصلت عليه بالفعل ، لكن 1cqw مساوي ل 1% من عرض الحاوية. لدينا أيضًا ملف cqi الوحدة هي مقياس للعرض المضمّن للحاوية ، و cqb لعرض كتلة الحاوية. لذلك ، إذا كان لدينا حاوية بطاقة فهي 500px على نطاق واسع ، أ 50cqw القيمة تحسب 250px.

إذا كنت قادرًا على استخدام استعلامات الحاوية في شبكة البطاقة الخاصة بي ، كان بإمكاني إعداد ملف .card المكون كحاوية:

.card { 
  container: card / size;
}

ثم كان بإمكاني وضع غلاف داخلي مع padding هذا مقياس في 10% ل .cardعرض باستخدام امتداد cqw الوحدة:

.card__inner { 
  padding: 10cqw; 
} 

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

فكرة اخرى؟ يستخدم cqw وحدات لحجم خط المحتويات الداخلية ، ثم قم بتطبيق المساحة المتروكة em الوحدات:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw هي قيمة اعتباطية - فقط قيمة استقرت عليها. تلك المساحة المتروكة لا تزال مساوية لـ 10cqw منذ em الوحدة نسبة إلى .card__inner حجم الخط!

هل فهمت ذلك؟ ال 2em هو نسبة إلى 5cqw حجم الخط الذي تم تعيينه على نفس الحاوية. تعمل الحاويات بشكل مختلف عما اعتدنا عليه ، مثل em الوحدات مرتبطة بنفس العنصر font-size value. ولكن ما لاحظته بسرعة هو أن وحدات استعلام الحاوية تتعلق بها أقرب الوالد الذي هو أيضا وعاء.

على سبيل المثال، 5cqw لا يعتمد على نطاق .card عرض العنصر في هذا المثال:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

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

الحالة 2: تخطيط متناوب

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

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

كان من الممكن أن تجعل استفسارات الحاويات هذا أمرًا سهلاً ، وذلك بفضل @container قاعدة:

.info-card {
  container-type: inline-size;
  container-name: info-card;
}

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

استعلام واحد ، سيولة لانهائية:

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

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

الحالة 3: ضربات SVG

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

  
    
   
  Heading

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

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

قد يعتمد حجم خط العنوان على عرض منفذ العرض ، لذلك تحتاج أيقونة SVG إلى الضبط وفقًا لذلك حيث تعمل ضربة الفرشاة بأي حجم. يمكنك جعل عرض الحد بالنسبة إلى العناوين font-size من خلال ضبطه em الوحدات. ولكن إذا كانت لديك مجموعة محددة من أحجام الحد التي تحتاج إلى الالتزام بها ، فلن ينجح ذلك لأنه بخلاف ذلك يتوسع خطيًا - لا توجد طريقة لضبطه على حجم معين stroke-width القيمة في نقاط معينة دون اللجوء إلى استعلامات الوسائط حول عرض منفذ العرض.

ولكن إليك ما كنت سأفعله إذا كان لدي رفاهية استعلامات الحاوية في ذلك الوقت:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

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

المكافأة: أنواع أخرى من استعلامات حجم الحاوية

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

معظم الأمثلة التي رأيتها تستفسر عن ملف width, max-widthو min-width, height, block-sizeو inline-size كما كنت أفعل طوال هذا المقال.

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

لكن تحدد MDN شيئين آخرين يمكننا الاستعلام ضد. واحد هو orientation وهو أمر منطقي تمامًا لأننا نستخدمه طوال الوقت في الاستعلامات الإعلامية. لا يختلف الأمر مع استعلامات الحاوية:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

الأخرى؟ إنه aspect-ratio، صدق او لا تصدق:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

إليك عرض توضيحي قابل للتعديل للتلاعب به مع كلا المثالين:

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