revert
revert は CSS のキーワードで、現在の要素にカスケードされたプロパティの値を、現在の **スタイルオリジン**が変更を行わなければそのプロパティが持っていたであろう値に戻します。したがって、プロパティは、ユーザーエージェント設定値、ユーザー設定値、継承値(継承可能な場合)、または初期値のいずれかにリセットされます。これは、 CSS の一括指定プロパティ all を含め、あらゆる CSS プロパティに適用することができます。
このキーワードは、ロールバックされるスタイルに到達するまで、オーバーライドされたすべてのスタイルをカスケードから削除します。
サイト独自のスタイル(作成者のオリジン)で使用された場合、 revert はプロパティのカスケードされた値を、ユーザー独自のスタイルが存在する場合はそのスタイルにロールバックし、それ以外の場合はユーザーエージェントの既定のスタイルにロールバックします。
ユーザー独自のスタイルシートで使用された場合、またはスタイルがユーザーによって適用された場合(ユーザーオリジン)、 revert はカスケードされた値をユーザーエージェントの既定のスタイルにロールバックします。
ユーザーエージェントの既定のスタイル内で使用された場合、このキーワードは機能的に unset と等価です。
revert キーワードは多くの場合、unset とまったく同じ動作をします。唯一の違いは、ブラウザーやユーザーによって作成された独自スタイルシート(ブラウザー側に設定されたもの)が設定した値があるプロパティについてです。
revert は、リセットした要素の子に適用されているルールには影響しません(ただし、子に対する親のルールの効果は除去されます)。つまり、すべてのセクションに color: green を設定し、特定のセクションに all: revert を設定した場合、そのセクションの色は黒になります。しかし、すべての段落を赤にするルールがある場合、すべての段落はすべてのセクションで赤のままです。
メモ: revert は単なる値です。 revert の値は詳細度を使用して上書きすることができます。
メモ: revert キーワードは initial キーワードとは異なりますし、混同しないでください。これは CSS の仕様書でプロパティごとに定義された初期値です。それに対して、既定値はユーザーエージェントのスタイルシートが CSS セレクターに基づいて定義しています。
例えば、 display プロパティの初期値は inline ですが、普通のユーザーエージェントスタイルシートは、 display の既定値を <div> では block、 <table> では table というように設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 84 | 84 | 67 | 9.1 | 84 | 9.3 | |
基本構文
.reset-list {
list-style: revert;
padding: revert;
margin: revert;
} ライブデモ
実務での使いどころ
-
ブラウザデフォルトスタイルへの復帰
CSSリセットで除去されたブラウザデフォルトのスタイルを、特定の要素だけ元に戻します。
注意点
- revertはinitialとは異なります。initialはCSS仕様の初期値(例:displayはinline)に戻し、revertはブラウザデフォルト値に戻します。
アクセシビリティ
- revertによりブラウザデフォルトのスタイルに戻すことで、フォーカスインジケーターなどのアクセシビリティ機能が復活する場合があります。