The CSS Podcast - 034: Overflow
عندما يتجاوز المحتوى نطاق الصفحة الرئيسية، تتوفّر لك العديد من الخيارات لكيفية التعامل معه. يمكنك الانتقال للأعلى أو للأسفل لإضافة مساحة إضافية، واقتصاص الحواف التي تتجاوز المساحة المحددة، والإشارة إلى الجزء المقتطع باستخدام علامة شرطة منقطة، وغير ذلك الكثير. من المهم بشكل خاص مراعاة المحتوى الزائد عند تطوير تطبيقات الهواتف وأحجام الشاشات المتعددة.
هناك خياران مختلفان للاقتصاص في CSS، وسيساعد الخيار text-overflow
في اقتصاص أسطر النص الفردية، وستساعد سمات overflow
في التحكّم في المحتوى الزائد في نموذج المربّع.
تجاوز سعة سطر واحد باستخدام text-overflow
استخدِم السمة text-overflow
في أي عنصر يحتوي على عقد نصية، مثل فقرة <p>
. ويحدِّد كيفية ظهور النص عندما لا يتلاءم مع المساحة المتوفّرة للعنصر. إنّ كل نص HTML مرئي على الصفحة يكون في عقد النصوص. لاستخدام text-overflow
، تحتاج إلى سطر واحد من النص غير المُلفَّف، لذا عليك أيضًا ضبط overflow
على hidden
ويجب أن تكون قيمة white-space
تمنع اللفّ.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
استخدام سمات "المحتوى الزائد"
يتم ضبط سمات "المحتوى المتدفق" على عنصر للتحكّم في ما يحدث عندما يحتاج المحتوى الفرعي إلى مساحة أكبر من المساحة المتاحة. وقد يكون ذلك مقصودًا، مثل خريطة تفاعلية مثل "خرائط Google"، حيث يتحرّك المستخدم حول صورة كبيرة تم اقتصاصها إلى حجم معيّن. ويمكن أن يكون ذلك أيضًا غير مقصود، كما هو الحال في تطبيق محادثة حيث يكتب المستخدم رسالة طويلة لا تتناسب مع فقاعة النص.
يمكنك تقسيم المحتوى الزائد إلى جزءَين. يحتوي العنصر الرئيسي على مساحة مقيّدة بشكلٍ ثابت ولن تتغيّر. يمكنك اعتبار هذا الإجراء نافذة. العناصر الفرعية هي المحتوى الذي يحتاج إلى مساحة أكبر من العنصر الرئيسي. يمكنك اعتبار هذا العنصر هو ما تنظر إليه من خلال النافذة. ستساعد إدارة المحتوى الزائد في توجيه كيفية عرض النافذة لهذا المحتوى.
الانتقال للأعلى أو للأسفل أو لليمين أو لليسار على المحورَين العمودي والأفقي
تتحكّم السمة overflow-y
في العرض الفائض على طول المحور العمودي لإطار عرض الجهاز، وبالتالي الانتقال للأعلى أو للأسفل.
تتحكّم السمة overflow-x
في العرض الزائد على طول المحور الأفقي لمساحة عرض الجهاز، وبالتالي الانتقال لليمين أو اليسار.
الخصائص المنطقية لاتجاه التمرير
تضبط السمتَان overflow-inline
وoverflow-block
العرض الفائض استنادًا إلى اتجاه المستند ووضع الكتابة.
اختصار overflow
يضبط الاختصار overflow
نمطي overflow-x
وoverflow-y
في سطر واحد:
overflow: hidden scroll;
في حال تحديد كلمتَين رئيسيتَين، تنطبق الأولى على overflow-x
والثانية على overflow-y
. وبخلاف ذلك، تستخدم كلتا السمتَين overflow-x
وoverflow-y
القيمة نفسها.
القيم
لنلقِ نظرة أقرب على القِيم والكلمات الرئيسية المتاحة لمواقع overflow
.
overflow: visible
(تلقائي)- في حال عدم ضبط السمة، تكون
overflow: visible
هي القيمة التلقائية للويب. يضمن ذلك عدم إخفاء المحتوى عن غير قصد، ويتوافق مع المبادئ الأساسية المتمثلة في "عدم إخفاء المحتوى مطلقًا" أو "استخدام تصاميم آمنة وواضحة". overflow: hidden
- عند استخدام
overflow: hidden
، يتم اقتصاص المحتوى في الاتجاه المحدّد، ولا يتم توفير أشرطة تمرير لعرضه. overflow: scroll
overflow: scroll
تفعِّل أشرطة التمرير للسماح للمستخدمين بالتمرير خلال المحتوى. ستظهر أشرطة التمرير حتى إذا لم يكن المحتوى يتدفق حاليًا. هذه طريقة رائعة لتقليل تغيير التنسيق في المستقبل إذا كان من الممكن التمرير في الحاوية في المستقبل استنادًا إلى تغيير الحجم مثلاً، وإعداد المستخدم بصريًا للمناطق التي يمكن التمرير فيها.overflow: clip
- مثل
overflow: hidden
، يتم اقتصاص المحتوى الذي يتضمّنoverflow: clip
إلى مربّع الحشو للعنصر. الفرق بينclip
وhidden
هو أنّ الكلمة الرئيسيةclip
تحظر أيضًا كل عمليات الانتقال للأعلى أو للأسفل، بما في ذلك الانتقالات الآلية. overflow: auto
- أخيرًا، القيمة الأكثر استخدامًا هي
overflow: auto
. يراعي ذلك الإعدادات المفضّلة للمستخدم ويعرض أشرطة التمرير إذا لزم الأمر، ولكنه يخفيها تلقائيًا ويمنح المستخدم والمتصفّح مسؤولية التمرير.
الانتقال للأعلى أو للأسفل والمحتوى الزائد
توفّر العديد من سلوكيات overflow
هذه شريط تمرير، ولكن هناك بعض سلوكيات التمرير والسمات المحدّدة التي يمكن أن تساعدك في التحكّم في الانتقال للأعلى أو للأسفل في حاوية الفائض.
الانتقال للأعلى أو للأسفل وتسهيل الاستخدام
من المهم التأكّد من أنّ المنطقة القابلة للتمرير يمكنها قبول التركيز حتى يتمكّن مستخدم لوحة المفاتيح من الانتقال إلى المربّع باستخدام مفتاح التبويب، ثم استخدام مفاتيح الأسهم للتمرير.
للسماح لمربّع التمرير بقبول التركيز، أضِف tabindex="0"
، واسمًا يتضمّن سمة aria-labelledby
، وسمة role
مناسبة. على سبيل المثال:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
يمكن بعد ذلك استخدام CSS للإشارة إلى أنّه تم التركيز على المربّع، وذلك باستخدام السمة outline
لتقديم فكرة مرئية بأنّه يمكن الآن التمرير فيه.
في مقالة استخدام CSS لفرض تسهيل الاستخدام، يوضّح "أدريان روزيلي" كيف يمكن أن يساعد CSS في منع حدوث تراجعات في تسهيل الاستخدام. على سبيل المثال، لتفعيل الانتقال للأعلى أو للأسفل فقط وإضافة مؤشر التركيز في حال استخدام السمات الصحيحة. لن تجعل القواعد التالية المربّع قابلاً للتنقّل إلا إذا كان يحتوي على سمات tabindex
وaria-labelledby
وrole
.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
موضع شريط التمرير ضمن نموذج المربّع
تستهلك أشرطة التمرير مساحة داخل مربّع الحشو ويمكن أن تتنافس على المساحة إذا كانت inline
وليس overlaid
. تشرح وحدة نموذج المربّع بالتفصيل هذا المصدر المحتمَل لتغيير التنسيق.
عنصر التمرير في الجذر مقابل عنصر التمرير الضمني
قد تلاحظ أنّ بعض أشرطة التمرير تتضمّن سلوك "السحب لإعادة التحميل" وسلوكيات خاصة أخرى، خاصةً عند تطوير تطبيقات الأجهزة الجوّالة والتطبيقات المختلطة. يحدث سلوك الانتقال هذا في شريط التمرير الجذر. لا يتوفّر سوى شريط تمرير جذر واحد في الصفحة. يكون documentElement تلقائيًا شريط التمرير الجذر للصفحة، ولكن من خلال تغيير العنصر الذي يكون شريط التمرير الجذر، يمكن تطبيق السلوكيات الخاصة على أشرطة التمرير غير documentElement، ونسمي شريط التمرير الجديد هذا شريط التمرير الجذر الضمني.
لإنشاء شريط تمرير أساسي، يمكنك استخدام ما يُعرف باسم ترقية شريط التمرير من خلال وضع حاوية كعنصر ثابت، ما يضمن أن تغطي مساحة العرض بالكامل وأن يكون فهرس z في الأعلى مع شريط تمرير. يمكنك الاطّلاع على تجربة استخدام شريط التمرير الجذر مقارنةً بشريط التمرير الضمني المُدمَج هنا.
scroll-behavior
يتيح لك الخيار scroll-behavior
تفعيل الانتقال إلى العناصر من خلال المتصفح. يتيح لك ذلك تحديد كيفية التعامل مع عناصر التنقّل داخل الصفحة، مثل .scrollTo()
أو الروابط.
ويُعدّ ذلك مفيدًا بشكل خاص عند استخدامه مع prefers-reduced-motion لتحديد سلوك الانتقال للأعلى أو للأسفل استنادًا إلى الإعدادات المفضّلة للمستخدم.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
إذا وصلت إلى نهاية نافذة منبثقة، ثم واصلت الانتقال للأعلى أو للأسفل وتحرّكت الصفحة خلف النافذة المنبثقة، هذا يعني أنّه تم ربط الانتقال للأعلى أو للأسفل، أو تم نقله إلى حاوية الانتقال للأعلى أو للأسفل الرئيسية. تتيح لك سمة overscroll-behavior
منع تسرّب الانتقال إلى أعلى الصفحة أو أسفلها في حاوية رئيسية (يُعرف ذلك باسم ربط الانتقال إلى أعلى الصفحة أو أسفلها).
التحقّق من فهمك
اختبِر معلوماتك حول المحتوى الزائد
هل عنصر "النص الذي يتدفق خارج حدود العنصر" هو نفسه عنصر "العنصر الذي يتدفق خارج حدود العنصر"؟
يقبل الحقل overflow
كلمتَين رئيسيتين، ما هو المحور الذي تخصّه الكلمة الرئيسية الأولى؟
ما هي المساحة التي تستهلكها أشرطة التمرير في نموذج المربّع عند عرضها ودمجها؟
للحفاظ على الزخم الإضافي من الانتقال إلى أعلى أو أسفل في شريط تمرير ضمني متداخل، ما هي السمة التي ستستخدمها؟
overscroll-effect
scroll-behavior
overscroll-behavior
scroll-padding
scroll-hint