all shorthand property
all プロパティは direction と unicode-bidi を除く全てのCSSプロパティを initial・inherit・unset・revert のいずれかに一括設定する。ウィジェットやサードパーティ埋め込みなど、外部スタイルの影響を完全にリセットしたい場面で有用。
概要
all プロパティは direction と unicode-bidi を除く全てのCSSプロパティを initial・inherit・unset・revert のいずれかに一括設定する。ウィジェットやサードパーティ埋め込みなど、外部スタイルの影響を完全にリセットしたい場面で有用。
対応ブラウザ
デスクトップ
Chrome 37+
Edge 79+
Safari 9.1+
Firefox 27+
モバイル
Chrome Android 37+
Safari iOS 9.3+
Firefox Android 27+
基本構文
CSS
/* 全スタイルを初期値に */
.reset-all {
all: initial;
}
/* ユーザーエージェントのデフォルトに戻す */
.reset-to-default {
all: revert;
}
/* 継承値をクリアして未設定状態に */
.widget-container {
all: unset;
display: block;
padding: 1rem;
} 実務での使いどころ
-
埋め込みウィジェットの隔離
サードパーティコンテンツに親のスタイルが影響しないようリセット。
-
スタイルの完全リセット
特定のコンポーネントでスタイルを白紙から構築したい場合のベース。
注意点
- all: initial は display も initial(inline)に戻すため、必要なプロパティを再設定する。
- revert と unset の違いを正しく理解して使い分ける。
アクセシビリティ
- all: unset でフォーカスインジケーターもリセットされるため、:focus-visible を再定義する。