تطبیق نوار پیمایش با اولویت‌های کنتراست بالا

کاربرانی که حالت‌های کنتراست بالا را در سیستم‌عامل یا مرورگر خود فعال می‌کنند، انتظار دارند عناصر میانای کاربر (مانند نوارهای پیمایش) بسیار خوانا باشند و اغلب به جداسازی واضح پیش‌زمینه و پس‌زمینه تکیه می‌کنند تا خاکستری‌های ملایم یا رنگ‌های زمینه.

این راهنما دستورالعمل‌های اختیاری درباره نحوه استفاده از ویژگی رسانه CSS @media (prefers-contrast: more) برای اعمال سبک نوار پیمایش با کنتراست بالا ارائه می‌دهد.

بهبود خوانایی

هنگام سفارشی‌سازی نوارهای پیمایش با 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

این ویژگی ارتقای پیش‌رو است و همیشه به جایگزین نیاز ندارد.

اگر سبک‌بندی مهم است و هدف «خط پایه» کاربر «خط پایه به‌طور گسترده دردسترس» یا قدیمی‌تر است، باید شبه‌عناصر غیراستاندارد ::-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);
  }
}