revert
revertは、CSSプロパティの値をカスケードの前の段階のスタイルに巻き戻すキーワードです。initialがCSS仕様上の初期値に戻すのに対し、revertはブラウザのデフォルトスタイルに戻す点が異なります。例えば、display: revertを<div>に適用するとブラウザデフォルトのblockに戻ります。カスタムスタイルを条件付きで解除する場面で非常に便利です。
概要
revertは、CSSプロパティの値をカスケードの前の段階のスタイルに巻き戻すキーワードです。initialがCSS仕様上の初期値に戻すのに対し、revertはブラウザのデフォルトスタイルに戻す点が異なります。例えば、display: revertを<div>に適用するとブラウザデフォルトのblockに戻ります。カスタムスタイルを条件付きで解除する場面で非常に便利です。
対応ブラウザ
デスクトップ
Chrome 84+
Edge 84+
Safari 9.1+
Firefox 67+
モバイル
Chrome Android 84+
Safari iOS 9.3+
Firefox Android 67+
基本構文
CSS
.reset-list {
list-style: revert;
padding: revert;
margin: revert;
}実務での使いどころ
-
ブラウザデフォルトスタイルへの復帰
CSSリセットで除去されたブラウザデフォルトのスタイルを、特定の要素だけ元に戻します。
注意点
- revertはinitialとは異なります。initialはCSS仕様の初期値（例：displayはinline）に戻し、revertはブラウザデフォルト値に戻します。
アクセシビリティ
- revertによりブラウザデフォルトのスタイルに戻すことで、フォーカスインジケーターなどのアクセシビリティ機能が復活する場合があります。