How to Inspect and Control CSS Custom Scrollbars in Safari Web Inspector

Default operating system scrollbars often clash aesthetically with bespoke dark mode themes, embedded sidebars, and compact modal dialogue boxes. Historically, styling scrollbars across web browsers required proprietary, non-standard WebKit pseudo-elements like ::-webkit-scrollbar, which were verbose and frequently broke accessibility standards. Modern standards-compliant CSS provides scrollbar-color and scrollbar-width to style scrollbars declaratively. Safari Web Inspector provides dedicated inspection tools to evaluate custom scrollbar aesthetics.

Understanding Standard CSS Scrollbar Properties

The W3C CSS Scrollbars specification replaces legacy pseudo-elements with two clean properties:

• scrollbar-color: thumb-color track-color; Defines the visual color palette for the scrollbar thumb (the movable draggable bar) and the underlying track. Setting scrollbar-color: auto; restores default system styling.
• scrollbar-width: auto; Renders the default platform scrollbar thickness.
• scrollbar-width: thin; Renders a slender, minimalist scrollbar footprint ideal for dense data sidebars and code preview blocks.
• scrollbar-width: none; Completely hides visual scrollbars while preserving full touch, trackpad, and mouse wheel scrollability.

Inspecting Custom Scrollbars in Safari Web Inspector

To audit custom scrollbar styling on a container in Safari:

1. Open your test document in Safari and press Option + Cmd + I to launch Web Inspector.
2. Select your scrollable container in the Elements DOM tree.
3. In the Styles panel, inspect the applied rules:

   .sidebar-panel {
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: #6366f1 #1e1e2e;
   }

4. Click the color swatch icons directly inside Safari Web Inspector to launch the interactive color picker. Adjusting the thumb or track color updates the rendered scrollbar in real time.
5. Toggle between thin and auto to evaluate dimensional layout clearances.

Ensuring Contrast and Accessibility Compliance

Custom scrollbars must remain easily visible against background container panels:

• Contrast Audit: In Web Inspector’s color picker, verify that the thumb color maintains at least a 3:1 contrast ratio against the track background to comply with WCAG 2.1 non-text contrast guidelines.
• Touch Interaction: Ensure that scrollbar-width: none; does not trap keyboard-only users who lack mouse wheel inputs.

Auditing standard CSS scrollbars in Safari Web Inspector ensures refined cross-platform styling across macOS and iOS devices.