🍋
Menu
CSS

Custom Properties Inheritance

CSS Custom Properties Inheritance

The mechanism by which CSS custom properties cascade down the DOM tree, inheritable by default unlike regular properties.

技術的詳細

CSS custom properties inheritance is part of the CSS specification maintained by the W3C CSS Working Group. Browser rendering engines (Blink, WebKit, Gecko) implement the specification through their layout and paint pipeline stages. Understanding the rendering pipeline — Style → Layout → Paint → Composite — is key to writing performant CSS. Properties that trigger layout recalculation (width, height, margin) are more expensive than those that only trigger compositing (transform, opacity).

```css
/* Example: Custom Properties Inheritance */
.element {
  /* Apply custom properties inheritance to this element */
  display: block;
  margin: 0 auto;
}
```

関連フォーマット

関連ツール

関連用語