התאמת סרגל הגלילה להעדפות של ניגודיות גבוהה

משתמשים שמפעילים מצבי ניגודיות גבוהה במערכת ההפעלה או בדפדפן שלהם מצפים שרכיבי ממשק המשתמש (כמו פסי גלילה) יהיו קריאים מאוד, ולעיתים קרובות מסתמכים על הפרדה חדה בין החזית לרקע, ולא על גוונים עדינים של אפור או צבעים של עיצוב.

במדריך הזה מוסבר איך להשתמש בתכונת המדיה @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 משתמשת בפסי גלילה מקוריים מסוג overlay. כדי לאלץ את macOS לעבד צבעים בהתאמה אישית, חובה להתאים אותם ל-scrollbar-width (למשל, thin או auto).
• גם אם מחילים את scrollbar-width, פסי הגלילה בשכבת-העל של macOS מעבדים את המסילה (המרזב) כשקופה כברירת מחדל. אם העיצוב דורש צבע רקע גלוי של פס הגלילה ב-MacOS, חובה להחיל את scrollbar-gutter: stable; על הקונטיינר שניתן לגלילה, אבל חשוב לשים לב שהוא מופיע רק אחרי שהמשתמש מעביר את העכבר מעל פס הגלילה.
• גם עם scrollbar-gutter: stable, יכול להיות שהמסלול יהיה שקוף ב-MacOS. הנראות של הסמן לא צריכה להיות תלויה בצבע של הפס.

חלופות ותמיכה בדפדפנים

תמיכה בדפדפנים ובמצבי חוסר זמינות של scrollbar-color

התכונה הזו היא שיפור הדרגתי (progressive enhancement) ולא תמיד נדרשים לה פתרונות חלופיים.

אם העיצוב חשוב והיעד של המשתמש ב-Baseline הוא "Baseline Widely Available" או גרסה קודמת, כדאי לכלול את הרכיבים המדומים הלא סטנדרטיים של ::-webkit-scrollbar כחלופות.

כדאי לעטוף את רכיבי ה-fallback מדור קודם בבלוק @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);
  }
}