≪ Today I learned.
RSS購読
    公開日
    タグ
    JavaScript
    著者
    ダーシノ

    ::backdropがスタイルを継承するようになっ

    ::backdrop擬似要素はどの要素にも継承せず、どの要素からも継承しません。この擬似要素に適用するプロパティの制限はありません。 https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop

    The ::backdrop pseudo-element is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element. https://drafts.csswg.org/css-position-4/#backdrop

    Before

    /* ::backdropが:rootを継承しないためセレクタに追加する必要がある */
    :root, ::backdrop {
      --bg-color: ...;
    }
    ::backdrop {
      background-color: var(--bg-color);
    }

    After

    :root {
      --bg-color: ...;
    }
    ::backdrop {
      background-color: var(--bg-color);
    }

    ※2024-03-01時点で、Chrome122、Firefox122ではサポート済み。Safari17.3は未サポート。