الترويسة والتذييل يمتدان الآن على كامل العرض

تغيير صغير يظهر في كل صفحة هنا: الشريط الداكن في الأعلى والتذييل في الأسفل يمتدان الآن على كامل عرض النافذة.

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

ما الذي لم يتغير

المحتوى داخل تلك الأشرطة. فالنصوص والأزرار والأرقام لا تزال تصطف على عرض 1180 بكسل نفسه كالأقسام التي تحتها، لذا فالشريط عريض والكتابة ليست كذلك. لا أحد يقرأ أسطرًا من مئة حرف، والعنوان الممتد عبر شاشة بقياس 27 بوصة ليس تصميمًا، بل سهو.

لماذا لا نستخدم الحيلة المعتادة

الطريقة الشائعة لإخراج عنصر من عمود متوسّط هي هامش سالب محسوب على أساس 100vw. ولها عيب يسهل أن يفوتك على حاسوب مكتبي أُخفي فيه شريط التمرير: vw يشمل شريط التمرير. فينتهي الأمر بالكتلة أعرض من المساحة المرئية بمقدار عرض الشريط بالضبط، ويمكن سحب الصفحة كلها جانبيًا بضع بكسلات — وهذا يعني على الهاتف أن التخطيط يهتز تحت الإبهام في منتصف القراءة.

لذا فالشريط لا يمتد إلى الخارج، بل يبدأ عريضًا ويُضاف إليه حشو نحو الداخل:

padding-inline: max(20px, calc((100% - 1180px) / 2))

تُحسب النسب المئوية بالنسبة إلى العنصر الأب، وهو هنا جسم الصفحة الذي لا يشمل شريط التمرير. وتحت 1180 بكسل تتغلب القيمة الأولى ويحتفظ الشريط بهامش معقول قدره 20 بكسل بدلًا من هامش سالب. لا غلاف ثانٍ، ولا JavaScript، ولا شيء يحتاج إلى قياس أثناء التشغيل.

أين يُطبَّق ذلك

الصفحة الرئيسية، وكذلك صفحة «حول» وكل صفحات الإحصائيات. البناء نفسه في المواضع الثلاثة، وهذا بالضبط ما كان مقصودًا.