From aeacefb40781cff662a8e477e3c569fb413602f6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 15 Dec 2021 00:37:07 +0900 Subject: CSS Conditional Rules 関係の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@document/index.html | 87 ----------------------------------- files/ja/web/css/@document/index.md | 87 +++++++++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+), 87 deletions(-) delete mode 100644 files/ja/web/css/@document/index.html create mode 100644 files/ja/web/css/@document/index.md (limited to 'files/ja/web/css/@document') diff --git a/files/ja/web/css/@document/index.html b/files/ja/web/css/@document/index.html deleted file mode 100644 index 5c32a350c8..0000000000 --- a/files/ja/web/css/@document/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: '@document' -slug: Web/CSS/@document -tags: - - '@-規則' - - '@document' - - CSS - - Reference -translation_of: Web/CSS/@document ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

@document は CSS の @-規則で、文書の URL に基づいて、その中に含まれるスタイル規則を制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義スタイルシートにも使うことができます。

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

構文

- -

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

- - - -

url(), url-prefix(), domain(), media-document() 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 regexp() 関数に与える値は、引用符で囲む必要があります。

- -

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

- -
-

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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-* 属性、属性セレクターを組み合わせて使用しています。

- -

仕様書

- -

当初は {{SpecName('CSS3 Conditional')}} にありましたが、 @document は Level 4 に 延期されました。

- -

ブラウザーの対応

- -

{{Compat("css.at-rules.document")}}

- -

関連情報

- - diff --git a/files/ja/web/css/@document/index.md b/files/ja/web/css/@document/index.md new file mode 100644 index 0000000000..5c32a350c8 --- /dev/null +++ b/files/ja/web/css/@document/index.md @@ -0,0 +1,87 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - '@-規則' + - '@document' + - CSS + - Reference +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

@document は CSS の @-規則で、文書の URL に基づいて、その中に含まれるスタイル規則を制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義スタイルシートにも使うことができます。

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

構文

+ +

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

+ + + +

url(), url-prefix(), domain(), media-document() 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 regexp() 関数に与える値は、引用符で囲む必要があります。

+ +

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

+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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-* 属性、属性セレクターを組み合わせて使用しています。

+ +

仕様書

+ +

当初は {{SpecName('CSS3 Conditional')}} にありましたが、 @document は Level 4 に 延期されました。

+ +

ブラウザーの対応

+ +

{{Compat("css.at-rules.document")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf