docs(css): Add more details about scrollbar-color and scrollbar-width props, hints for fallback

[bsmth]

trafficstars

Description

This PR adds some more details to the note about scrollbar-color and scrollbar-width props including a fallback example.

Motivation

Some people are not expecting to see styles overridden if scrollbar-color and scrollbar-width are specified in combination with non-standard ::-webkit-scrollbar pseudo-elements.

Additional details

• https://developer.chrome.com/blog/new-in-chrome-121
• https://developer.chrome.com/docs/css-ui/scrollbar-styling (includes example using @supports for fallback)
• https://groups.google.com/a/chromium.org/g/blink-dev/c/PkEsMirl2zE

Related issues and pull requests

Fixes #32277

• https://github.com/mdn/browser-compat-data/issues/22195

[github-actions[bot]]

Preview URLs

• /en-US/docs/Web/CSS/::-webkit-scrollbar

External URLs (6)

URL: /en-US/docs/Web/CSS/::-webkit-scrollbar Title: ::-webkit-scrollbar

• https://developer.chrome.com/docs/css-ui/scrollbar-styling (1 time) (Note! This may be a new URL 👀)
• https://ericwbailey.website/published/dont-use-custom-css-scrollbars/ (1 time) (Note! This may be a new URL 👀)
• https://inclusivedesignprinciples.org/ (1 time) (Note! This may be a new URL 👀)
• https://webkit.org/blog/363/styling-scrollbars/ (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/TR/WCAG20-TECHS/G183.html (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/WAI/WCAG21/Understanding/target-size.html (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-02-23 09:35:46)

[bsmth]

Thanks @estelle - incorporated changes based on your comments if you'd like to have another look 👀

[bsmth]

Thank you! Merging shortly 🚢