بودكاست CSS - 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;
}
استخدام خصائص overflow
يتم تعيين خصائص القائمة الكاملة على أحد العناصر للتحكم في ما يحدث عندما تحتاج عناصره الثانوية إلى مساحة أكبر مما هي متاحة. يمكن أن يكون هذا مقصودًا، كما هو الحال في خريطة تفاعلية مثل خرائط 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
تفعيل التمرير بين العناصر التي يتحكّم فيها المتصفّح. ويسمح لك هذا الإجراء بتحديد كيفية التعامل مع التنقّل في الصفحة مثل .scrollTo()
أو الروابط.
ويُعدّ هذا الإجراء مفيدًا بشكلٍ خاص عند استخدامه مع prefers-reduced-motion لتحديد سلوك التمرير بناءً على إعدادات المستخدِم المفضّلة.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
سلوك المبالغة في التمرير
إذا سبق لك الوصول إلى نهاية شكل متراكب، ثم واصلت الانتقال وتحركت الصفحة خلف التراكب، يعني ذلك سلسلة التمرير أو الفقاعات التفسيرية إلى حاوية التمرير الرئيسية. تسمح لك السمة overscroll-behavior
بمنع تسرّب التمرير التجاوزي إلى حاوية رئيسية (المعروفة باسم سلسلة التمرير).
التحقّق من استيعابك
اختبر معلوماتك عن تجاوز السعة
تجاوز النص وتجاوز العنصر هو نفسه؟
تقبل السمة overflow
كلمتَين رئيسيتَين، لأي محور يتم استخدام الكلمة الرئيسية الأولى؟
ما المساحة التي تستهلكها أشرطة التمرير في نموذج المربع عند عرضها وتضمينها؟
overlay
مع المساحة المتروكة، وعندما تكون في الوضع inline
ستتم إضافتها إلى المساحة المتروكة.لحصر الزخم الإضافي من التمرير في التمرير الضمني المتداخل، ما الخاصية التي ستستخدمها؟
scroll-behavior
scroll-hint
overscroll-behavior
contain
إلى حصر إمكانية التنقّل بين الصفحات.scroll-padding
overscroll-effect