Kaydırma çubuğunu yüksek kontrast tercihlerine uyarlama

İşletim sistemlerinde veya tarayıcılarında yüksek kontrast modlarını etkinleştiren kullanıcılar, kullanıcı arayüzü öğelerinin (kaydırma çubukları gibi) son derece okunaklı olmasını bekler. Bu kullanıcılar genellikle hafif gri tonlar veya tema renkleri yerine belirgin ön plan-arka plan ayrımına güvenir.

Bu kılavuzda, yüksek kontrastlı kaydırma çubuğu stilini zorunlu kılmak için @media (prefers-contrast: more) CSS medya özelliğinin nasıl kullanılacağına dair isteğe bağlı talimatlar verilmektedir.

Okunabilirliği iyileştirme

Kaydırma çubuklarını scrollbar-color veya özelleştirilebilen değişkenlerle özelleştirirken yüksek kontrast modları için açık bir geçersiz kılma sağlayabilirsiniz. Bu, özellikle birincil uygulama temanız estetik nedenlerle düşük kontrastlı kaydırma çubukları kullanıyorsa yararlıdır.

İSTEĞE BAĞLI: Kaydırma çubuğu ve kaydırma yolu için koyu ve belirgin renkler tanımlamak üzere @media (prefers-contrast: more) bloğu kullanın.

/* 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 kullanılırken dikkat edilmesi gereken sorunlar

• scrollbar-color animasyonlu veya geçişli olmamalıdır. Bir WebKit hatası, scrollbar-color her değiştiğinde kaydırma çubuğunun titremesine neden oluyor.
• macOS'te, yerel "yer paylaşımlı" kaydırma çubukları kullanıldığından scrollbar-color (standart) ve ::-webkit-scrollbar (eski) özellikleri varsayılan olarak yoksayılır. macOS'in özel renkleri oluşturmasını zorunlu kılmak için özel renkleri scrollbar-width (ör. thin veya auto) ile eşlemeniz GEREKİR.
• scrollbar-width uygulansa bile macOS yer paylaşımlı kaydırma çubukları, kanalı (oluk) varsayılan olarak şeffaf şekilde oluşturur. Tasarım, macOS'te görünür bir kaydırma çubuğu arka plan rengi gerektiriyorsa kaydırılabilir kapsayıcıya scrollbar-gutter: stable; uygulamanız GEREKİR. Ancak bu rengin yalnızca kullanıcı fareyle kaydırma çubuğunun üzerine geldiğinde görüneceğini unutmayın.
• scrollbar-gutter: stable olsa bile parça, macOS'te şeffaf olabilir. Kaydırma çubuğu, görünür olmak için parça rengine bağlı olmamalıdır.

Yedekler ve Tarayıcı Desteği

scrollbar-color için yedekler ve tarayıcı desteği

Bu özellik progresif geliştirme olup her zaman yedek gerektirmez.

Stil önemliyse ve kullanıcının Baseline hedefi "Baseline Widely Available" veya daha eskiyse standart olmayan ::-webkit-scrollbar sözde öğelerini yedek olarak eklemeniz GEREKİR.

Hem standart özellikleri hem de eski WebKit seçicileri yerel olarak destekleyen tarayıcılarda bu ikisi arasında çakışma olmasını önlemek için eski yedekleri bir @supports not (scrollbar-color: auto) bloğuna sarmalayın.

Renkleri tanımlamak için özel özellikler kullanıyorsanız bunlar otomatik olarak eski WebKit seçicilere uygulanır. Bunları kopyalamanız GEREKMEZ.

/* 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);
  }
}