دعم خاصية جديدة بنسبة عرض إلى ارتفاع CSS في Chromium وSafari Technology Preview وFirefox Nightly

خاصية CSS الجديدة التي تساعد في الحفاظ على المسافات في التنسيقات المتجاوبة.

Una Kravets

نسبة العرض إلى الارتفاع

يتم التعبير عن نسبة العرض إلى الارتفاع بشكل شائع في شكل عددين صحيحين ونقطتان في أبعاد: العرض:الارتفاع أو x:y. أكثر نسب العرض إلى الارتفاع شيوعًا للتصوير هي 4:3 و3:2، في حين أن الفيديو، والكاميرات الاستهلاكية الأحدث، غالبًا ما تكون نسبة العرض إلى الارتفاع هي 16:9.

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

وفي ما يلي بعض الأمثلة على الحالات التي يكون فيها الحفاظ على نسبة العرض إلى الارتفاع أمرًا مهمًا:

• إنشاء إطارات iframe سريعة الاستجابة، حيث تمثل 100% من عرض العنصر الرئيسي، ويجب أن يظل الارتفاع نسبة إطار عرض معيّنة
• إنشاء حاويات أساسية للعناصر النائبة للصور والفيديوهات والعناصر المضمّنة لمنع إعادة التنسيق عند تحميل العناصر وتستهلك مساحة
• إنشاء مساحة موحَّدة سريعة الاستجابة لتصورات البيانات التفاعلية أو الرسوم المتحركة بتنسيق SVG
• إنشاء مساحة موحَّدة سريعة الاستجابة للمكونات المتعددة العناصر مثل البطاقات أو تواريخ التقويم
• إنشاء مساحة موحَّدة سريعة الاستجابة لعدة صور بأبعاد مختلفة (يمكن استخدامها مع object-fit)

احتواء العنصر

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

تعيد القيمتان initial وfill ضبط الصورة لملء المساحة. في مثالنا، يؤدي هذا إلى أن تكون الصورة ضبابية ومموّهة، نظرًا لإعادة ضبط وحدات البكسل. ليست مثالية. استخدامان (object-fit: cover) أصغر أبعاد الصورة لملء المساحة واقتصاص الصورة لتلائمها بناءً على ذلك البعد. "تكبير" إلى أدنى حدود لها. تضمن السمة object-fit: contain عرض الصورة بأكملها. دائمًا ما تكون مرئية، وعكس cover، حيث يأخذ حجم الحد الأكبر (في المثال أعلاه هذا هو العرض)، ويغيّر حجم الصورة للحفاظ على نسبة العرض إلى الارتفاع الأساسية مع الاندماج في المساحة الإبداعية. تعرض الحالة object-fit: none الصورة التي تم اقتصاصها في منتصفها. (موضع العنصر التلقائي) بحجمه الطبيعي.

object-fit: cover يميل إلى العمل في معظم المواقف لضمان استخدام واجهة موحدة ولطيفة عند التعامل مع البيانات مع صور ذات أبعاد مختلفة، فإنك تُفقد المعلومات بهذه الطريقة (يتم اقتصاص الصورة أطولها).

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

الطريقة التقليدية القديمة: الحفاظ على نسبة العرض إلى الارتفاع باستخدام السمة padding-top

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

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

• نسبة العرض إلى الارتفاع 1:1 = 1 / 1 = 1 = padding-top: 100%
• نسبة العرض إلى الارتفاع 4:3 = 3 / 4 = 0.75 = padding-top: 75%
• نسبة العرض إلى الارتفاع 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
• نسبة العرض إلى الارتفاع: 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

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

<div class="container">
  <img class="media" src="..." alt="...">
</div>

يمكننا بعد ذلك كتابة CSS التالية:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

جارٍ الحفاظ على نسبة العرض إلى الارتفاع باستخدام aspect-ratio

إنّ احتساب قيم padding-top هذه ليس أمرًا سهلاً للغاية، ويتطلب توفّر بعض النفقات العامة والموضع الإضافي. باستخدام العنصر الأساسي الجديد aspect-ratio CSS ، وهي لغة الحفاظ على الجانب والنسب أكثر وضوحًا.

باستخدام الترميز نفسه، يمكننا استبدال: padding-top: 56.25% بـ aspect-ratio: 16 / 9، مع ضبط aspect-ratio إلى نسبة محدّدة تبلغ width / height

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

استخدام aspect-ratio بدلاً من padding-top أكثر وضوحًا، ولا يؤدي إلى تعديل المساحة المتروكة القيام بشيء خارج نطاقها المعتاد.

يتيح هذا الموقع الجديد أيضًا ضبط نسبة العرض إلى الارتفاع على auto، حيث "تستخدم العناصر التي تم استبدالها بنسبة عرض إلى ارتفاع أساسية نسبة العرض إلى الارتفاع هذه النسبة وإلا لا يكون للمربع نسبة عرض إلى ارتفاع مفضلة". إذا كانت قيمة كل من auto و<ratio> المحددان معًا، تكون نسبة العرض إلى الارتفاع المفضلة هي النسبة المحددة لـ width مقسومة على height ما لم أنه عنصر تم استبداله نسبة عرض إلى ارتفاع أساسية، وفي هذه الحالة يتم استخدام نسبة العرض إلى الارتفاع هذه بدلاً من ذلك.

مثال: الاتساق في الشبكة

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

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

مثال: منع متغيّرات التصميم

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

أمّا باستخدام aspect-ratio، فسيتم إنشاء عنصر نائب لمنع متغيّرات التصميم هذا:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

نصيحة إضافية: سمات الصور لنسبة العرض إلى الارتفاع

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

في المثال أعلاه، بما أن أبعاده هي 800 بكسل × 600 بكسل، سيبدو ترميز الصور على النحو التالي: <img src="image.jpg" alt="..." width="800" height="600">. إذا كانت الصورة المرسَلة تتضمّن الجانب نفسه ولكن ليس بالضرورة قيم البكسل الدقيقة هذه، فلا يزال بإمكاننا استخدام لتعيين النسبة، إلى جانب نمط width: 100% حتى أن الصورة تشغل المساحة المناسبة. كل ذلك معًا سيبدو كما يلي:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

وفي النهاية، يكون التأثير مطابقًا لضبط aspect-ratio على الصورة عبر CSS، ويتم تجنُّب متغيّرات التصميم التراكمية (راجِع العرض التوضيحي على رمز الترميز).

الخاتمة

مع خاصية aspect-ratio الجديدة في CSS، يتم إطلاقها في العديد من المتصفّحات الحديثة والحفاظ على أمان تصبح نِسب العرض إلى الارتفاع في حاويات الوسائط والتنسيقات أكثر وضوحًا.

صور إيمي شامبلين وليونيل "غوستاف" من خلال Unسبلاش