How to Inspect CSS @counter-style and Custom List Numbering in Safari Web Inspector

Custom list markers and numbered outlines are essential for educational platforms, legal documentation, and localized web applications. Traditionally, developers had to rely on custom JavaScript or cumbersome pseudo-elements to replace standard Roman or Arabic numbers with specialized glyphs. The CSS @counter-style rule enables developers to define custom counter styles—including alphabetic, cyclic, numeric, and symbolic algorithms—natively in CSS. Safari Web Inspector provides comprehensive tools to inspect counter definitions, audit fallback systems, and debug list layout presentation.

Understanding @counter-style Rules and Descriptors

The @counter-style at-rule defines how counter values are converted into textual representations. Key descriptors include:

• system: The algorithmic counter system, such as cyclic (repeats symbols), numeric (positional numbering like decimal), alphabetic, or fixed.
• symbols: The list of characters, numbers, or strings representing the counting units.
• prefix / suffix: Characters appended before or after the marker (e.g. suffix: ") ").
• fallback: The alternative standard counter style (such as decimal) to use if the counter value exceeds defined bounds or if a glyph is unsupported.

Configuring Custom Roman and Tiered Marker Styles

Define a clean, branded counter style in your stylesheet:

/* Define custom circled numbering counter style */
@counter-style circled-numbers {
    system: fixed;
    symbols: ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉;
    suffix: " ";
    fallback: decimal;
}

/* Apply to ordered list */
.custom-instruction-list {
    list-style: circled-numbers;
    padding-left: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

Inspecting Counter Styles in Safari Web Inspector

To inspect custom counter implementations using Safari Web Inspector:

1. Open the website in Safari on macOS.
2. Right-click the list item or marker and select Inspect Element.
3. In the Elements panel, expand the <li> element to locate the ::marker pseudo-element.
4. Examine the Styles sidebar. Safari highlights the active list-style-type rule and links directly to the corresponding @counter-style block in the stylesheet.
5. Select the Computed tab to verify that the marker resolved to your custom counter style rather than falling back to browser defaults.

Debugging Unicode Glyphs and Mobile Rendering

When deploying specialized typographical symbols (such as CJK ideographs, ancient numerals, or mathematical symbols):

• Verify font fallback stacks. If the primary font lacks glyphs defined in your symbols descriptor, Safari will substitute a system fallback font, which may distort line heights.
• Connect an iPhone or iPad to your Mac to inspect mobile Web Inspector under the Develop menu, ensuring that iOS Dynamic Type scaling does not cause custom suffixes to collide with list body text.