CSS の @document
@-規則は、文書の URL に基づいて、その中に含まれるスタイル規則を制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義スタイルシートにも使うことができます。
@document url("https://www.example.com/") { h1 { color: green; } }
構文
@document
規則には 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、規則がその URL に効果を及ぼします。利用可能な関数は次の通りです。
url()
: 正確な URL に一致します。url-prefix()
: 文書の URL が指定された値で始まる場合に一致します。domain()
: 文書の URL が指定されたドメイン (またはそのサブドメイン) にある場合に一致します。media-document()
: 動画、画像、プラグイン、またはそのすべての引数regexp()
: 文書の URL が、指定された正規表現に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。
url()
, url-prefix()
, domain()
, media-document()
関数に与える値は、単一引用符または二重引用符で囲うこともできます。 regexp()
関数に与える値は、引用符で囲む必要があります。
regexp()
関数に与えるエスケープされた値は、 CSS によってさらにエスケープする必要があります。例えば、一つの .
(ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現の規則を使ってエスケープし (\.
にします)、次に CSS の規則を使ってエスケープしなければなりません (\\.
にします)。
メモ: このプロパティの -moz 接頭辞がついたバージョン @-moz-document
があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました (バグ 1035091)。
形式文法
@document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> }
例
CSS
@document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org), media-document(video), regexp("https:.*") { /* ここの CSS 規則は次の場所に適用されます。 - "http://www.w3.org/" のページ - URL が "http://www.w3.org/Style/" で始まるすべてのページ - URL のホストが "mozilla.org" である、 または ".mozilla.org" で終わるすべてのページ - URL が "https:" で始まるページ */ /* 上で挙げたページを見辛くする */ body { color: purple; background: yellow; } }
仕様書
当初は CSS Conditional Rules Module Level 3 にありましたが、 @document
は Level 4 に 延期されました。
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@document | Chrome 未対応 なし | Edge 未対応 なし | Firefox
完全対応
61
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android
完全対応
61
| Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
regexp() | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 6 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 6 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- www-style メーリングリストの Per-site user style sheet rules