@document CSS アットルール

構文

@document url("/proxy/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-* 属性と属性セレクターを組み合わせて使用するものです。

形式文法

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

例

CSS ルールで文書を特定

@document url("/proxy/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 に延期されましたが、その後で削除されました。

ブラウザーの互換性

関連情報

• www-style メーリングリストの Per-site user style sheet rules