وحدات العرض الكبيرة والصغيرة والديناميكية

وحدات CSS جديدة تراعي إطارات العرض للأجهزة الجوّالة مع أشرطة الأدوات الديناميكية.

Bramus

إطار العرض ووحداته

لقياس طول إطار العرض، يمكنك استخدام وحدتَي vw وvh.

• vw = 1% من عرض حجم إطار العرض
• vh = 1% من ارتفاع حجم إطار العرض.

امنح عنصر عرض 100vw وارتفاعًا 100vh، وسيغطي إطار العرض بالكامل.

تم نقل الوحدتَين vw وvh إلى المتصفّحات التي تحتوي على هذه الوحدات الإضافية.

• vi = 1% من حجم المحور المضمّن لإطار العرض.
• vb = 1% من حجم محور الحظر لإطار العرض.
• vmin = الأصغر من vw أو vh.
• vmax = أكبر من vw أو vh.

تتوافق هذه الوحدات مع متصفّح جيد.

الحاجة إلى وحدات إطار عرض جديدة

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

وبالرغم من أنّه يمكن تغيير حجم إطار العرض، لا يمكن أن يتغيّر حجما vw وvh. نتيجةً لذلك، سيتم حذف العناصر التي يبلغ ارتفاعها 100vh خارج إطار العرض.

عند التمرير لأسفل، سيتم سحب أشرطة الأدوات الديناميكية هذه. في هذه الحالة، ستغطي العناصر التي يبلغ ارتفاعها 100vh إطار العرض بالكامل.

لحل هذه المشكلة، تم تحديد حالات مختلفة لإطار العرض في مجموعة عمل CSS.

• إطار عرض كبير: بافتراض أنّ حجم إطار العرض هذا هو أي واجهات UA يتم توسيعها ديناميكيًا وسحبها ليتم سحبها.
• إطار العرض الصغير: بافتراض أنّ حجم إطار العرض هذا هو أي واجهات UA يتم توسيعها ديناميكيًا وسحبها لتوسيعها.

يتم أيضًا تعيين وحدات لإطارات العرض الجديدة:

• وتحتوي الوحدات التي تمثِّل إطار العرض الكبير على البادئة lv. الوحدات هي lvw وlvh وlvi وlvb وlvmin وlvmax.
• وتحتوي الوحدات التي تمثّل إطار العرض الصغير على البادئة sv. الوحدات هي svw وsvh وsvi وsvb وsvmin وsvmax.

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

بالإضافة إلى إطارات العرض الكبيرة والصغيرة، هناك أيضًا إطار عرض ديناميكي يأخذ في الاعتبار ديناميكي لواجهة مستخدم Universal Analytics:

• عند توسيع أشرطة الأدوات الديناميكية، يكون إطار العرض الديناميكي مساويًا لحجم إطار العرض الصغير.
• عندما يتم سحب أشرطة الأدوات الديناميكية، يكون إطار العرض الديناميكي مساويًا لحجم إطار العرض الكبير.

وتتضمن الوحدات المصاحبة البادئة dv: dvw وdvh وdvi وdvb وdvmin وdvmax. يتم تثبيت مقاساتها بين نظيراتها من lv* وsv*.

ويتم شحن هذه الوحدات في الإصدار Chrome 108، لتنضم بذلك إلى Safari وFirefox اللتين تتوفران حاليًا.

المحاذير

هناك بعض التنبيهات التي يجب معرفتها بشأن وحدات إطار العرض:

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

• لا يتم تحديث قيم إطار العرض الديناميكي بمعدل 60 لقطة في الثانية. يتم تقييد عملية التحديث في جميع المتصفّحات أثناء توسيع واجهة مستخدم Universal Analytics أو سحبها. وترفض بعض المتصفحات التحديث بشكل تام بناءً على الإيماءة المستخدمة (التمرير البطيء مقابل التمرير السريع).

• لا تُعتبر لوحة المفاتيح على الشاشة (المعروفة أيضًا باسم لوحة المفاتيح الافتراضية) جزءًا من واجهة مستخدم Universal Analytics. وبالتالي لا يؤثر على حجم وحدات إطار العرض. في Chrome، يمكنك تفعيل سلوك يؤثر فيه وجود لوحة المفاتيح الافتراضية في وحدات إطار العرض.

مراجع إضافية

لمزيد من المعلومات حول إطارات العرض وهذه الوحدات، يمكنك الاطّلاع على هذه الحلقة من HTTP 203. وفيه، يشرح Bramus لـ Jake كل شيء عن إطارات العرض المختلفة ويوضّح كيفية تحديد أحجام هذه الوحدات بالضبط.

مواد قراءة إضافية:

• مواصفات قيم CSS 4: أطوال إطار العرض النسبية
• إدخال حالة Chrome
• شرح توضيحي لإطار عرض التنسيق
• شرح وحدات إطار العرض