From 9c5a02802788114921511c33c99f3a8f0d1e65cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 15 Dec 2021 01:36:22 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@document/index.md | 72 ++++++++++++------------- files/ja/web/css/css_conditional_rules/index.md | 70 ++++++++---------------- 2 files changed, 56 insertions(+), 86 deletions(-) (limited to 'files/ja/web') 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 --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{Deprecated_header}} -

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

+**`@document`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、文書の URL に基づいて、その中に含まれるスタイルルールを制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義のスタイルシートにも使うことができます。 -
@document url("https://www.example.com/") {
+```css
+@document url("https://www.example.com/") {
   h1 {
     color: green;
   }
 }
-
+``` -

構文

+## 構文 -

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

+`@document` ルールには 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、ルールがその URL に効果を及ぼします。利用可能な関数は次の通りです。 - +- `url()`: 正確な URL に一致します。 +- `url-prefix()`: 文書の URL が指定された値で始まる場合に一致します。 +- `domain()`: 文書の URL が指定されたドメイン (またはそのサブドメイン) にある場合に一致します。 +- `media-document()`: 動画、画像、プラグイン、またはそのすべての引数 +- `regexp()`: 文書の URL が、指定された[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。 -

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

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

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

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

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

-
+`@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)を組み合わせて使用するものです。 -

形式文法

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

例

+## 例 -

CSS

+### 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;
   }
 }
-
- -

未対応のブラウザーでの回避策

- -

@document は今のところ Firefox しか対応していません。もし、Firefox 以外のブラウザーでこのような機能を使用して複製したい場合は、 @An-Error94 によるこのポリフィルを使用してみてください。これは、ユーザースクリプト、 data-* 属性、属性セレクターを組み合わせて使用しています。

+``` -

仕様書

+## 仕様書 -

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

+[当初](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)。 -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- www-style メーリングリストの [Per-site user style sheet rules](https://lists.w3.org/Archives/Public/www-style/2004Aug/0135) diff --git a/files/ja/web/css/css_conditional_rules/index.md b/files/ja/web/css/css_conditional_rules/index.md index c4460e7bfd..5f2e199bb7 100644 --- a/files/ja/web/css/css_conditional_rules/index.md +++ b/files/ja/web/css/css_conditional_rules/index.md @@ -4,68 +4,44 @@ slug: Web/CSS/CSS_Conditional_Rules tags: - CSS - CSS 条件付き規則 - - Reference + - ガイド - 概要 + - リファレンス translation_of: Web/CSS/CSS_Conditional_Rules --- -
{{CSSRef}}
+{{CSSRef}} -

CSS 条件付き規則 (CSS Conditional Rules) は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件に基づいて一連の規則を定義することができます。

+**CSS 条件付き規則** (CSS Conditional Rules) は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件などに基づいて一連の規則を定義することができます。 -

リファレンス

+## リファレンス -

@-規則

+### アットルール -
- -
+- {{cssxref("@document")}} +- {{cssxref("@media")}} +- {{cssxref("@supports")}} +- {{cssxref("@import")}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}初回定義
+| 仕様書 | 状態 | 備考 | +| -------------------------------- | ----------------------------- | -------- | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | 初回定義 | -

ブラウザーの対応

+## ブラウザーの互換性 -

@document 規則

+### `@document` ルール -
-

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

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

@import 規則

+### `@import` ルール -
-

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

-
+{{Compat("css.at-rules.import")}} -

@media 規則

+### `@media` ルール -
-

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

-
+{{Compat("css.at-rules.media")}} -

@supports 規則

+### `@supports` ルール -
-

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

-
+{{Compat("css.at-rules.supports")}} -- cgit v1.2.3-54-g00ecf