Điều chỉnh thanh cuộn theo lựa chọn ưu tiên về độ tương phản cao

Người dùng bật chế độ tương phản cao trong hệ điều hành hoặc trình duyệt mong muốn các phần tử trên giao diện người dùng (như thanh cuộn) phải cực kỳ dễ đọc, thường dựa vào sự phân tách rõ ràng giữa nền trước và nền sau thay vì màu xám hoặc màu giao diện tinh tế.

Hướng dẫn này cung cấp hướng dẫn không bắt buộc về cách sử dụng tính năng nội dung nghe nhìn CSS @media (prefers-contrast: more) để thực thi kiểu thanh cuộn có độ tương phản cao.

Làm đẹp

Khi tuỳ chỉnh thanh cuộn bằng scrollbar-color hoặc biến tuỳ chỉnh, bạn có thể cung cấp chế độ ghi đè rõ ràng cho chế độ có độ tương phản cao. Điều này đặc biệt hữu ích nếu giao diện ứng dụng chính của bạn sử dụng thanh cuộn có độ tương phản thấp vì lý do thẩm mỹ.

KHÔNG BẮT BUỘC: Sử dụng khối @media (prefers-contrast: more) để xác định màu tối, riêng biệt cho nút kéo và thanh trượt.

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

Những vấn đề cần lưu ý khi sử dụng scrollbar-color

• KHÔNG tạo ảnh động hoặc chuyển đổi scrollbar-color. Lỗi WebKit khiến thanh cuộn nhấp nháy mỗi khi scrollbar-color thay đổi.
• Trên macOS, các thuộc tính scrollbar-color (chuẩn) và ::-webkit-scrollbar (cũ) bị bỏ qua theo mặc định vì macOS sử dụng thanh cuộn "lớp phủ" gốc. Bạn PHẢI ghép nối màu sắc tuỳ chỉnh với scrollbar-width (ví dụ: thin hoặc auto) để buộc macOS hiển thị các màu đó.
• Ngay cả khi áp dụng scrollbar-width, thanh cuộn lớp phủ macOS vẫn hiển thị rãnh (máng) ở chế độ trong suốt theo mặc định. Nếu thiết kế yêu cầu màu nền thanh cuộn hiển thị trên MacOS, bạn PHẢI áp dụng scrollbar-gutter: stable; cho vùng chứa có thể cuộn, nhưng xin lưu ý rằng màu nền này chỉ xuất hiện sau khi người dùng di chuột qua thanh cuộn.
• Ngay cả khi có scrollbar-gutter: stable, dải này vẫn có thể trong suốt trên MacOS. Nút kéo không được phụ thuộc vào màu của thanh trượt để hiển thị.

Dự phòng và hỗ trợ trình duyệt

Dự phòng và hỗ trợ trình duyệt cho scrollbar-color

Tính năng này là cải tiến tăng dần và không phải lúc nào cũng cần có tính năng dự phòng.

Nếu kiểu dáng là quan trọng và mục tiêu Baseline của người dùng là "Baseline Widely Available" (Baseline được cung cấp rộng rãi) trở lên, thì bạn NÊN thêm các phần tử giả ::-webkit-scrollbar không chuẩn làm phương án dự phòng.

Gói các phương án dự phòng cũ trong một khối @supports not (scrollbar-color: auto) để ngăn xung đột giữa các thuộc tính chuẩn và bộ chọn WebKit cũ trong các trình duyệt hỗ trợ cả hai thuộc tính này.

Nếu bạn đang sử dụng các thuộc tính tuỳ chỉnh để xác định màu, thì các thuộc tính này sẽ tự động xếp tầng cho các bộ chọn WebKit cũ. Bạn KHÔNG cần phải sao chép các mục này.

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