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

@document 規則は、ドキュメントの URL に基づいて、その中に含まれるスタイル規則を制限する CSS@ 規則 です。これは主にユーザー定義スタイルシート用に設計されていますが、著者定義スタイルシートにも使えます。

@document url("https://www.example.com/") {
  h1 {
    color: green;
  }
}

構文

@document 規則には 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、規則がその URL に効果を及ぼします。利用可能な関数は次の通りです:

  • url()。正確な URL にマッチします
  • url-prefix()。URL が、与えた値で始まるときマッチします
  • domain()。URL が、与えたドメイン内のもの (またはサブドメインのもの) であるときマッチします
  • regexp()。URL が、与えた 正規表現 にマッチするときにマッチします。正規表現は URL 全体にマッチする必要があります。

url()url-prefix()、および domain() 関数に与える値は、単一引用符または二重引用符で囲うこともできます。regexp() 関数に与える値は、引用符で囲わねばなりません

regexp() 関数に与えるエスケープされた値は CSS によってさらにエスケープされる必要があります。例えば、一つの . (ピリオド) は正規表現ではどんな文字にもマッチします。リテラルのピリオドにマッチさせるには、まず正規表現の規則を使ってエスケープし(\. にします)、次に CSS の規則を使ってエスケープしなければなりません(\\. にします)。

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

Formal syntax

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

CSS

@document url(http://www.w3.org/),
          url-prefix(http://www.w3.org/Style/),
          domain(mozilla.org),
          regexp("https:.*") {
  /* この CSS 規則を次のページに適用:
     + "http://www.w3.org/" ページ。
     + "http://www.w3.org/Style/" で始まる URL のページ。
     + URL のホストが "mozilla.org" のページまたは ".mozilla.org" で終わるページ。
     + URL が "https:" で始まるページ。
   */

  /* 上で挙げたページを見辛くする */
  body {
    color: purple;
    background: yellow;
  }
}

仕様

CSS Conditional Rules Module Level 3初めて登場 しました。@document は CSS4 に 延期されました

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし ?

61 -moz- 1 2

1.5 — 61 -moz-

なし なし なし
regexp() なし ?6 -moz- なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ? ? ? ? なし
regexp() なし なし ? ? なし なし なし

1. 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.

2. 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.

関連情報

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

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