@document

非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

@documentCSSアットルールで、文書の URL に基づいて、その中に含まれるスタイルルールを制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義のスタイルシートにも使うことができます。

css
@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 のルールを使ってエスケープしなければなりません (\\. にします)。

@document は現在のところ Firefox のみが対応しています。 Firefox 以外のブラウザーでこの機能を再現したい場合は、このポリフィル (@An-Error94 氏作) を使ってみてください。これは、ユーザースクリプトと data-* 属性属性セレクターを組み合わせて使用するものです。

メモ: このプロパティの -moz 接頭辞がついたバージョン @-moz-document があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました (Firefox バグ 1035091 を参照)。

形式文法

@document [ <url>                    |
            url-prefix(<string>)     |
            domain(<string>)         |
            media-document(<string>) |
            regexp(<string>)
          ]# {
  <group-rule-body>
}

CSS ルールで文書を特定

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;
  }
}

仕様書

当初、レベル 3 では @document はレベル 4 に延期されましたが、その後で削除されました。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@document
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報