svh وlvh وdvh: وحدات إطار العرض في CSS مقيسةً في متصفحك

ما وحدات إطار العرض؟

وحدة إطار العرض نسبةٌ مئوية من إطار العرض مكتوبةٌ طولًا، فـ100vh هو الارتفاع كله و50vw نصف العرض. والذي لا يكاد أحد ينتبه إليه هو كم عددها: أربع وعشرون. ستة محاور — العرض، والارتفاع، والمحوران المنطقيان لاتجاه الكتابة، وأصغر الاثنين وأكبرهما — مضروبةً في أربعة تصوّرات مختلفة لما هو إطار العرض أصلًا.

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

ولهذا تأتي الوحدات مجموعةً: svh وlvh وdvh إلى جانب vh المجرّدة، والأمر نفسه في كل محور. وقد حطّت في المتصفحات معًا، وذلك أيضًا سبب أن المتصفح القديم بما يكفي لتفوته واحدة تفوته الثلاث جميعًا.

كيف تستعملها

1. اقرأ الارتفاعات الأربعة. تُقاس في متصفحك عند تحميل الصفحة، بتخطيط عنصر بكل وحدة ثم قراءة ما بلغه. ولا يُراجَع أي جدول، فالأرقام تصف الجهاز الذي بين يديك.
2. انظر إلى الفجوة. الصفّ الذي تحتها هو الكبير ناقص الصغير: أي واجهة المتصفح التي تختفي متى بدأت التمرير. وهي صفرٌ عادةً في نافذة سطح المكتب، ولهذا بالضبط تبقى هذه المشكلة خفيّة حتى يفتح أحدهم الصفحة على هاتف.
3. مرّر، على هاتف. يتغيّر الصفّ الديناميكي مع انطواء الشريط وعودته، وتقول الاستنتاجات عند أي طرف هو الآن. وتلك الحركة هي المواصفة تعمل كما صُمّمت، وهي أيضًا سبب أن الوحدات الديناميكية ليست ترقيةً مجانية.

‏100vh هي إطار العرض الطويل، وذلك مقصود

الرواية الشائعة أن 100vh معطوبة على الهاتف: أن المتصفحات تخطئ، وأن شريط العنوان يفسدها، وأنك تحتاج إلى حيلة بجافاسكربت. والرواية مقلوبة. فمواصفة CSS تعرّف وحدات إطار العرض الكبير والوحدات بلا بادئة على إطار العرض الكبير: أي إطار العرض مقيسًا كأن كل واجهة تتمدّد وتنطوي منطويةٌ. وبعبارة أخرى: 100vh هي 100lvh، عن قصد، وكانت كذلك دائمًا.

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

وذلك ما يجعل svh هي الوحدة التي كان يريدها فعلًا كل من يلجأ إلى vh تقريبًا. فالمواصفة تصفها بأنها تملأ الشاشة بلا أن يُحجب شيء من محتواها حين تكون كل عناصر الواجهة الديناميكية ظاهرة — ثم تسمّي في النفَس نفسه الوحداتِ الصغيرةَ أأمنَ عمومًا، منبّهةً إلى أنها قد لا تعطي أجمل تخطيط متى انطوى الشريط ثانيةً. أأمن وأخلى قليلًا: تلك هي المقايضة، وهي مكتوبة في المعيار لا مكتشَفة في متتبّع أخطاء.

والقياس أعلاه هو الصيغة الأمينة لهذه الدعوى. فبدل أن تؤكّد الصفحة أن متصفحك يتّبع التعريف، تسأله: فإن عادت vh وlvh متساويتين فتلك هي المواصفة تعمل، وإن لم تتساويا يومًا قالت الأداة ذلك وعلّمته بأنه النتيجة الوحيدة هنا التي تكون خللًا في المتصفح لا حقيقةً عن جهازك.

الوحدات الديناميكية ليست ترقيةً مجانية

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

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

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

ما لا تستطيع هذه الصفحة إخبارك به

أهمّ حدٍّ هنا تقدّمه المواصفة نفسها، لا شيء اكتشفناه نحن. فبعض واجهات المتصفح تعلو المحتوى عمدًا ولا تُحدث أي إزاحة في التخطيط — ومن ثَمّ لا أثر لها في أي من أطوال إطار العرض. فـsvh أأمن من vh، وليست ضمانًا: إذ تجلس طبقةٌ من ذلك النوع فوق عنصر مقيس بـsvh قياسًا مثاليًّا، ولن يذكرها أيٌّ من هذه الأرقام أبدًا.

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

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

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

لماذا هي مجانية؟

القياس يجري في متصفحك: تخطّط الصفحة عنصرًا مخفيًّا بكل وحدة وتقرأ النتيجة. ولا خادم في الأمر، فلا شيء يُحاسَب عليه ولا حساب يُنشأ.

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