How to Inspect and Control the CSS all Property in Safari Web Inspector

In modern component-driven web development, embedding modular widgets, third-party badges, design system components, or micro-frontends into an existing website often results in frustrating style leakage. Global stylesheets declared on parent containers frequently cascade down into custom components, corrupting padding, typography, margins, and borders. Historically, web developers combated this cascade bleed by writing cumbersome CSS reset rules—manually declaring dozens of lines such as margin: 0; padding: 0; border: 0; font-size: inherit; background: transparent; on every isolated element.

The CSS Cascading and Inheritance Level 3 specification introduced a powerful, clean solution: the all shorthand property. Declaring all resets all CSS properties (with the intentional exceptions of direction and unicode-bidi) back to their initial, inherited, or revert baseline values in a single line. In Safari’s WebKit layout engine, testing and inspecting the all property in Safari Web Inspector allows developers to verify style encapsulation, test component resets, and ensure clean isolation across shadow DOM boundaries. This guide explains how all operates, how each reset keyword behaves in WebKit, and how to debug style resets live in Safari.

Understanding the CSS all Property and Reset Keywords

The all shorthand property accepts four universal CSS keyword values, each triggering a distinct cascade behavior across all supported CSS properties simultaneously:

• all: initial: Resets all properties to their initial, official W3C specification default values. For instance, color becomes black, display becomes inline (even for <div> or <section> elements), and background-color becomes transparent. This completely severs inheritance from parent containers.
• all: unset: Behaves dynamically based on property type. If a property is naturally inherited (such as color, font-family, or line-height), it inherits the parent element’s value. If a property is non-inherited (such as padding, margin, border, or background), it resets to its initial default. This is the most popular choice for building clean, predictable UI widgets.
• all: revert: Rolls back the cascade to the browser’s default user-agent stylesheet (or user preferences). For example, a <button> or <h1> reset with all: revert regains standard native browser button chrome or default heading typography, wiping out custom author styles without breaking semantic element behavior.
• all: inherit: Forces every property to inherit its value from the parent element, even properties that are non-inherited by default (such as borders and background fills).

Properties intentionally preserved and exempt from all resets include direction, unicode-bidi, and CSS custom properties (variables, e.g. --primary-color), ensuring international text orientation and design token systems remain functional.

Inspecting Computed Properties in Safari Web Inspector

To inspect how WebKit applies the all property on an element:

1. Open Safari and navigate to the webpage hosting the target component or embedded widget.
2. Right-click the container or element and select Inspect Element to launch Safari Web Inspector.
3. Select the target DOM node in the Elements hierarchy.
4. In the right-hand inspection sidebar, open the Computed tab.

The Computed tab displays the resolved values of all CSS properties after the cascade is evaluated. When all: unset or all: initial is active, scroll through the list to observe how non-inherited properties such as margin-top, padding-left, and border-width immediately resolve to 0px or none.

Testing Component Isolation via all: unset

To test how a custom card or embedded widget behaves when shielded from parent typography and layout overrides, inject custom rules live in the Styles panel:

/* Clean style isolation for custom component roots */
.widget-container {
  all: unset;
  display: block; /* Explicitly restore block display */
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1d1d1f;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
}

Notice the critical inclusion of display: block;. Because all: unset resets non-inherited properties to their initial values, the display property of block elements resets to inline. Always re-declare the intended display mode (such as block, flex, or grid) immediately following all: unset.

Restoring Native Browser Styling with all: revert

When custom CSS frameworks or overly aggressive CSS resets break the appearance of standard HTML form controls or semantic elements, use all: revert to restore native browser chrome:

/* Restore native Safari rendering for specific interactive controls */
.legacy-reset-zone button.native-action {
  all: revert;
  cursor: pointer;
}

In Safari Web Inspector, toggle this rule in the Styles pane. Observe how the button instantly regains standard macOS or iOS system button styling, focus rings, and default padding directly from WebKit’s built-in user-agent stylesheet.

Isolating Web Components and Shadow DOM Roots

When developing custom elements using Shadow DOM, host elements can still inherit unwanted ambient styles from the light DOM. You can enforce a pristine starting baseline inside the shadow root by targeting the :host pseudo-class:

/* Shadow DOM baseline encapsulation */
:host {
  all: initial;
  display: block;
  contain: content;
}

In Safari Web Inspector, expand the #shadow-root (open) node in the Elements tree to inspect the shadow host. Verify that ancestor light DOM cascade rules no longer bleed into the shadow container.

Troubleshooting Common all Property Quirks in Safari

When using the all property in Safari, watch out for these subtle rendering behaviors:

• The “display: inline” Gotcha: As noted, all: initial and all: unset reset display to inline. If a block container suddenly collapses or displays horizontal flow artifacts, check the Computed styles pane to confirm you re-declared display: block; or display: flex; after the reset.
• Cascade Order Matters: Because all resets all properties, any property declarations written before all in the same rule block will be overridden and discarded. Always place the all declaration at the very top of your selector rule block.
• CSS Custom Properties Persist: The all property intentionally does not reset CSS variables (--variable-name). If inherited colors or spacing tokens continue to affect your element, override the variables explicitly on the target container.

Using Safari Web Inspector to inspect and calibrate the CSS all property gives developers complete control over the style cascade, ensuring components remain robust, insulated, and easily embeddable across any web application.