initial commit

1 files changed, 89 insertions, 0 deletions

diff --git a/files/ja/web/css/@document/index.html b/files/ja/web/css/@document/index.html
new file mode 100644
index 0000000000..00087b8d9e
--- /dev/null
+++ b/files/ja/web/css/@document/index.html
@@ -0,0 +1,89 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<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>