all shorthand property
all は CSS の一括指定プロパティで、要素のすべてのプロパティを (unicode-bidi、direction、 CSS カスタムプロパティを除いて) 初期化します。プロパティは初期値または継承値、または他のカスケードレイヤーまたはスタイルシートに由来して指定した値に設定される可能性があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 37 | 79 | 27 | 9.1 | 37 | 9.3 | |
基本構文
CSS
/* Reset all styles to their initial values */
.reset-all {
all: initial;
}
/* Reset to the user agent's defaults */
.reset-to-default {
all: revert;
}
/* Clear inherited values and reset to unset */
.widget-container {
all: unset;
display: block;
padding: 1rem;
}ライブデモ
実務での使いどころ
-
埋め込みウィジェットの隔離
サードパーティコンテンツに親のスタイルが影響しないようリセット。
-
スタイルの完全リセット
特定のコンポーネントでスタイルを白紙から構築したい場合のベース。
注意点
- all: initial は display も initial（inline）に戻すため、必要なプロパティを再設定する。
- revert と unset の違いを正しく理解して使い分ける。
アクセシビリティ
- all: unset でフォーカスインジケーターもリセットされるため、:focus-visible を再定義する。