【CSS Modules】@documentアットルールの使い方

@documentオブジェクトは、特定のURLパターンに合致するウェブドキュメントに対してのみ、その内部に記述されたCSSスタイルを適用するためのat-ruleを表すオブジェクトです。この機能を使用することで、ウェブサイト内の特定のページや、特定のドメインにのみ独自のスタイルを適用するといった柔軟なスタイリングが可能になります。

@documentルールは、主にurl()、url-prefix()、domain()、regexp()といった関数を用いて条件を指定します。例えば、@document url("https://example.com/page.html") { /* スタイル */ } のように記述することで、指定されたURLに完全に一致するページにのみスタイルが適用されます。また、@document domain("example.com") { /* スタイル */ } と記述すれば、example.comドメイン内のすべてのページにスタイルが適用されます。複数の条件をカンマで区切って記述することも可能です。

ただし、@documentは現在、主要なウェブブラウザのほとんどでサポートされておらず、Web標準からも非推奨または廃止された機能です。そのため、新しいプロジェクトでの利用は推奨されません。クロスブラウザ対応を必要とする場合は、JavaScriptを使用してURLに基づいてクラスを動的に追加するか、CSSのセレクタや他のat-rule（例：@media）で対応することが一般的です。

Copy
1@document domain("example.com") {
2  /* スタイルルールを記述 */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません