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 ++++++++ files/ja/web/css/@import/index.html | 98 --------- files/ja/web/css/@import/index.md | 98 +++++++++ files/ja/web/css/@media/index.html | 236 ---------------------- files/ja/web/css/@media/index.md | 236 ++++++++++++++++++++++ files/ja/web/css/@supports/index.html | 199 ------------------ files/ja/web/css/@supports/index.md | 199 ++++++++++++++++++ files/ja/web/css/css_conditional_rules/index.html | 71 ------- files/ja/web/css/css_conditional_rules/index.md | 71 +++++++ 10 files changed, 691 insertions(+), 691 deletions(-) delete mode 100644 files/ja/web/css/@document/index.html create mode 100644 files/ja/web/css/@document/index.md delete mode 100644 files/ja/web/css/@import/index.html create mode 100644 files/ja/web/css/@import/index.md delete mode 100644 files/ja/web/css/@media/index.html create mode 100644 files/ja/web/css/@media/index.md delete mode 100644 files/ja/web/css/@supports/index.html create mode 100644 files/ja/web/css/@supports/index.md delete mode 100644 files/ja/web/css/css_conditional_rules/index.html create mode 100644 files/ja/web/css/css_conditional_rules/index.md (limited to 'files/ja/web') 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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html deleted file mode 100644 index 85eb9de41f..0000000000 --- a/files/ja/web/css/@import/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -tags: - - '@-規則' - - CSS - - CSS カスケードと継承 - - CSS 条件付き規則 - - メディアクエリ - - リファレンス -translation_of: Web/CSS/@import ---- -
{{CSSRef}}
- -

CSS の @import @-規則 は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは入れ子になるステートメントではないので、 @import は条件付き @-規則グループの中で使うことはできません。

- -
@import url("fineprint.css") print;
-@import url("bluish.css") speech;
-@import 'custom.css';
-@import url("chrome://communicator/skin/");
-@import "common.css" screen;
-@import url('landscape.css') screen and (orientation:landscape);
- -

{{glossary("user agent", "ユーザーエージェント")}}は未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import 規則を指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリで指定します。メディアクエリがないと、インポートは無条件で行われます。メディアに all を指定しても同じ効果になります。

- -

構文

- -
@import url;
-@import url list-of-media-queries;
-@import url supports( supports-query );
-@import url supports( supports-query ) list-of-media-queries;
-
- -

内容は次の通りです。

- -
-
url
-
インポートするリソースの位置を表す {{CSSxRef("<string>")}} または {{CSSxRef("<url>")}} です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 chrome://communicator/skin/)。詳しくはこちらをご覧ください。
-
list-of-media-queries
-
リンクした URL で定義された CSS 規則の適用の条件を示す、メディアクエリのカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。
-
supports-query
-
{{CSSxRef("@supports", "<supports-condition>", "#Syntax")}} または {{CSSxRef("Syntax", "<declaration>", "#CSS_declarations")}} のどちらかです。
-
- -

形式文法

- -{{CSSSyntax}} - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Cascade", "#at-import", 'the @import rule')}}{{Spec2("CSS4 Cascade")}}{{CSSxRef("@supports")}} 構文に対応するよう構文を拡張
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}}
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}単純な メディア種別 だけでなく、いかなるメディアクエリもサポートするよう構文拡張
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}スタイルシートの URL の記述する {{CSSxRef("<string>")}} のサポートを追加し、
- @import ルールを CSS 文書の最初に入れることを条件化
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/@import/index.md b/files/ja/web/css/@import/index.md new file mode 100644 index 0000000000..85eb9de41f --- /dev/null +++ b/files/ja/web/css/@import/index.md @@ -0,0 +1,98 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@-規則' + - CSS + - CSS カスケードと継承 + - CSS 条件付き規則 + - メディアクエリ + - リファレンス +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

CSS の @import @-規則 は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは入れ子になるステートメントではないので、 @import は条件付き @-規則グループの中で使うことはできません。

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+ +

{{glossary("user agent", "ユーザーエージェント")}}は未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import 規則を指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリで指定します。メディアクエリがないと、インポートは無条件で行われます。メディアに all を指定しても同じ効果になります。

+ +

構文

+ +
@import url;
+@import url list-of-media-queries;
+@import url supports( supports-query );
+@import url supports( supports-query ) list-of-media-queries;
+
+ +

内容は次の通りです。

+ +
+
url
+
インポートするリソースの位置を表す {{CSSxRef("<string>")}} または {{CSSxRef("<url>")}} です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 chrome://communicator/skin/)。詳しくはこちらをご覧ください。
+
list-of-media-queries
+
リンクした URL で定義された CSS 規則の適用の条件を示す、メディアクエリのカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。
+
supports-query
+
{{CSSxRef("@supports", "<supports-condition>", "#Syntax")}} または {{CSSxRef("Syntax", "<declaration>", "#CSS_declarations")}} のどちらかです。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Cascade", "#at-import", 'the @import rule')}}{{Spec2("CSS4 Cascade")}}{{CSSxRef("@supports")}} 構文に対応するよう構文を拡張
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}}
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}単純な メディア種別 だけでなく、いかなるメディアクエリもサポートするよう構文拡張
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}スタイルシートの URL の記述する {{CSSxRef("<string>")}} のサポートを追加し、
+ @import ルールを CSS 文書の最初に入れることを条件化
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html deleted file mode 100644 index 3cff0a4e22..0000000000 --- a/files/ja/web/css/@media/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: '@media' -slug: Web/CSS/@media -tags: - - '@media' - - アット規則 - - CSS - - 条件付き - - リファレンス -browser-compat: css.at-rules.media -translation_of: Web/CSS/@media ---- -{{CSSRef}} - -**`@media`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、1 つまたは複数の[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。 - -> **Note:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。 - -## 構文 - -`@media` アットルールは、コードの最上位に配置したり、他の[条件付きグループアットルール](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中に入れ子にして配置したりすることができます。 - -```css -/* コードの最上位 */ -@media screen and (min-width: 900px) { - article { - padding: 1rem 3rem; - } -} - -/* 他の条件付きアットルールの中にネスト */ -@supports (display: flex) { - @media screen and (min-width: 900px) { - article { - display: flex; - } - } -} -``` - -メディアクエリーの構文について詳しくは、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#構文)を参照してください。 - -## 解説 - -### メディア種別 - -*メディア種別*は機器の全般的な分類を記述します。 -`not` または `only` 論理演算子を使用する場合を除き、メディア種別は省略可能であり、暗黙で `all` と見なされます。 - -- `all` - - : すべての機器に適合します。 -- `print` - - : ページのある資料や、画面に印刷プレビューモードで表示されている文書向けのものです。（これらの形式に特有の整形上の問題については、[ページ付きメディア](/ja/docs/Web/CSS/Paged_Media)を参照してください。） -- `screen` - - : 主に画面向けのものです。 -- `speech` - - : 音声合成向けのものです。 - -> **Note:** CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。 -> `aural` タイプは `speech` に置き換えられましたが、これも同様です。 - -### メディア特性 - -*メディア特性*は、{{glossary("user agent", "ユーザーエージェント")}}、出力装置、環境の特定の特徴を記述します。 -メディア特性式は、その存在や値を調べるもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。 - -- {{cssxref("@media/any-hover", "any-hover")}} - - : 入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/any-pointer", "any-pointer")}} - - : 入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/aspect-ratio", "aspect-ratio")}} - - : ビューポートの幅対高さのアスペクト比。 -- {{cssxref("@media/color", "color")}} - - : 出力機器の色コンポーネントあたりの色のビット数、または端末がカラーでなければゼロ。 -- {{cssxref("@media/color-gamut", "color-gamut")}} - - : ユーザーエージェントおよび出力機器が対応しているおよその色の範囲。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/color-index", "color-index")}} - - : 出力機器の色参照表の項目数、または端末がそのような表を使用していないのであればゼロ。 -- {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}} - - : 出力機器の幅対高さのアスペクト比。 - Media Queries Level 4 で非推奨。 -- {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} - - : 出力機器のレンダリング面の高さ。 - Media Queries Level 4 で非推奨。 -- {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} - - : 出力機器のレンダリング面の幅。 Media Queries Level 4 で非推奨。 -- {{cssxref("@media/display-mode", "display-mode")}} - - : ウェブアプリのマニフェストの [`display`](/ja/docs/Web/Manifest#display) メンバーで指定されているアプリケーションの表示モード。 - [Web App Manifest 仕様書](https://w3c.github.io/manifest/#the-display-mode-media-feature)で定義。 -- {{cssxref("@media/forced-colors", "forced-colors")}} - - : ユーザーエージェントがカラーパレットを制限しているかどうかを検出。 - Media Queries Level 5 で追加。 -- {{cssxref("@media/grid", "grid")}} - - : 出力機器はグリッドとビットマップ画面のどちらを使用するか。 -- {{cssxref("@media/height", "height")}} - - : ビューポートの高さ。 -- {{cssxref("@media/hover", "hover")}} - - : 主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/inverted-colors", "inverted-colors")}} - - : ユーザーエージェントまたはその下の OS が色を反転しているか。 - Media Queries Level 5 で追加。 -- {{cssxref("@media/monochrome", "monochrome")}} - - : 出力機器のモノクロフレームバッファーにおけるピクセルあたりのビット数、または端末がモノクロでなければゼロ。 -- {{cssxref("@media/orientation", "orientation")}} - - : ビューポートの向き。 -- {{cssxref("@media/overflow-block", "overflow-block")}} - - : ビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/overflow-inline", "overflow-inline")}} - - : ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/pointer", "pointer")}} - - : 主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} - - : ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出。 - Media Queries Level 5 で追加。 -- {{cssxref("@media/prefers-contrast", "prefers-contrast")}} - - : ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出。 - Media Queries Level 5 で追加。 -- {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} - - : ユーザーがページであまり動きを望まないかどうか。 - Media Queries Level 5 で追加。 -- {{cssxref("@media/resolution", "resolution")}} - - : 出力機器のピクセル密度。 -- {{cssxref("@media/scripting", "scripting")}} - - : 出力機器のスキャン処理方式。 - Media Queries Level 5. で追加。 -- {{cssxref("@media/update-frequency", "update")}} - - : どれだけの頻度で出力機器がコンテンツの表示を変更できるか。 - Media Queries Level 4 で追加。 -- {{cssxref("@media/width", "width")}} - - : スクロールバーの幅を含むビューポートの幅。 - - -### 論理演算子 - -*論理演算子* `not`, `and`, `only` を使うと、複雑なメディアクエリーを構成することができます。 -また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。 - -- `and` - - : 複数のメディア特性を 1 つのメディアクエリーに結合する際に使用されます。クエリーが `true` になるためには、結合させた各機能が `true` を返すことが必要です。 - また、メディア特性とメディア種別を結合する際にも使用されます。 -- `not` - - : メディアクエリーを反転するために使用され、クエリーが `false` を返す場合に `true` を返します。 - カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。 - `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 - - > **Note:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。 -- `only` - - : クエリー全体が一致する場合にのみスタイルを適用します。 - これは、古いブラウザーが選択したスタイルを適用できないようにするのに便利です。 - `only` を使用しない場合、古いブラウザーは `screen and (max-width: 500px)` というクエリーを `screen` と解釈し、クエリーの残りの部分を無視して、すべての画面にそのスタイルを適用してしまいます。 - `only` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 -- `,` (カンマ) - - : カンマは、複数のメディアクエリーを 1 つのルールにまとめるために使用されます。 - カンマで区切られたリストの各クエリーは、他のクエリーとは別に扱われます。 - したがって、リスト内のクエリーのいずれかが `true` であれば、メディア文全体が `true` を返すことになります。 - 言い換えれば、リストは論理的な `or` 演算子のように動作します． - - -## アクセシビリティの考慮 - -サイトの文字の大きさを調整している人に合わせられるようには、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)で {{cssxref("<length>")}} が必要な時には [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) を使用してください。 - -[`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) および [`px`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はどちらも有効な単位ですが、 [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。 - -また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリーを使用することを検討してください。例えば、 `prefers-reduced-motion` は[ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します](/ja/docs/Web/CSS/@media/prefers-reduced-motion)。 - -## セキュリティ - -メディアクエリーはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。 - -この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリーは実際の端末の状態を表す値ではなく既定値を報告します。 - -## 形式文法 - -{{csssyntax}} - -## 例 - -### print および screen メディア種別の検査 - -```css -@media print { - body { font-size: 10pt; } -} - -@media screen { - body { font-size: 13px; } -} - -@media screen, print { - body { line-height: 1.2; } -} - -@media only screen - and (min-width: 320px) - and (max-width: 480px) - and (resolution: 150dpi) { - body { line-height: 1.4; } -} -``` - -Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリーを記述できる新しい範囲の構文が導入されました。 - -```css -@media (height > 600px) { - body { line-height: 1.4; } -} - -@media (400px <= width <= 700px) { - body { line-height: 1.4; } -} -``` - -他の例については、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)をご覧ください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) -- JavaScript では `@media` は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。 -- [Mozilla 拡張メディア特性](/ja/docs/Web/CSS/Mozilla_Extensions#media_features) -- [WebKit 拡張メディア特性](/ja/docs/Web/CSS/WebKit_Extensions#media_features) diff --git a/files/ja/web/css/@media/index.md b/files/ja/web/css/@media/index.md new file mode 100644 index 0000000000..3cff0a4e22 --- /dev/null +++ b/files/ja/web/css/@media/index.md @@ -0,0 +1,236 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - アット規則 + - CSS + - 条件付き + - リファレンス +browser-compat: css.at-rules.media +translation_of: Web/CSS/@media +--- +{{CSSRef}} + +**`@media`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、1 つまたは複数の[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。 + +> **Note:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。 + +## 構文 + +`@media` アットルールは、コードの最上位に配置したり、他の[条件付きグループアットルール](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中に入れ子にして配置したりすることができます。 + +```css +/* コードの最上位 */ +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} + +/* 他の条件付きアットルールの中にネスト */ +@supports (display: flex) { + @media screen and (min-width: 900px) { + article { + display: flex; + } + } +} +``` + +メディアクエリーの構文について詳しくは、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#構文)を参照してください。 + +## 解説 + +### メディア種別 + +*メディア種別*は機器の全般的な分類を記述します。 +`not` または `only` 論理演算子を使用する場合を除き、メディア種別は省略可能であり、暗黙で `all` と見なされます。 + +- `all` + - : すべての機器に適合します。 +- `print` + - : ページのある資料や、画面に印刷プレビューモードで表示されている文書向けのものです。（これらの形式に特有の整形上の問題については、[ページ付きメディア](/ja/docs/Web/CSS/Paged_Media)を参照してください。） +- `screen` + - : 主に画面向けのものです。 +- `speech` + - : 音声合成向けのものです。 + +> **Note:** CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。 +> `aural` タイプは `speech` に置き換えられましたが、これも同様です。 + +### メディア特性 + +*メディア特性*は、{{glossary("user agent", "ユーザーエージェント")}}、出力装置、環境の特定の特徴を記述します。 +メディア特性式は、その存在や値を調べるもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。 + +- {{cssxref("@media/any-hover", "any-hover")}} + - : 入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/any-pointer", "any-pointer")}} + - : 入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/aspect-ratio", "aspect-ratio")}} + - : ビューポートの幅対高さのアスペクト比。 +- {{cssxref("@media/color", "color")}} + - : 出力機器の色コンポーネントあたりの色のビット数、または端末がカラーでなければゼロ。 +- {{cssxref("@media/color-gamut", "color-gamut")}} + - : ユーザーエージェントおよび出力機器が対応しているおよその色の範囲。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/color-index", "color-index")}} + - : 出力機器の色参照表の項目数、または端末がそのような表を使用していないのであればゼロ。 +- {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}} + - : 出力機器の幅対高さのアスペクト比。 + Media Queries Level 4 で非推奨。 +- {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} + - : 出力機器のレンダリング面の高さ。 + Media Queries Level 4 で非推奨。 +- {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} + - : 出力機器のレンダリング面の幅。 Media Queries Level 4 で非推奨。 +- {{cssxref("@media/display-mode", "display-mode")}} + - : ウェブアプリのマニフェストの [`display`](/ja/docs/Web/Manifest#display) メンバーで指定されているアプリケーションの表示モード。 + [Web App Manifest 仕様書](https://w3c.github.io/manifest/#the-display-mode-media-feature)で定義。 +- {{cssxref("@media/forced-colors", "forced-colors")}} + - : ユーザーエージェントがカラーパレットを制限しているかどうかを検出。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/grid", "grid")}} + - : 出力機器はグリッドとビットマップ画面のどちらを使用するか。 +- {{cssxref("@media/height", "height")}} + - : ビューポートの高さ。 +- {{cssxref("@media/hover", "hover")}} + - : 主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/inverted-colors", "inverted-colors")}} + - : ユーザーエージェントまたはその下の OS が色を反転しているか。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/monochrome", "monochrome")}} + - : 出力機器のモノクロフレームバッファーにおけるピクセルあたりのビット数、または端末がモノクロでなければゼロ。 +- {{cssxref("@media/orientation", "orientation")}} + - : ビューポートの向き。 +- {{cssxref("@media/overflow-block", "overflow-block")}} + - : ビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/overflow-inline", "overflow-inline")}} + - : ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/pointer", "pointer")}} + - : 主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} + - : ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/prefers-contrast", "prefers-contrast")}} + - : ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} + - : ユーザーがページであまり動きを望まないかどうか。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/resolution", "resolution")}} + - : 出力機器のピクセル密度。 +- {{cssxref("@media/scripting", "scripting")}} + - : 出力機器のスキャン処理方式。 + Media Queries Level 5. で追加。 +- {{cssxref("@media/update-frequency", "update")}} + - : どれだけの頻度で出力機器がコンテンツの表示を変更できるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/width", "width")}} + - : スクロールバーの幅を含むビューポートの幅。 + + +### 論理演算子 + +*論理演算子* `not`, `and`, `only` を使うと、複雑なメディアクエリーを構成することができます。 +また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。 + +- `and` + - : 複数のメディア特性を 1 つのメディアクエリーに結合する際に使用されます。クエリーが `true` になるためには、結合させた各機能が `true` を返すことが必要です。 + また、メディア特性とメディア種別を結合する際にも使用されます。 +- `not` + - : メディアクエリーを反転するために使用され、クエリーが `false` を返す場合に `true` を返します。 + カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。 + `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 + + > **Note:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。 +- `only` + - : クエリー全体が一致する場合にのみスタイルを適用します。 + これは、古いブラウザーが選択したスタイルを適用できないようにするのに便利です。 + `only` を使用しない場合、古いブラウザーは `screen and (max-width: 500px)` というクエリーを `screen` と解釈し、クエリーの残りの部分を無視して、すべての画面にそのスタイルを適用してしまいます。 + `only` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 +- `,` (カンマ) + - : カンマは、複数のメディアクエリーを 1 つのルールにまとめるために使用されます。 + カンマで区切られたリストの各クエリーは、他のクエリーとは別に扱われます。 + したがって、リスト内のクエリーのいずれかが `true` であれば、メディア文全体が `true` を返すことになります。 + 言い換えれば、リストは論理的な `or` 演算子のように動作します． + + +## アクセシビリティの考慮 + +サイトの文字の大きさを調整している人に合わせられるようには、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)で {{cssxref("<length>")}} が必要な時には [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) を使用してください。 + +[`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) および [`px`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はどちらも有効な単位ですが、 [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。 + +また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリーを使用することを検討してください。例えば、 `prefers-reduced-motion` は[ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します](/ja/docs/Web/CSS/@media/prefers-reduced-motion)。 + +## セキュリティ + +メディアクエリーはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。 + +この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリーは実際の端末の状態を表す値ではなく既定値を報告します。 + +## 形式文法 + +{{csssyntax}} + +## 例 + +### print および screen メディア種別の検査 + +```css +@media print { + body { font-size: 10pt; } +} + +@media screen { + body { font-size: 13px; } +} + +@media screen, print { + body { line-height: 1.2; } +} + +@media only screen + and (min-width: 320px) + and (max-width: 480px) + and (resolution: 150dpi) { + body { line-height: 1.4; } +} +``` + +Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリーを記述できる新しい範囲の構文が導入されました。 + +```css +@media (height > 600px) { + body { line-height: 1.4; } +} + +@media (400px <= width <= 700px) { + body { line-height: 1.4; } +} +``` + +他の例については、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- JavaScript では `@media` は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。 +- [Mozilla 拡張メディア特性](/ja/docs/Web/CSS/Mozilla_Extensions#media_features) +- [WebKit 拡張メディア特性](/ja/docs/Web/CSS/WebKit_Extensions#media_features) diff --git a/files/ja/web/css/@supports/index.html b/files/ja/web/css/@supports/index.html deleted file mode 100644 index f664508ed1..0000000000 --- a/files/ja/web/css/@supports/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: '@supports' -slug: Web/CSS/@supports -tags: - - At-rule - - CSS - - Layout - - Reference - - Web - - supports -translation_of: Web/CSS/@supports ---- -
{{CSSRef}}
- -

@supports は CSS の アット規則で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは機能クエリと呼ばれます。規則はコードの最上位または他の条件付きグループアット規則の中に配置することができます。

- -
@supports (display: grid) {
-  div {
-    display: grid;
-  }
-}
- -
@supports not (display: grid) {
-  div {
-    float: right;
-  }
-}
- -

JavaScript では @supports は CSS オブジェクトモデルインターフェイスの {{DOMxRef("CSSSupportsRule")}} からアクセスできます。

- -

構文

- -

@supports アット規則は、ステートメントのブロックを対応条件に関連付けます。対応条件は1つまたは複数の名前と値の組を結合条件 (and)、非結合条件(or)、否定 (not) で組み合わせたものです。演算子の結合順位は、括弧を使用して変更できます。

- -

宣言の構文

- -

もっとも基本的な対応条件は、単純な宣言 (プロパティ名に続けて、コロンで区切って値) です。宣言は括弧で囲む必要があります。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として 5% 5% を有効とみなすのであれば true を返します。

- -
@supports (transform-origin: 5% 5%) {}
- -

関数構文

- -

第二の基本的な対応状況は関数の対応であり、これらの構文はすべてのブラウザーで対応されていますが、関数自体はまだ標準化の過程にあります。

- -

selector() {{Experimental_Inline}}

- -

ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。以下の例は、ブラウザーが子結合子に対応していれば true を返します。

- -
@supports selector(A > B) {}
- -

not 演算子

- -

not 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として 10em 10em 10em を有効とみなさないのであれば true を返します。

- -
@supports not (transform-origin: 10em 10em 10em) {}
- -

他の演算子と同様に、 not 演算子はどれだけ複雑な宣言にも適用できます。以下の例はすべて有効な式です。

- -
@supports not (not (transform-origin: 2px)) {}
-@supports (display: grid) and (not (display: inline-grid)) {}
- -
-

注: not 演算子が最上位にある場合は、括弧でくくる必要はありません。 and や or といった他の演算子と組み合わせるときは、括弧が必須です。

-
- -

and 演算子

- -

and 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。

- -
@supports (display: table-cell) and (display: list-item) {}
- -

括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。

- -
@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
-@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}
- -

or 演算子

- -

or 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。

- -
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
- -

括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。

- -
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
-          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
-
-@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
-          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
-
- -
-

注: and 演算子と or 演算子を両方とも使用するときは、これらを適用する順序を定義するために括弧を使用しなければなりません。そうしなければ、アット規則全体を無視させる無効な条件になります。

-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

指定した CSS プロパティの対応状況を確認する

- -
@supports (animation-name: test) {
-  … /* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS */
-  @keyframes { /* 他のアット規則を含むことができる */
-    …
-  }
-}
-
- -

指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認する

- -
@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
-         (-ms-perspective: 10px) or (-o-perspective: 10px)) {
-  … /* 接頭辞つきを含めて 3D transforms を対応する場合に適用する CSS */
-}
-
- -

指定した CSS プロパティに対応していないことを確認する

- -
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
-  … /* text-align-last:justify をシミュレートするために適用する CSS */
-}
- -

カスタムプロパティの対応状況を確認する

- -
@supports (--foo: green) {
-  body {
-    color: var(--varName);
-  }
-}
- -

セレクターの対応の検査 (例: {{CSSxRef(":is", ":is()")}})

- -

{{SeeCompatTable}}

- -
/* この規則は :is() に対応していないブラウザーでは適用されません */
-:is(ul, ol) > li {
-  … /* :is(…) セレクターに対応している場合に CSS が適用される */
-}
-
-@supports not selector(:is(a, b)) {
-  /* :is() に対応していない場合の代替 */
-  ul > li,
-  ol > li {
-    … /* 上記のものは :is(…) に対応していないブラウザーのために展開しています */
-  }
-}
-
-/* Note: By far, there's no browser that supports the `of` argument of :nth-child(…) */
-@supports selector(:nth-child(1n of a, b)) {
-  /* This rule needs to be inside the @supports block, otherwise
-     it will be partially applied in browsers which don't support
-     the `of` argument of :nth-child(…) is supported */
-  :is(
-      :nth-child(1n of ul, ol) a,
-      details > summary
-  ) {
-    … /* CSS applied when the :is(…) selector and
-         the `of` argument of :nth-child(…) are both supported */
-  }
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Conditional", "#at-supports-ext", "@supports")}}{{Spec2("CSS4 Conditional")}}selector() 関数を追加
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/@supports/index.md b/files/ja/web/css/@supports/index.md new file mode 100644 index 0000000000..f664508ed1 --- /dev/null +++ b/files/ja/web/css/@supports/index.md @@ -0,0 +1,199 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +tags: + - At-rule + - CSS + - Layout + - Reference + - Web + - supports +translation_of: Web/CSS/@supports +--- +
{{CSSRef}}
+ +

@supports は CSS の アット規則で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは機能クエリと呼ばれます。規則はコードの最上位または他の条件付きグループアット規則の中に配置することができます。

+ +
@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+ +
@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}
+ +

JavaScript では @supports は CSS オブジェクトモデルインターフェイスの {{DOMxRef("CSSSupportsRule")}} からアクセスできます。

+ +

構文

+ +

@supports アット規則は、ステートメントのブロックを対応条件に関連付けます。対応条件は1つまたは複数の名前と値の組を結合条件 (and)、非結合条件(or)、否定 (not) で組み合わせたものです。演算子の結合順位は、括弧を使用して変更できます。

+ +

宣言の構文

+ +

もっとも基本的な対応条件は、単純な宣言 (プロパティ名に続けて、コロンで区切って値) です。宣言は括弧で囲む必要があります。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として 5% 5% を有効とみなすのであれば true を返します。

+ +
@supports (transform-origin: 5% 5%) {}
+ +

関数構文

+ +

第二の基本的な対応状況は関数の対応であり、これらの構文はすべてのブラウザーで対応されていますが、関数自体はまだ標準化の過程にあります。

+ +

selector() {{Experimental_Inline}}

+ +

ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。以下の例は、ブラウザーが子結合子に対応していれば true を返します。

+ +
@supports selector(A > B) {}
+ +

not 演算子

+ +

not 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として 10em 10em 10em を有効とみなさないのであれば true を返します。

+ +
@supports not (transform-origin: 10em 10em 10em) {}
+ +

他の演算子と同様に、 not 演算子はどれだけ複雑な宣言にも適用できます。以下の例はすべて有効な式です。

+ +
@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+ +
+

注: not 演算子が最上位にある場合は、括弧でくくる必要はありません。 and や or といった他の演算子と組み合わせるときは、括弧が必須です。

+
+ +

and 演算子

+ +

and 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。

+ +
@supports (display: table-cell) and (display: list-item) {}
+ +

括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。

+ +
@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}
+ +

or 演算子

+ +

or 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+ +

括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+
+ +
+

注: and 演算子と or 演算子を両方とも使用するときは、これらを適用する順序を定義するために括弧を使用しなければなりません。そうしなければ、アット規則全体を無視させる無効な条件になります。

+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

指定した CSS プロパティの対応状況を確認する

+ +
@supports (animation-name: test) {
+  … /* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS */
+  @keyframes { /* 他のアット規則を含むことができる */
+    …
+  }
+}
+
+ +

指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認する

+ +
@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+         (-ms-perspective: 10px) or (-o-perspective: 10px)) {
+  … /* 接頭辞つきを含めて 3D transforms を対応する場合に適用する CSS */
+}
+
+ +

指定した CSS プロパティに対応していないことを確認する

+ +
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
+  … /* text-align-last:justify をシミュレートするために適用する CSS */
+}
+ +

カスタムプロパティの対応状況を確認する

+ +
@supports (--foo: green) {
+  body {
+    color: var(--varName);
+  }
+}
+ +

セレクターの対応の検査 (例: {{CSSxRef(":is", ":is()")}})

+ +

{{SeeCompatTable}}

+ +
/* この規則は :is() に対応していないブラウザーでは適用されません */
+:is(ul, ol) > li {
+  … /* :is(…) セレクターに対応している場合に CSS が適用される */
+}
+
+@supports not selector(:is(a, b)) {
+  /* :is() に対応していない場合の代替 */
+  ul > li,
+  ol > li {
+    … /* 上記のものは :is(…) に対応していないブラウザーのために展開しています */
+  }
+}
+
+/* Note: By far, there's no browser that supports the `of` argument of :nth-child(…) */
+@supports selector(:nth-child(1n of a, b)) {
+  /* This rule needs to be inside the @supports block, otherwise
+     it will be partially applied in browsers which don't support
+     the `of` argument of :nth-child(…) is supported */
+  :is(
+      :nth-child(1n of ul, ol) a,
+      details > summary
+  ) {
+    … /* CSS applied when the :is(…) selector and
+         the `of` argument of :nth-child(…) are both supported */
+  }
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Conditional", "#at-supports-ext", "@supports")}}{{Spec2("CSS4 Conditional")}}selector() 関数を追加
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_conditional_rules/index.html b/files/ja/web/css/css_conditional_rules/index.html deleted file mode 100644 index c4460e7bfd..0000000000 --- a/files/ja/web/css/css_conditional_rules/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: CSS 条件付き規則 -slug: Web/CSS/CSS_Conditional_Rules -tags: - - CSS - - CSS 条件付き規則 - - Reference - - 概要 -translation_of: Web/CSS/CSS_Conditional_Rules ---- -
{{CSSRef}}
- -

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

- -

リファレンス

- -

@-規則

- -
- -
- -

仕様書

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

ブラウザーの対応

- -

@document 規則

- -
-

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

-
- -

@import 規則

- -
-

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

-
- -

@media 規則

- -
-

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

-
- -

@supports 規則

- -
-

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

-
diff --git a/files/ja/web/css/css_conditional_rules/index.md b/files/ja/web/css/css_conditional_rules/index.md new file mode 100644 index 0000000000..c4460e7bfd --- /dev/null +++ b/files/ja/web/css/css_conditional_rules/index.md @@ -0,0 +1,71 @@ +--- +title: CSS 条件付き規則 +slug: Web/CSS/CSS_Conditional_Rules +tags: + - CSS + - CSS 条件付き規則 + - Reference + - 概要 +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

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

+ +

リファレンス

+ +

@-規則

+ +
+ +
+ +

仕様書

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

ブラウザーの対応

+ +

@document 規則

+ +
+

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

+
+ +

@import 規則

+ +
+

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

+
+ +

@media 規則

+ +
+

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

+
+ +

@supports 規則

+ +
+

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

+
-- cgit v1.2.3-54-g00ecf