Jan. 16th,2019
メディア・フィーチャー
＃
“メディア・フィーチャー”とは？
“メディア・フィーチャー(Media Features)”はメディア・タイプよりもきめの細かい条件で文書を出力しているユーザー・エージェントやデバイスの特性を検査して“真”か“偽”かを決定します。なお、1個以上のメディア・フィーチャーを組み合わせたものは“メディア・コンディション(Media condition)”と呼ばれます。
メディア・フィーチャーの基本の構文では以下の順に記述します。
- 左括弧(“(”)
- “フィーチャー名(Feature name)”
- コロン(“:”)
- “フィーチャー値(Feature value)”
- 右括弧(“)”)
CSSのプロパティの記述方法によく似ていますが、メディア・フィーチャーは常に括弧(“(”と“)”)で囲んで記述されます。
@media (〚フィーチャー名〛:〚フィーチャー値〛) {
...
}
メディア・フィーチャーはフィーチャー名だけを記述した“論理コンテキスト(Boolean context)”としても記述できます。
また、一部のメディア・フィーチャーは“min-”接頭辞と“max-”接頭辞、もしくは“範囲コンテキスト(Range context)”として記述することで範囲を表すことができます。
CSSのプロパティには複数の値や計算を含む複雑な値を指定できる場合もありますが、メディア・フィーチャーの値には1個のキーワードや1個の数字などの単一の値だけを記述できます。
メディア・フィーチャーがユーザー・エージェントやデバイスに存在しない特性を検査しようとする場合、結果は“偽”となります。
また、未定義のフィーチャー名やフィーチャー値、不正な文法のメディア・フィーチャーが含まれるメディア・クエリは“not all”として扱われます。
メディア・フィーチャーは演算子を使用してメディア・コンディションとすることで組み合わせたり、否定したりしてより詳細にメディアやデバイスの特性を検査することができます。
＃
仕様書
定義されている仕様書
＃
論理コンテキスト
メディア・フィーチャーはコロンと値を省略してフィーチャー名だけを記述した“論理コンテキスト(Boolean context)”として記述することができます。
論理コンテキストは“0”もしくは“none”のフィーチャー値と一致しない場合に“真”と判断されます。
@media (〚フィーチャー名〛) {
...
}
論理コンテキストを使用したメディア・クエリの例
@media screen and (color) {
/* カラー・デバイスのスクリーン・デバイスである場合に適用されるスタイル。 */
}
@media screen and (monochrome) {
/* モノクロ・デバイスのスクリーン・デバイスである場合に適用されるスタイル。 */
}
＃
範囲コンテキスト
範囲型のメディア・フィーチャーは比較演算子を使用した不等式である“範囲コンテキスト(Range context)”として記述することができます。
範囲コンテキストの基本の構文では以下の順に記述します。
- 左括弧(“(”)
- フィーチャー名
- 比較演算子
- フィーチャー値
- 右括弧(“)”)
フィーチャー名とフィーチャー値を入れ替えた以下の記述順も有効です。
- 左括弧(“(”)
- フィーチャー値
- 比較演算子
- フィーチャー名
- 右括弧(“)”)
比較演算子の関係が“真”である場合にメディア・フィーチャーは“真”となります。
@media (〚フィーチャー名〛 〚演算子〛 〚フィーチャー値〛) {
...
}
@media (〚フィーチャー値〛 〚演算子〛 〚フィーチャー名〛) {
...
}
また、2個の比較演算子を使用した区間を表す不等式としても記述することもできます。
- 左括弧(“(”)
- フィーチャー値
- 比較演算子
- フィーチャー名
- 比較演算子
- フィーチャー値
- 右括弧(“)”)
@media (〚フィーチャー値〛 〚演算子〛 〚フィーチャー名〛 〚演算子〛 〚フィーチャー値〛) {
...
}
この場合、2個の比較演算子の関係がどちらも“真”である場合にメディア・フィーチャーは“真”となります。
比較演算子は以下の5種類です。
| 演算子 | 説明 |
|---|---|
= |
左は右と等しい |
| < |
左は右より小さい |
| <= |
左は右より小さいか等しい |
| > |
左は右より大きい |
| >= |
左は右より大きいか等しい |
範囲コンテキストを使用したメディア・クエリの例
@media screen and (width <= 320px) {
/* 描画領域の横幅が320px以下のスクリーン・デバイスである場合に適用されるスタイル。 */
}
@media screen and (320px < width <= 640px) {
/* 描画領域の横幅が320pxより大きく、640px以下のスクリーン・デバイスである場合に適用されるスタイル。 */
}
@media screen and (640px < width) {
/* 描画領域の横幅が640pxより大きいスクリーン・デバイスである場合に適用されるスタイル。 */
}
＃
“min-”接頭辞と“max-”接頭辞
範囲型のメディア・フィーチャーはフィーチャー名に“min-”接頭辞と“max-”接頭辞をつけて通常の構文で範囲を表すこともできます。
“min-”接頭辞と“max-”接頭辞が表す範囲にはフィーチャー値も含まれます。
範囲で表されない離散型のメディア・フィーチャーには“min-”接頭辞と“max-”接頭辞を付けることはできず、“min-”接頭辞と“max-”接頭辞を付けた場合には接頭辞を無視するのではなくフィーチャー名全体が不明なフィーチャー名として扱われます。
“min-”接頭辞と“max-”接頭辞を使用したメディア・クエリの例
@media screen and (max-width: 320px) {
/* 描画領域の横幅が320px以下のスクリーン・デバイスである場合に適用されるスタイル。 */
}
@media screen and (min-width: 320px) and (max-width: 640px) {
/* 描画領域の横幅が320px以上、640px以下のスクリーン・デバイスである場合に適用されるスタイル。 */
}
@media screen and (min-width: 640px) {
/* 描画領域の横幅が640px以上のスクリーン・デバイスである場合に適用されるスタイル。 */
}
メディア・フィーチャーの一覧
＃
ビューポートとページ
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| (min-/max-) width |
出力デバイスの描画領域(ビューポート)の横幅 | <length> | 出力デバイスの描画領域(ビューポート)の横幅 |
| (min-/max-) height |
出力デバイスの描画領域(ビューポート)の高さ | <length> | 出力デバイスの描画領域(ビューポート)の高さ |
| (min-/max-) aspect-ratio |
出力デバイスの描画領域(ビューポート)のアスペクト比 | <ratio> | 出力デバイスの描画領域(ビューポート)のアスペクト比 |
| orientation | 出力デバイスの描画領域(ビューポート)の向き | portrait | 出力デバイスの描画領域(ビューポート)の高さが横幅よりも大きいか等しい |
| landscape | 出力デバイスの描画領域(ビューポート)の横幅が高さよりも大きい | ||
| overflow-block |
出力デバイスがブロック軸方向に溢れたコンテンツをどのように扱うか | none | ブロック軸方向に溢れたコンテンツは表示されない |
| scroll | ブロック軸方向に溢れたコンテンツはスクロールすることで表示される | ||
| optional-paged | ブロック軸方向に溢れたコンテンツはスクロールすることで表示されるが、ページ区切りを入れることで次のページに表示させることができる | ||
| paged | ブロック軸方向に溢れたコンテンツは不連続のページに分割され、溢れた分は次のページに表示される | ||
| overflow-inline |
出力デバイスがインライン軸方向に溢れたコンテンツをどのように扱うか | none | インライン軸方向に溢れたコンテンツは表示されない |
| scroll | インライン軸方向に溢れたコンテンツはスクロールすることで表示される | ||
| (min-/max-) horizontal-viewport-segments  |
ビューポートの水平方向の論理的な区分の数 | <integer> | ビューポートの水平方向の論理的な区分の数 |
| (min-/max-) vertical-viewport-segments |
ビューポートの垂直方向の論理的な区分の数 | <integer> | ビューポートの垂直方向の論理的な区分の数 |
| display-mode |
ウェブ・アプリケーションの表示モード | fullscreen | ウェブ・アプリケーションは利用可能な表示領域のすべてを使用し、ブラウザのユーザ・インターフェースは表示されない |
| standalone | ウェブ・アプリケーションをスタンドアロン・アプリケーションのように表示し、ステータス・バーのようなシステムのインターフェースのみ表示する | ||
| minimal-ui | ウェブ・アプリケーションをスタンドアロン・アプリケーションのように表示するが、ナビゲーションのための最小限のナビゲーションのためのユーザ・インターフェースも表示する | ||
| browser | ウェブ・アプリケーションをデバイスが通常のハイパーリンクを開くために使用する方法で表示する | ||
非推奨のメディア・フィーチャー
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| (min-/max-) device-width  |
出力デバイスの描画領域の横幅 | <length> | 出力デバイスの描画領域の横幅 |
| (min-/max-) device-height |
出力デバイスの描画領域の高さ | <length> | 出力デバイスの描画領域の高さ |
| (min-/max-) device-aspect-ratio |
出力デバイスの描画領域のアスペクト比 | <ratio> | 出力デバイスの描画領域のアスペクト比 |
＃
画質
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| (min-/max-) resolution |
出力デバイスの解像度 | <resolution> | 出力デバイスの解像度 |
| scan | 出力デバイスの走査方式 | interlace | 出力デバイスはインターレース方式 |
| progressive | 出力デバイスはプログレッシブ方式 | ||
| grid | 出力デバイスがグリッド・デバイスかどうか | 1 | 出力デバイスはグリッド・ベース |
| 0 | 出力デバイスはグリッド・ベースでない | ||
| update |
出力デバイスがどれだけの頻度でコンテンツの表示を更新できるか | none | 一度表示されるとコンテンツは更新されない |
| slow | コンテンツは更新できるが変更をすばやく表示することができない | ||
| fast | コンテンツは更新でき、速度の制約なく変更を表示できる | ||
| environment-blending |
出力デバイスが現実の景色に重ねて描画するかどうか | opaque | 不透明な媒体に表示される |
| additive | 色は現実の景色に加色混合されて表示される | ||
| subtractive | 色は現実の景色に減色混合されて表示される | ||
＃
色
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| (min-/max-) color |
出力デバイスの色成分ごとのビット数 | <integer> | 出力デバイスの色成分ごとのビット数 |
| 0 | 出力デバイスはカラーデバイスではない | ||
| (min-/max-) color-index |
出力デバイスのカラー・テーブルのエントリ数 | <integer> | 出力デバイスのカラー・テーブルのエントリ数 |
| 0 | 出力デバイスはカラー・テーブルを使用しない | ||
| (min-/max-) monochrome |
出力デバイスのモノクロ・フレームバッファのビット数 | <integer> | 出力デバイスのモノクロ・フレームバッファのビット数 |
| 0 | 出力デバイスはモノクロームデバイスではない | ||
| color-gamut |
出力デバイスが対応する色の範囲 | srgb | sRGBの色域、もしくはそれより広い範囲 |
| p3 | DCI-P3の色域、もしくはそれより広い範囲 | ||
| rec2020 | Rec.2020の色域、もしくはそれより広い範囲 | ||
| dynamic-range |
出力デバイスのダイナミック・レンジ | high | ピーク輝度が高く、コントラスト比が高く、色深度が24ビットもしくは8ビットより大きい |
| standard | “high”の条件のいずれかを満たさない | ||
| inverted-colors |
コンテンツが色を反転させて表示されるかどうか | none | 色を通常通り表示する |
| inverted | 色が反転されて表示される | ||
＃
操作性
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| pointer |
出力デバイスのメインの入力メカニズムがポインティング・デバイスかどうか | none | 出力デバイスのメインの入力メカニズムはポインティング・デバイスではない |
| coarse | 出力デバイスのメインの入力メカニズムはポインティング・デバイスであるが、正確性に制約がある | ||
| fine | 出力デバイスのメインの入力メカニズムは正確性が高いポインティング・デバイス | ||
| hover |
出力デバイスのメインの入力メカニズムが要素にホバーできるかどうか | none | 出力デバイスのメインの入力メカニズムはホバーができない |
| hover | 出力デバイスのメインの入力メカニズムはホバーができる | ||
| any-pointer |
出力デバイスにポインティング・デバイスがあるどうか | none | 出力デバイスにはポインティング・デバイスはない |
| coarse | 出力デバイスには正確性に制約があるポインティング・デバイスがある | ||
| fine | 出力デバイスには正確性が高いポインティング・デバイスがある | ||
| any-hover |
出力デバイスにホバーができる入力メカニズムがあるどうか | none | 出力デバイスはホバーができる入力メカニズムはない |
| hover | 出力デバイスはホバーができる入力メカニズムがある | ||
| nav-controls |
ユーザー・エージェントがインターフェースとして明確なナビゲーションのためのコントロールを提供しているかどうか | none | ユーザー・エージェントがインターフェースとして明確なナビゲーションのためのコントロールを提供しない |
| back | ユーザー・エージェントがインターフェースとして明確なナビゲーションのためのコントロールを提供する | ||
＃
ビデオ・プレーン
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| video-color-gamut |
出力デバイスのビデオ・プレーンが対応する色の範囲 | srgb | sRGBの色域、もしくはそれより広い範囲 |
| p3 | DCI-P3の色域、もしくはそれより広い範囲 | ||
| rec2020 | Rec.2020の色域、もしくはそれより広い範囲 | ||
| video-dynamic-range |
出力デバイスのビデオ・プレーンのダイナミック・レンジ | high | ピーク輝度が高く、コントラスト比が高く、色深度が24ビットもしくは8ビットより大きい |
| standard | “high”の条件のいずれかを満たさない | ||
＃
スクリプト
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| scripting |
スクリプトが利用できるかどうか | none | スクリプトは利用できない |
| initial-only | スクリプトは文書を読み込んでいる間のみ利用できる | ||
| enabled | スクリプトが利用できる | ||
＃
ユーザー設定
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| prefers-reduced-motion |
ユーザーが最小限のアニメーションを望むかどうか | no-preference | ユーザーは設定を行っていない |
| reduce | ユーザーは最小限のアニメーションを望む | ||
| prefers-reduced-transparency |
ユーザーは最小限の透明効果を望むかどうか | no-preference | ユーザーは設定を行っていない |
| reduce | ユーザーは最小限の透明効果を望む | ||
| prefers-contrast |
ユーザーが高いコントラストを望むか低いコントラストを望むか | no-preference | ユーザーは設定を行っていない |
| less | ユーザーは低いコントラストを望む | ||
| more | ユーザーは高いコントラストを望む | ||
| custom | ユーザーは特定の色の組み合わせを望み、“less”と“more”のいずれでもない | ||
| prefers-color-scheme |
ユーザーが明るい色遣いを望むか暗い色遣いを望むか | light | ユーザーはユーザーは明るい色遣いを望む、もしくはどちらが良いか明確に示していない |
| dark | ユーザーは暗い色遣いを望む | ||
| forced-colors |
強制カラーモードが有効かどうか | none | 強制カラーモードは無効 |
| active | 強制カラーモードが有効 | ||
| prefers-reduced-data |
ユーザーが少ないデータ量での描画を望むかどうか | no-preference | ユーザーは設定を行っていない |
| reduce | ユーザーは少ないデータ量での描画を望む | ||
