v133 · dom

Glossary Document

Technical terms in the article below are dotted-underlined. Hover or focus any term to see its definition as a popover=hint. Opening the definition of one term doesn't close another — hints have their own top-layer stacking lane that doesn't interfere with other popovers.

Feature detection: checking…
open hints
hover a term to open a hint
CSS Architecture Guide — hover the dotted terms for definitions

The CSS Rendering Model

At the heart of every stylesheet is the , the algorithm that resolves which declaration wins when multiple rules compete for the same property. Understanding it removes the guesswork from debugging overrides.

Within the cascade, declarations are ranked first by origin (browser, author, user), then by . Specificity is a three-part tuple — inline styles, IDs, and classes/attributes/pseudo-classes — calculated independently of document order.

Once the winning declaration is chosen it enters the as a style rule. The browser walks the rule tree, evaluates custom properties, and produces for every element.

Inheritance and Custom Properties

Many properties participate in . When no value is declared for an element, the browser walks the element's ancestors and uses the first declared value it finds. This is why setting color on <body> colours all descendant text.

(CSS variables) inherit by default and can be used to propagate design tokens down the tree without re-declaring them at every level.

Cascade The algorithm that assigns a final value to every CSS property on every element. It considers origin, importance, specificity, and source order to pick exactly one winning declaration. See: CSS Cascading & Inheritance Level 5
Specificity A three-integer score (A, B, C) where A = inline styles, B = IDs, C = classes/attributes/pseudo-classes. Higher score wins; source order breaks ties at the same score. See: :is() and :where() for specificity control
CSSOM CSS Object Model. A live JavaScript API exposing the parsed rule tree (document.styleSheets). Rules, media queries, and nested declarations are all reachable and writable at runtime. See: CSSNestedDeclarations (Chrome 130)
Computed value The value after inheritance and the cascade are resolved, but before layout. Relative lengths (em, %) are still relative at this stage; they become used values after layout. See: getComputedStyle()
Inheritance When a property has no declared value, the computed value is copied from the element's parent. Only inheritable properties do this — layout properties like width do not inherit by default. See: inherit, initial, unset, revert keywords
Custom property (CSS variable) A property whose name starts with --. Its value is substituted via var(). Custom properties inherit and participate in the cascade like any other property, making them ideal for design tokens. See: @property for typed custom properties

Why hints don't close menus

popover=auto — single stacking lane
All auto popovers share one lane. Opening a new auto popover closes any other auto popover. If you built term definitions as popover=auto, opening one definition would dismiss any open menu — the exact opposite of what a glossary doc needs.
popover=hint — separate lane, coexists with auto
Hint popovers live in a parallel lane above the auto lane. Opening a hint does not close any auto popover, and vice versa. A user can read a definition while a dropdown menu is still open. This is the glossary-doc use case the feature was designed for.
<!-- Term in the document -->
<button
  popovertarget="hint-cascade"
  popovertargetaction="toggle">cascade</button>

<!-- Definition rendered in the top layer -->
<div id="hint-cascade" popover="hint">
  <strong>Cascade</strong>
  The algorithm that resolves competing CSS declarations…
</div>

/*
  No JavaScript needed — popovertarget wires the button to
  the popover. popover=hint keeps the definition from
  closing any open auto popover (nav menus, dropdowns).
*/

see also