How to Inspect and Control CSS text-decoration-style in Safari Web Inspector

In modern web typography and user interface design, styling text decorations beyond conventional solid underlines allows web authors to communicate semantic states and enhance visual hierarchy. Underlines and line decorations can represent active hyperlinks, denote grammatical and spelling warnings, or establish decorative editorial flourishes. The CSS Text Decoration Module Level 3 standardises text-decoration-style, allowing developers to define stroke rendering patterns—such as solid, double, dotted, dashed, and wavy. In Safari on macOS and iOS, WebKit renders these strokes using Apple’s Core Graphics framework, ensuring smooth curvature and pixel-precise anti-aliasing across high-density Retina displays. Using Safari Web Inspector, developers and designers can inspect computed stroke styles, debug shorthand cascade overrides, and test interactive typographic treatments in real time.

Understanding CSS text-decoration-style Stroke Patterns

The text-decoration-style CSS property specifies the visual style of the decoration lines added by text-decoration-line (such as underline, overline, or line-through). WebKit supports five distinct keywords:

• solid (Initial Value): Renders a continuous, single straight stroke. Used as the default underline and strikethrough pattern across all browsers.
• double: Draws two parallel strokes with a narrow gap between them. Ideal for emphasizing important legal clauses, totals in financial tables, or primary navigation anchors.
• dotted: Produces a sequence of rounded dots. Frequently paired with abbreviations (<abbr>) or contextual tooltip triggers.
• dashed: Renders a series of rectangular line segments with intervening spaces. Common in draft document indicators or pending user actions.
• wavy: Draws a continuous sinusoidal wave stroke. Extensively utilised in spellchecking highlights, error states, and artistic editorial headers.

When used alongside companion properties such as text-decoration-color, text-decoration-thickness, and text-underline-offset, text-decoration-style allows complete control over the typographic footprint of text decorations.

Enabling Safari Web Inspector and Selecting Styled Text

To audit and control text decoration styles in Safari:

1. Confirm Developer Features are active by visiting Safari > Settings > Advanced (or Preferences) and verifying that Show features for web developers is ticked.
2. Right-click the text element featuring the decorative underline or strikethrough (such as a hyperlink, error highlight, or financial figure) and choose Inspect Element.
3. Safari Web Inspector opens directly into the Elements panel with the DOM node highlighted in the hierarchy tree.

Inspecting Decoration Styles in the Styles and Computed Panes

Within the Web Inspector sidebar, review how CSS rules are evaluated by WebKit:

• Styles Pane: Review all active and inherited CSS rules matching the element. Look for explicit declarations of text-decoration-style or modern composite shorthands (e.g. text-decoration: underline wavy #ff3b30 2px). If a style declaration appears struck through, check for cascade specificity conflicts or legacy shorthand resets.
• Computed Pane: Switch to the Computed tab and search for decoration. The Computed view reveals the effective resolved stroke style passed to Core Graphics for rasterisation.

Live-Testing and Customising Stroke Styles Interactively

Safari Web Inspector allows real-time interactive adjustments directly within the rule declaration block. Double-click the style block in the Styles tab to test different stroke styles:

/* Example: Editorial double underline on financial figures */
.financial-total {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* Example: Grammatical / spelling error alert with wavy stroke */
.spelling-alert {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ff3b30;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* Example: Interactive tooltip trigger with subtle dotted underline */
.glossary-term {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #8e8e93;
    text-underline-offset: 2px;
}

You can toggle between solid, dotted, dashed, and wavy directly inside the property value field to evaluate visual hierarchy and legibility against underlying background surfaces.

Programmatically Evaluating text-decoration-style via JavaScript

To verify the effective stroke style dynamically across client-side test suites or responsive layouts, execute commands in the Web Inspector Console:

// Select target element
const element = document.querySelector('.spelling-alert');

// Retrieve resolved CSS properties
const computedStyle = window.getComputedStyle(element);

// Output computed decoration style
console.log('Effective Decoration Style:', computedStyle.textDecorationStyle);

Handling WebKit Rendering Nuances and Anti-Aliasing

When implementing custom text decoration styles across responsive web applications, consider the following WebKit behaviours:

• Wavy Stroke Amplitude and Period: In WebKit, the amplitude and wavelength of text-decoration-style: wavy automatically scale proportionally with the element’s font-size and text-decoration-thickness. Setting an excessive thickness on small text can distort wave curvature.
• Shorthand Overwrite Pitfall: Declaring text-decoration: underline resets text-decoration-style back to solid. Always declare text-decoration-style after the shorthand, or declare all parameters within the complete shorthand (e.g. text-decoration: underline dashed red 2px).
• High-DPI Retina Rendering: Dotted and dashed lines render with sharp vector precision on Retina displays. On lower-resolution external displays, dotted patterns may appear softened due to anti-aliasing. Test across both display types using WebKit responsive design tools.