【CSS Modules】revertキーワードの使い方
revertキーワードの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
revert定数は、CSSプロパティの値を、そのプロパティがカスケードにおいて以前に設定されていなかった場合の初期状態に戻すことを表す定数です。これは、現在の要素に適用されているスタイルを一時的に無効にし、そのプロパティが本来持つべき値、つまりブラウザのデフォルトスタイルや、ウェブサイトのスタイルが適用される前の状態に戻すような動作をします。
例えば、ウェブサイトのスタイルで文字色が赤に設定されていたとしても、特定の要素に対してcolor: revert;と指定することで、その要素の文字色を、ウェブサイトのスタイルが適用される前の状態、例えばユーザーが設定したスタイルやブラウザのデフォルトの色に戻すことができます。
revertは、initialやunsetといった他のグローバルキーワードとは異なる重要な特性を持っています。initialがプロパティの初期定義値、つまりそのプロパティが持つ一番最初の値に戻すのに対し、revertはCSSのスタイルの適用順序（カスケード）を考慮します。これにより、ユーザーエージェントスタイルシート（ブラウザのデフォルト）、ユーザー定義スタイルシート（ユーザーによる設定）、オーサースタイルシート（ウェブサイト作成者による設定）といったカスケードの層を考慮し、上位のスタイルシートによって設定された値に戻すことが可能になります。
このキーワードは、既存のスタイルを部分的にリセットし、特定のプロパティを「より一般的な」または「前の段階の」状態に戻したい場合に非常に有用です。特に、ライブラリやフレームワーク由来のスタイルを一時的に無効化し、よりベースとなるスタイルを適用させたい場面などで活用できます。CSS Modules環境においても、モジュール内で定義されたスタイルを、意図的にこの定数を使ってリセットすることが可能です。
構文(syntax)
1.selector { 2 property: revert; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません