blob: 5c32a350c89778a1cab1aa7736c886a3a26a4c92 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
title: '@document'
slug: Web/CSS/@document
tags:
- '@-規則'
- '@document'
- CSS
- Reference
translation_of: Web/CSS/@document
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p><strong><code>@document</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で、文書の URL に基づいて、その中に含まれるスタイル規則を制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義スタイルシートにも使うことができます。</p>
<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
h1 {
color: green;
}
}
</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>@document</code> 規則には 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、規則がその URL に効果を及ぼします。利用可能な関数は次の通りです。</p>
<ul>
<li><code>url()</code>: 正確な URL に一致します。</li>
<li><code>url-prefix()</code>: 文書の URL が指定された値で始まる場合に一致します。</li>
<li><code>domain()</code>: 文書の URL が指定されたドメイン (またはそのサブドメイン) にある場合に一致します。</li>
<li><code>media-document()</code>: 動画、画像、プラグイン、またはそのすべての引数</li>
<li><code>regexp()</code>: 文書の URL が、指定された<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。</li>
</ul>
<p><code>url()</code>, <code>url-prefix()</code>, <code>domain()</code>, <code>media-document()</code> 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 <code>regexp()</code> 関数に与える値は、引用符で囲む<strong>必要があります</strong>。</p>
<p><code>regexp()</code> 関数に与えるエスケープされた値は、 CSS によってさらにエスケープする必要があります。例えば、一つの <code>.</code> (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現の規則を使ってエスケープし (<code>\.</code> にします)、次に CSS の規則を使ってエスケープしなければなりません (<code>\\.</code> にします)。</p>
<div class="note">
<p><strong>メモ</strong>: このプロパティの -moz 接頭辞がついたバージョン <code>@-moz-document</code> があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました ({{bug(1035091)}} を参照)。</p>
</div>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}
}
</pre>
<h3 id="Workaround_for_non-supporting_browsers" name="Workaround_for_non-supporting_browsers">未対応のブラウザーでの回避策</h3>
<p><code>@document</code> は今のところ Firefox しか対応していません。もし、Firefox 以外のブラウザーでこのような機能を使用して複製したい場合は、 @An-Error94 による<a href="https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill">このポリフィル</a>を使用してみてください。これは、ユーザースクリプト、 <a href="/ja/docs/Web/HTML/Global_attributes/data-*">data-* 属性</a>、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を組み合わせて使用しています。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">当初</a>は {{SpecName('CSS3 Conditional')}} にありましたが、 <code>@document</code> は Level 4 に <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">延期されました</a>。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{Compat("css.at-rules.document")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>www-style メーリングリストの <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a></li>
</ul>
|
