2021/08/13 時点の英語版に同期

1 files changed, 33 insertions, 39 deletions

diff --git a/files/ja/web/css/@document/index.md b/files/ja/web/css/@document/index.md
index 5c32a350c8..84b5f52767 100644
--- a/files/ja/web/css/@document/index.md
+++ b/files/ja/web/css/@document/index.md
@@ -2,57 +2,57 @@
 title: '@document'
 slug: Web/CSS/@document
 tags:
-  - '@-規則'
-  - '@document'
+  - アットルール
   - CSS
-  - Reference
+  - リファレンス
+browser-compat: css.at-rules.document
 translation_of: Web/CSS/@document
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Deprecated_header}}
 
-<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>
+**`@document`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、文書の URL に基づいて、その中に含まれるスタイルルールを制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義のスタイルシートにも使うことができます。
 
-<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+```css
+@document url("https://www.example.com/") {
   h1 {
     color: green;
   }
 }
-</pre>
+```
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>@document</code> 規則には 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、規則がその URL に効果を及ぼします。利用可能な関数は次の通りです。</p>
+`@document` ルールには 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、ルールがその URL に効果を及ぼします。利用可能な関数は次の通りです。
 
-<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>
+- `url()`: 正確な URL に一致します。
+- `url-prefix()`: 文書の URL が指定された値で始まる場合に一致します。
+- `domain()`: 文書の URL が指定されたドメイン (またはそのサブドメイン) にある場合に一致します。
+- `media-document()`: 動画、画像、プラグイン、またはそのすべての引数
+- `regexp()`: 文書の URL が、指定された[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。
 
-<p><code>url()</code>, <code>url-prefix()</code>, <code>domain()</code>, <code>media-document()</code> 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 <code>regexp()</code> 関数に与える値は、引用符で囲む<strong>必要があります</strong>。</p>
+`url()`, `url-prefix()`, `domain()`, `media-document()` 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 `regexp()` 関数に与える値は、引用符で囲む*必要があります*。
 
-<p><code>regexp()</code> 関数に与えるエスケープされた値は、 CSS によってさらにエスケープする必要があります。例えば、一つの <code>.</code> (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現の規則を使ってエスケープし (<code>\.</code> にします)、次に CSS の規則を使ってエスケープしなければなりません (<code>\\.</code> にします)。</p>
+エスケープされた値を `regexp()` 関数に与える場合は、 CSS でさらにエスケープする必要があります。例えば、一つの `.` (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現のルールを使ってエスケープし (`\.` にします)、次に CSS のルールを使ってエスケープしなければなりません (`\\.` にします)。
 
-<div class="note">
-<p><strong>メモ</strong>: このプロパティの -moz 接頭辞がついたバージョン <code>@-moz-document</code> があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました ({{bug(1035091)}} を参照)。</p>
-</div>
+`@document` は現在のところ Firefox のみが対応しています。 Firefox 以外のブラウザーでこの機能を再現したい場合は、[このポリフィル](https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill) (@An-Error94 氏作) を使ってみてください。これは、ユーザースクリプトと [data-* 属性](/ja/docs/Web/HTML/Global_attributes/data-*)と[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)を組み合わせて使用するものです。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+> **Note:** このプロパティの -moz 接頭辞がついたバージョン `@-moz-document` があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました ({{bug(1035091)}} を参照)。
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="CSS">CSS</h3>
+### CSS ルールで文書を特定
 
-<pre class="brush: css">@document url("http://www.w3.org/"),
+```css
+@document url("http://www.w3.org/"),
           url-prefix("http://www.w3.org/Style/"),
           domain("mozilla.org"),
           media-document("video"),
           regexp("https:.*") {
-  /* ここの CSS 規則は次の場所に適用されます。
+  /* ここの CSS ルールは次の場所に適用されます。
      - "http://www.w3.org/" のページ
      - URL が "http://www.w3.org/Style/" で始まるすべてのページ
      - URL のホストが "mozilla.org" である、
@@ -66,22 +66,16 @@ translation_of: Web/CSS/@document
     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>
+[当初](https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document)は {{SpecName('CSS3 Conditional')}} にありましたが、 `@document` は Level 4 に[延期されました](https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes)。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.at-rules.document")}}</p>
+{{Compat}}
 
-<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>
+- www-style メーリングリストの [Per-site user style sheet rules](https://lists.w3.org/Archives/Public/www-style/2004Aug/0135)