unset
unset は CSS プロパティをリセットする汎用キーワードで、プロパティの種類に応じて inherit または initial と同じ動作をします。カスケードで設定された値を効率的に取り消せるため、コンポーネントベースの開発でスタイルの干渉を防ぐのに有用です。all: unset と組み合わせると全プロパティを一括リセットできます。
概要
unset は CSS プロパティをリセットする汎用キーワードで、プロパティの種類に応じて inherit または initial と同じ動作をします。カスケードで設定された値を効率的に取り消せるため、コンポーネントベースの開発でスタイルの干渉を防ぐのに有用です。all: unset と組み合わせると全プロパティを一括リセットできます。
対応ブラウザ
デスクトップ
Chrome 41+
Edge 13+
Safari 9.1+
Firefox 27+
モバイル
Chrome Android 41+
Safari iOS 9.3+
Firefox Android 27+
基本構文
CSS
.reset-component {
all: unset;
}
.reset-color {
color: unset; /* 親から継承 */
}実務での使いどころ
-
コンポーネントのスタイルリセット
サードパーティCSSの影響を受けたコンポーネントのスタイルを、unset で効率的にリセットして初期状態に戻します。
注意点
- all: unset は display プロパティも初期値（inline）にリセットするため、レイアウトが崩れる可能性があります。
アクセシビリティ
- フォーカスインジケーターのスタイルが unset でリセットされないよう、:focus-visible のスタイルを明示的に再定義してください。