これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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 に 延期されました

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的非標準
Chrome 未対応 なしEdge ? Firefox 完全対応 61
接頭辞付き 補足 無効
完全対応 61
接頭辞付き 補足 無効
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
無効 From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 1.5 — 61
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
regexp()
実験的非標準
Chrome 未対応 なしEdge ? Firefox 完全対応 6IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, inkusu, lv7777, fscholz, ethertank, sosleepy, Marsf
最終更新者: mfuji09,