المقال الاصلي بكتابة Dave Gray
تمت الترجمة بواسطة Aicha AIT OUMGHAR
الـ CSS صعب و لكنه متسامح كذلك. و تسامحه هذا هو الذي يسمح لنا بأن ننشئ الأنماط (styles) بشكل
عشوائي باستخدام CSS.
لازلنا نستطيع تحميل صفحتنا. ما يعني أنها لم تتعرض لتحطم "crash".
عندما يتعلق الأمر بعرض الصفحة أو ارتفاعها, هل تعلم ماذا يجب عليك أن تضع في العنصر HTML؟ ماذا عن العنصر body؟
هل كل ما تفعله هو إضافة styles بشكل عشوائي لكلا العنصرين ثم تتمني أن تسير الأمور بشكل جيد ؟
إذا كان هذا هو ما تفعله, فأنت لست لوحدك.
الأجوبة على هذه الأسئلة ليست بديهية.
لقد كنت أفعل هذا طوال الوقت في الماضي دون الالتفات أو الانتباه لما هي الخاصية التي يجب تطبيقها على عنصر ما.
ليس غريبا أن نرى خصائص CSS مطبقة على العنصرين HTML و body بهذه الطريقة :
html, body {
min-height: 100%;
}
هل هذه مشكلة ؟
نعم إنها كذلك.
الطريقة التي كتبنا بها الـ style أعلاه تسبب مشكلة :
إعطاء الـ min-height قيمة 100% لكلا العنصرين لا يسمح لعنصر الـ body بملء الصفحة كما كنت تتوقع. إذا قمت بالتحقق من قيم الـ style التي تم حسابها باستخدام أدوات البرمجة (dev tools), ستجد أن العنصر body له ارتفاع قيمته صفر.
و في الوقت نفسه, العنصر HTML له ارتفاع يساوي الجزء الذي يظهر من الصفحة على المتصفح.
انظر إلى هذه الصورة الملتقطة من ال Dev Tools الخاصة بالمتصفح Chrome :
العنصر body له هامش (margin) قيمته التلقائية هي 8px و التي يشير إليها الشريط في أعلى الصورة الملتقطة. أما قيمة الارتفاع فهي 0.
لماذا يحدث هذا ؟
استخدام النسبة المئوية لإعطاء قيمة للأبعاد (العرض, الارتفاع) يحتم على العنصر أن يحيل على أب له حتى يعتمد عليه في تحديد النسبة المئوية.
العنصر HTML يحيل على منفذ العرض (viewport) الذي يمتلك ارتفاعا يساوي ارتفاع الجزء الظاهر من منفذ العرض. و رغم ذلك, قمنا فقط بإعطاء قيمة لخاصية min-height الخاصة بالعنصر HTML...والتي ليست قيمة لخاصية الارتفاع (height).
ومنه, فإن العنصر body لا يجد له أبا يملك قيمة ارتفاع محددة حتى يستطيع الإحالة عليه عندما يقرر تحديد كم تساوي النسبة 100%.
المشكلة قد تكون خفية
إذا شرعت في ملء جسم الصفحة ( العنصر body ) بمحتوى يكفي لذلك, فقد لا تلاحظ حدوث هذه المشكلة.
وأيضا, حتى يكون الانتباه لها أكثر صعوبة, فإنك إذا قمت بإعطاء لون للخلفية لكلا العنصرين أو حتى لأحدهما فقط, فإنك ستلاحظ بأن منفذ العرض قد امتلأ بهذا اللون. الأمر الذي يعطي انطباعا بأن العنصر body يصل ارتفاعه أو طوله لنفس ارتفاع منفذ العرض.
ولكنه ليس كذلك. قيمته لا تزال هي صفر.
الصورة أعلاه مأخوذة لصفحة بهذا الـ CSS :
html, body {
min-height: 100%;
}
body { background-color: dodgerblue; }
هل هذا توارث عكسي ؟
بطريقة عجيبة, يقوم العنصر HTML بتبني نفس لون الخلفية التي يملكها العنصر body إذا لم تقم بإعطاء قيمة لخاصية background-color الخاصة بالعنصر HTML .
ما هو إذن التعديل المثالي للارتفاع حتى نحصل على صفحة تفاعلية بشكل كامل؟
لسنوات عديدة, كان الجواب هو كالتالي:
html {
height: 100%;
}
body {
min-height: 100%;
}
هذا يسمح للعنصر HTML بالإحالة على الأب الذي هو منفذ العرض, ومن ثم الحصول على قيمة ارتفاع تساوي 100% من قيمة منفذ العرض.
والآن مع حصول العنصر HTML على قيمة ارتفاع محددة, فإن قيمة min-height التي أعطيت للعنصر body سوف تمنح هذا الأخير ارتفاعا بدئيا يتوافق مع العنصر HTML .
هذا يسمح أيضا للـbody بأن يطول عندما يتجاوز المحتوى بداخله المجال الذي يظهر من الصفحة.
العائق الوحيد الذي يوجد في هذا الحل هو كون العنصر HTML لا يستطيع أن يكبر ليتجاوز ارتفاع الجزء الظاهر من منفذ العرض. ومع ذلك, فإنه تم السماح للعنصر body بأن ينمو خارج العنصر HTML .
الحل الجديد تم تبسيطه
body { min-height: 100vh; }
هذا المثال يستخدم الوحدة vh (viewport height: ارتفاع منفذ العرض) للسماح للـbody بأن يأخذ قيمة دنيا للارتفاع بالاعتماد على الارتفاع الكلي لمنفذ العرض.
كما هو الشأن بالنسبة للون الخلفية background-color الذي ناقشناه، فإنك إذا لم تعط قيمة لارتفاع العنصر HTML, فإن هذا الأخير سيتبنى نفس قيمة الارتفاع التي أعطيت للعنصر body .
ومنه، فإن هذا الحل سيتجنب إشكال فيضان العنصر HTML الذي يطرحه الحل السابق, ويصبح لدينا كلا العنصرين يستطيعان النمو مع نمو محتواك.
استخدام الوحدة vh أدى إلى حدوث بعض المشاكل عند التصفح باستخدام الهاتف في الماضي, ولكن يبدو أن المتصفحين Chrome و Safari قد استوعبا الآن استخدام الوحدة vhالخاصة بمنفذ العرض .
ارتفاع الصفحة قد يسبب ظهور شريط الانزلاق الأفقي
انتظر, ماذا ؟
أليس الأحرى أن تقول "عرض الصفحة" ؟
لا
في سلسلة أحداث غريبة أخرى, ارتفاع صفحتك قد يسبب ظهور شريط الإنزلاق الأفقي على متصفحك.
عندما ينمو محتوى صفحتك ليتجاوز ارتفاع منفذ العرض, فإن شريط الإنزلاق الرأسي على اليمين يتم تفعيله. هذا الأمر قد يسبب تفعيل شريط الإنزلاق الأفقي كذلك بشكل آني في صفحتك.
إذن كيف نصلح هذا؟
قد تشعر بالراحة إذا علمت أن الأمر يتعلق بتعديل عرض الصفحة.
هذه المشكلة تقع مع كل العناصر التي أعطيت قيمة 100vw (viewport width : عرض منفذ العرض), ولا تخص فقط العنصرين HTML و body.
وحدات منفذ العرض - ونقصد بها vw و vh - لا تأخذ بعين الإعتبار الـ 10 pixels التي يشغلها شريط الانزلاق الرأسي.
ومنه, فإنه عندما يتم تفعيل شريط الانزلاق الرأسي يظهر كذلك شريط الانزلاق الأفقي.
كيف نعطي الصفحة عرضا كليا ؟
أظن أنه من الأفضل ألا تفعل.
عدم تحديد العرض للعناصر HTML و body سيمنحهما تلقائيا كل عرض الشاشة. إذا قمت بتغيير قيمة العرض (width) لتخالف القيمة auto, فحينها يجب أن تستخدم CSS reset أولا.
تذكر, العنصر body يمتلك بشكل تلقائي هامشا (margin) من جميع الاتجاهات قيمته تساوي 8px.
ولكن استخدام CSS reset يحذف هذا. غير ذلك, ستجد أن إعطاء قيمة 100% للعرض قبل حذف الهوامش ستؤدي إلى فيضان الbody . هذا هو الCSS reset الذي أستخدمه:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
كيف تعطي العرض القيمة التي تفضلها؟
رغم أنه ليس من الضروري دائما إعطاء قيمة للعرض , إلا أنني غالبا ما أفعل ذلك.
قد تصبح عادة بكل بساطة.
إذا أعطيت للعرض الخاص بالـ body قيمة 100% فإنك ستحصل على عرض كلي يشغل كل عرض الصفحة. هذا مكافئ تماما للقيمة التلقائية التي يأخذها عرض الbody إذا لم تعطه أية قيمة أصلا.
إذا كنت تريد استخدام العنصر body كحاوية أصغر و تريد السماح للعنصر HTML بأن يملأ الصفحة, فإنك تستطيع تحديد قيمة قصوى لعرض الـ body بإعطاء قيمة للخاصية max-width.
هنا مثال يوضح ذلك:
html { background-color: #000; }
body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}
خاتمة
إذا لم يتم تحديد قيمة الارتفاع (height) الخاص بالعنصر HTML, فإن إعطاء قيمة 100% للارتفاع أو الارتفاع الدنيوي (min-height) اللذان يخصان الـ body سيؤدي إلى انعدام الارتفاع (هذا يحدث قبل اضافة المحتوى).
أما في حالة عدم تحديد قيمة العرض الخاصة بالعنصر HTML, فإن إعطاء قيمة 100% للعرض الخاص بالbody يسمح لهذا الأخير بأن يشغل العرض الكلي للصفحة.
هذا قد يكون مربكا ومخالفا لما هو متوقع.
للحصول على ارتفاع كلي تفاعلي في الصفحة, أعط قيمة 100vh للعنصر min-height الخاص بالـ body .
إذا غيرت من قيمة عرض الصفحة, إختر 100% بدل 100vw حتى لا تتفاجأ بظهور شريط الانزلاق الأفقي.
أتركك الآن مع درس من قناتي على اليوتيوب, والذي أشرح فيه تعديل الارتفاع والعرض بالـ CSS بالنسبة لصفحة HTML تشغل كل أبعاد الشاشة و تكبر عندما ينمو المحتوى بداخلها: