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

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

Una Kravets

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

غالبًا ما يتم التعبير عن نسبة العرض إلى الارتفاع في صورة عددين صحيحين ونقطتان في أبعاد: width:height أو 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 و 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، يمكنها إنشاء مساحة نائبة لمنع متغيّرات التصميم التراكمية وتقديم مؤشرات أداء الويب أفضل. في هذا المثال الأول، يؤدي تحميل مادة عرض من واجهة برمجة تطبيقات مثل Unsla إلى حدوث تغيُّر في التنسيق عند انتهاء تحميل الوسائط.

ويؤدي استخدام 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، ويتم تجنُّب متغيّرات التصميم التراكمية (راجِع العرض التوضيحي على Codepen).

الخلاصة

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

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