تكييف شريط التمرير مع الإعدادات المفضّلة للتباين العالي

يتوقّع المستخدمون الذين يفعّلون أوضاع التباين العالي في نظام التشغيل أو المتصفّح أن تكون عناصر واجهة المستخدم (مثل أشرطة التمرير) واضحة للغاية، وغالبًا ما يعتمدون على الفصل الواضح بين المقدّمة والخلفية بدلاً من الألوان الرمادية الخفيفة أو ألوان المظهر.

يقدّم هذا الدليل تعليمات اختيارية حول كيفية استخدام ميزة الوسائط @media (prefers-contrast: more) في CSS لفرض نمط شريط التمرير العالي التباين.

تحسين وضوح النص

عند تخصيص أشرطة التمرير باستخدام scrollbar-color أو المتغيّرات المخصّصة، يمكنك تقديم إلغاء صريح لأوضاع التباين العالي. ويكون هذا مفيدًا بشكل خاص إذا كان مظهر التطبيق الأساسي يستخدم أشرطة تمرير منخفضة التباين لأسباب جمالية.

اختياري: استخدِم مجموعة @media (prefers-contrast: more) لتحديد ألوان داكنة ومميّزة لشريط التمرير والمسار.

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

المشاكل التي يجب الانتباه إليها عند استخدام scrollbar-color

• يُرجى عدم استخدام صور متحركة أو تأثيرات انتقال في scrollbar-color. يتسبب خطأ في WebKit في وميض شريط التمرير في كل مرة يتغير فيها scrollbar-color.
• على نظام التشغيل macOS، يتم تجاهل السمتَين scrollbar-color (العادية) و::-webkit-scrollbar (القديمة) تلقائيًا لأنّ نظام التشغيل macOS يستخدم أشرطة تمرير "تراكب" أصلية. يجب إقران الألوان المخصّصة بـ scrollbar-width (مثل thin أو auto) لفرض عرضها على نظام التشغيل macOS.
• حتى مع تطبيق scrollbar-width، تعرض أشرطة التمرير في تراكب macOS المسار (الهامش) على أنّه شفاف تلقائيًا. إذا كان التصميم يتطلّب لون خلفية مرئيًا للمسار على نظام التشغيل MacOS، يجب تطبيق scrollbar-gutter: stable; على الحاوية القابلة للتمرير، ولكن يُرجى العِلم أنّه لا يظهر إلا بعد أن يمرّر المستخدم مؤشر الماوس فوق شريط التمرير.
• حتى مع تفعيل scrollbar-gutter: stable، قد يكون المسار شفافًا على نظام التشغيل MacOS. يجب ألا يعتمد شريط التمرير على لون المسار ليكون مرئيًا.

الخيارات الاحتياطية وتوافق المتصفّح

الخيارات الاحتياطية وتوافق المتصفّح مع scrollbar-color

هذه الميزة هي تحسين تدريجي ولا تتطلب دائمًا إجراءات احتياطية.

إذا كان التنسيق مهمًا وكان هدف Baseline للمستخدم هو "Baseline Widely Available" أو إصدار أقدم، يجب تضمين العناصر الزائفة ::-webkit-scrollbar غير العادية كبدائل.

يمكنك تضمين العناصر الاحتياطية القديمة في مجموعة @supports not (scrollbar-color: auto) لمنع حدوث تعارضات بين السمات العادية ومحدّدات WebKit القديمة في المتصفحات التي تتيح كليهما بشكلٍ أصلي.

إذا كنت تستخدم خصائص مخصّصة لتحديد الألوان، سيتم تطبيقها تلقائيًا على محدّدات WebKit القديمة. وليس عليك تكرارها.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}