تحدثنا في مقالات سابقة عن طرق عديدة لتحجيم الأشياء ضمن صفحة الويب باستخدام CSS، فمعرفة التأثيرات التي ستُحدثها الميزات المختلفة على تصميمك أمرٌ مهمٌ جدًا، لهذا نلخص في هذا المقال الطرق المختلفة التي يمكن تحديد حجم الأشياء في CSS ونعرّف بعض المصطلحات التي ستساعدك مستقبلًا عن التحجيم sizing.
ننصحك قبل المتابعة في قراءة هذه المقال أن:
- تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
- تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
- تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
- تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.
الأحجام الطبيعية أو الفعلية للأشياء
تمتلك عناصر HTML أحجام طبيعية تأخذها قبل أن تؤثر فيها تنسيقات CSS، وكمثال مباشر على ذلك هو عنصر الصورة، إذ يحتوي ملف الصورة بطبيعته على معلومات عن حجم الصورة، والتي تُدعى باسم الحجم الفعلي intrinsic size، وتتحدد من قبل الصورة نفسها وليس من قبل أي تنسيق يُطبق لاحقًا عليها.
عندما نضع هذه الصورة ضمن صفحة دون أن نغير بارتفاعها أو حيّزها width من خلال استخدام سمات العنصر <img> أو باستخدام خاصيات CSS، ستُعرض الصورة باستخدام حجمها الفعلي. وضعنا حول الصورة في المثال التالي إطارًا كي تقدّر حجم الصورة كما يعرّفها ملف الصورة:
من ناحية أخرى، لا يمتلك العنصر <div> الفارغ بنفسه أية أحجام، فلو أضفنا هذا العنصر إلى صفحة HTML دون أي محتوى ضمنه ثم وضعنا حوله إطارًا كما فعلنا مع الصورة، فما ستلاحظه هو مجرد خط ضمن الصفحة. هذا الخط هو الإطار المنكمش للعنصر، فلا يوجد محتوى لتتميز حواف الإطار، أما لماذا امتد إطار العنصر على كامل عرض الصفحة، فالسبب أنه عنصر كتلي أي أنه يقع على سطر مستقل ويحتل كامل مساحة هذا السطر. ليس لهذا العنصر في مثالنا ارتفاع (أو بعد وفق اتجاه الكتلة) لعدم وجود أي محتوى ضمنه.
حاول أن تضيف بعض العبارات ضمن العنصر الفارغ في المثال السابق وسترى كيف يظهر الإطار بوضوح لأن ما يحدد ارتفاع هذا العنصر هو المحتوى الذي يضمه. إذًا، يأتي حجم العنصر <div> وفق اتجاه الكتلة من حجم المحتوى وبالتالي يأتي الحجم الفعلي لهذا العنصر من حجم المحتوى. باختصار: الحجم الفعلي للعنصر هو حجمه المعرّف من قبل المحتوى الخاص به.
ضبط حجم عنصر على قيمة محددة
يمكن طبعًا إعطاء أي عنصر ضمن تصميمنا أحجامًا محددةً، وعندها يُشار إلى هذه الحجام أنها أحجام خارجية extrinsic size (عندها لا بد أن يتلائم المحتوى مع حجم العنصر). لو أخذنا العنصر <div> في مثالنا السابق وضبطنا ارتفاعه height وحيّزه width، سيأخذ تمامًا هذه الأحجام أيًا يكن حجم المحتوى الذي سيوضع ضمنه. وقد أشرنا في مقال "التعامل مع طفحان المحتوى خارج صندوق العنصر" أن ضبط ارتفاع العنصر سيسبب طفحان المحتوى إن لم تكن أحجام صندوق العنصر قادرة على استيعاب كامل المحتوى.
إذًا، لا بد من الانتباه جيدًا عند ضبط قيمة ارتفاع العنصر على قيمة عددية محددة أو نسبة مئوية حتى لا يحدث طفحان للمحتوى.
استخدام النسب المئوية
تعمل النسب المئوية في كثيرٍ من الأحيان كما تعمل وحدات الطول، ورأينا في مقال "وحدات القياس والقيم في CSS" أنه بالإمكان استبدال أحدهما بالآخر. عليك عند استخدام النسب المئوية أن تعرف أنها نسبة من شيء ما، ففي حالة صندوق ضمن آخر مثلًا وعندما تحدد حيّز الصندوق الداخلي (الصندوق الابن) كنسبة مئوية فهي نسبة مئوية من حيّز الصندوق الأب.
والسبب في ذلك أن النسب المئوية مأخوذةً نسبةً إلى أبعاد الكتلة الحاوية للعنصر؛ فإذا لم نستخدم النسبة المئوية لضبط حيّز العنصر <div> في المثال السابق، فسيشغل 100% من المساحة المتاحة له كونه عنصر كتلي؛ بينما سيشغل مقدارًا محددًا من تلك المساحة إذا حددنا حيّزه بنسبة مئوية منها.
تحديد الهوامش والحشوة بنسب مئوية
قد تلاحظ سلوكًا غريبًا عند تحديد قيم الهوامش والحشوات بنسب مئوية. نعرض في المثال التالي صندوقًا يضم محتوًى وقد حددنا هامش margin هذا المحتوى ومقدار الحشوة padding بالقيمة 10%. لاحظ أن مقدار الحشوة والهامش في الأعلى والأسفل سيعادل مقدار الهامش على اليمين واليسار.
قد تعتقد أن النسبة المئوية للهامش العلوي والسفلي هي نسبة مئوية من ارتفاع العنصر وأن النسبة المؤية للهامش اليميني واليساري هي نسب مئوية من حيّز العنصر، وهذا الأمر ليس صحيحًا.
عندما تُستخدم الحشوات والهوامش بقيم مئوية فإنها تُنسب إلى الحجم السطري inline size للكتلة الحاوية، وهو حيّز الكتلة الحاوية عندما تكون لغة الكتابة أفقية الانسياب. لهذا السبب ظهرت قيم الهوامش والحشوات جميعها متساوية في مثالنا السابق وهو 10% من حيّز الصندوق. لا بد من تذكر هذا الأمر جيدًا عندما تخطط لاستخدام النسب المئوية بهذه الطريقة.
الأحجام باستخدام البادئتان max و min
يمكنك أيضًا أن تجعل أحجام العنصر أكبر ما يمكن أو أصغر ما يمكن في CSS بدلًا من إعطاءه حجمًا ثابتًا، فإذا كان لديك مثلًا صندوق يضم كميةً متغيرةً من المحتوى وأردت أن يكون أقل ارتفاع له مقدارًا محددًا، يمكنك استخدام الخاصية min-height، وعندها سيكون ارتفاع الصندوق على الأقل مساويًا لقيمة هذه الخاصية، لكنه سيزداد تلقائيًا إذا زادت كمية المحتوى واحتاج إلى التوسع عموديًا.
يعرض المثال التالي صندوقين ضُبطت قيمة الخاصية min-height لكل منهما على 150 بكسل. الصندوق اليساري فارغ أما اليميني فيضم محتوى يحتاج إلى مساحة أكبر، لهذا فقد توسع عموديًا ليتسع للمحتوى.
هذا الأسلوب مفيد جدًا عند التعامل مع كميات متغيرة من المحتوى دون حدوث طفحان.
أحد استخدامات الخاصية max-width هو تصغير أبعاد الصورة إن لم يكن هناك متسع من المساحة لعرضها بحيّزها الفعلي ودون أن تشغل حيزًا أكبر من المساحة المخصصة لها. إذا أردت ضبط حيّز الصورة ليكون width: 100%، وكان حيّزها الفعلي أقل من حيّز الحاوية التي تضمها، فسيجبر المتصفح الصورة على الامتداد لتصبح أوسع، وقد يؤدي ذلك إلى تشوه مظهرها، لكن لو استخدمت max-width: 100% وكان حيّز الصورة الفعلي أقل من حيّز الحاوية، فلن تتمدد الصورة لتشغل مساحة أكبر ولن تتعرض للتشوه.
استخدمنا في مثالنا التالي الصورة نفسها ثلاث مرات؛ إذ ضُبط حيّز الأولى على width: 100% ووضعت ضمن حاوية أكبر حيّزًا منها وبالتالي تتمدد لتغطي مساحة الحاوية تمامًا؛ وضبط حيّز الثانية ليكون max-width: 100% في نفس الحاوية لكن الصورة لم تتمدد هذه المرة لتشغل مساحة الحاوية؛ أما في الصورة الثالثة فقد ضُبط حيّزها على max-width: 100% ووضعت في حاوية أقل حيّزًا منها فانكمشت الصورة لتتناسب مع حيّز الحاوية.
تُستخدم هذه التقنية لجعل الصور متجاوبة عند عرضها على شاشات أصغر، إذ تنكمش لتتلائم مع أحجام شاشة العرض. لكن عليك ألا تستخدم هذه التقنية لتحميل الصورة الكبيرة الحجم ثم تصغيرها ضمن المتصفح، فلا بد من اختيار الصورة بحجم مناسب كي لا تكون أكبر من الحجم المطلوب لأكبر حجم قد تُعرض بها الصورة، إذ سيسبب تحميل الصورة الضخمة بطء المتصفح وسيكلّف الزوار أكثر إذا كانت تكلفة الاتصال وفقًا لحجم البيانات التي تتبادلها.
وحدات قياس نافذة العرض
تُعرّف نافذة العرض viewport بأنها المساحة المرئية من الصفحة ضمن متصفحك الذي تستخدمه لعرض الصفحة. لنافذة العرض أيضًا حجم، ويوجد في CSS وحدات متعلقة بنافذة العرض، مثل vw وهي وحدة لحيّز نافذة العرض و vh من أجل ارتفاع نافذة العرض.
تعادل القيمة 1vh مقدار %1 من ارتفاع نافذة العرض ويعادل 1vw مقدار %1 من حيّز نافذة العرض، ويمكنك استخدام هذه الوحدات لضبط أحجام الصناديق والنصوص.
يعرض المثال التالي صندوقًا أبعاده 20vh و 20vw. يضم الصندوق الحرف A وقد ضُبط حجم الخط font-size داخل الصندوق على 10vh.
إذا غيّرت قيم vh و vw سيغيّر ذلك حجم الصندوق أو حجم الخط، وسيؤدي تغيير حجم نافذة العرض إلى تغيير حجم الصندوق وحجم خط الكتابة أيضًا، لأن حجمه مقاسٌ بالنسبة إلى نافذة العرض. حتى ترى التغييرات التي ذكرناها لا بد من عرض الشيفرة السابقة ضمن نافذة جديدة لمتصفحك كي تتمكن من إعادة تحجيم المتصفح. يمكنك أيضًا استعراض المثال التجريبي الموجود على غيت-هب من خلال متصفحك ثم غيّر حجم نافذة المتصفح لترى ما الذي سيحدث.
من المفيد تحجيم الأشياء بالنسبة إلى نافذة العرض في تصميمك، فإذا أردت مثلًا عرض صورة على كامل شاشة الجهاز ثم يأتي بعدها بقية المحتوى عند التمرير إلى الأسفل، اضبط ارتفاع ذلك الجزء من الصفحة ليكون 100vh، وسيدفع ذلك بقية المحتوى إلى الأسفل ولن يظهر ضمن نافذة العرض حتى تنتقل بالتمرير إلى الأسفل.
الخلاصة
تعرفنا في هذا المقال على بعض الأفكار المهمة التي يمكن أن تستخدمها عند تحجيم العناصر في صفحات الويب. سيغدو موضوع التحجيم مهمًا أكثر عندما تنتقل للعمل مع تخطيطات CSS كي تتقن الاختلافات بين التخطيطات المختلفة، لهذا من الجيد أن تستوعب هذه الأفكار قبل دراسة التخطيطات.
ترجمة -وبتصرف- للمقال Sizing items in CSS.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.