القائمة الكاملة

بودكاست 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 وData Loss In CSS من Smashing Magazine