@document

@document は CSS の @-規則で、文書の 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 の規則を使ってエスケープしなければなりません (\\. にします)。

形式文法

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

未対応のブラウザーでの回避策

@document は今のところ Firefox しか対応していません。もし、Firefox 以外のブラウザーでこのような機能を使用して複製したい場合は、 @An-Error94 によるこのポリフィルを使用してみてください。これは、ユーザースクリプト、 data-* 属性、属性セレクターを組み合わせて使用しています。

仕様書

当初は CSS Conditional Rules Module Level 3 にありましたが、 @document は Level 4 に 延期されました。

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

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