Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。スタイルの完全リセットに使用。

概要

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 を再定義する。