unset
unset は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。
unset は一括指定の all を含む、あらゆる CSS プロパティに対して適用することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 41 | 13 | 27 | 9.1 | 41 | 9.3 | |
基本構文
CSS
.reset-component {
all: unset;
}
.reset-color {
color: unset; /* Inherited from parent */
}ライブデモ
実務での使いどころ
-
コンポーネントのスタイルリセット
サードパーティCSSの影響を受けたコンポーネントのスタイルを、unset で効率的にリセットして初期状態に戻します。
注意点
- all: unset は display プロパティも初期値（inline）にリセットするため、レイアウトが崩れる可能性があります。
アクセシビリティ
- フォーカスインジケーターのスタイルが unset でリセットされないよう、:focus-visible のスタイルを明示的に再定義してください。