Edit

Page

Page title:

Page body:

[9] [[媒体クエリー]]において[DFN[[RUBYB[[[媒体機能]]]@en[media feature]]]]の[DFN[[RUBYB[[[式]]]@en[expression]]]]は、
[[媒体]]が満たすべき条件を記述するものです。

* 仕様書

[REFS[
- [8] '''[CITE@en[Media Queries Level 4]] ([TIME[2013-07-25 22:52:42 +09:00]] 版) <http://w3c-test.org/csswg/mediaqueries/#media1>'''
- [1] [CITE@en[Media Queries Level 4]] ([TIME[2013-07-25 22:52:42 +09:00]] 版) <http://w3c-test.org/csswg/mediaqueries/#media0>
- [6] [CITE@en[Media Queries Level 4]] ([TIME[2013-07-25 22:52:42 +09:00]] 版) <http://w3c-test.org/csswg/mediaqueries/#error-handling>
]REFS]

* 意味

[2] [[利用者エージェント]]の[[装置]]に[[適用]]されない[[媒体機能]]についての[[式]]は、
[[偽]]となります。 [SRC[>>1]]

[3] [[利用者エージェント]]の[[装置]]に[[適用]]されない[[単位]]を含む[[式]]は、
[[偽]]となります。 [SRC[>>1]]

[5] 未知の[[媒体機能]]や値を含む[[媒体クエリー]]は
[CODE(CSS)@en['[[not]] [[all]]']] と同じと解釈されます [SRC[>>6]]。つまり常に[[偽]]となります。

;; [7] これはその[[媒体機能]]を含む[[式]]が[[偽]]であることとは微妙に違います。
[CODE(CSS)@en[all and (hoge: 1)]] も [CODE(CSS)@en[not all and (hoge: 1)]] もどちらも[[偽]]になります。

* 構文

[10] [[媒体機能]]の[[式]]は、 [CODE(CSS)@en[(名前: 値)]] のように括弧内に[[媒体機能]]の名前と値を一組記述したものです。

[11] 括弧やコロンの前後には[[空白]]を挿入できます。

[4] [[媒体機能]]の名前は[[ASCII大文字・小文字不区別]]です。

[12] [[媒体機能]]によっては、名前の最初に [CODE(CSS)@en[[[min-]]]] や [CODE(CSS)@en[[[max-]]]]
をつけることで、正確な値ではなく値の範囲を示すことができます。

[13] コロンと値を省略することができます [SRC[>>8]]。おおよそ「真」となるような値となります。
ただし [CODE(CSS)@en[[[min-]]]] や [CODE(CSS)@en[[[max-]]]] がついているものは省略できません。

[16] >>14 の通り、 [[vendor prefix]] は [CODE(CSS)@en[[[min-]]]] や [CODE(CSS)@en[[[max-]]]]
より前に来ます。 [[Blink]] も [[Gecko]] も、これら[[接頭辞]]を含め[[媒体機能]]名として実装している模様です。

* 適合性

[17] [[媒体クエリー]]が[[適合]]するためには、[[媒体機能]]は適当な仕様に適合するものである必要があります。
[SRC[<http://w3c-test.org/csswg/mediaqueries/#syntax>]]

;; [18] >>17 のような「事実の文」はありますが、現代的な仕様ならあるべき明確な適合性の規定はどこにもありません...

* 媒体機能の一覧

[FIG(list)[
[14] 
- [CODE(CSS)@en['[[animation]]']] [CODE(CSS)@en['[[-webkit-animation]]']]
- [CODE(CSS)@en['[[aspect-ratio]]']] [CODE(CSS)@en['[[max-aspect-ratio]]']] [CODE(CSS)@en['[[min-aspect-ratio]]']]
- [CODE(CSS)@en['[[color]]']] [CODE(CSS)@en['[[max-color]]']] [CODE(CSS)@en['[[min-color]]']]
- [CODE(CSS)@en['[[color-index]]']] [CODE(CSS)@en['[[max-color-index]]']] [CODE(CSS)@en['[[min-color-index]]']]
- [CODE(CSS)@en['[[device-aspect-ratio]]']] [CODE(CSS)@en['[[max-device-aspect-ratio]]']] [CODE(CSS)@en['[[min-device-aspect-ratio]]']]
- [CODE(CSS)@en['[[device-height]]']] [CODE(CSS)@en['[[max-device-height]]']] [CODE(CSS)@en['[[min-device-height]]']]
- [CODE(CSS)@en['[[-webkit-device-pixel-ratio]]']] [CODE(CSS)@en['[[-webkit-max-device-pixel-ratio]]']] [CODE(CSS)@en['[[-webkit-min-device-pixel-ratio]]']] [CODE(CSS)@en['[[-moz-device-pixel-ratio]]']] [CODE(CSS)@en['[[min--moz-device-pixel-ratio]]']] [CODE(CSS)@en['[[max--moz-device-pixel-ratio]]']] [CODE(CSS)@en['[[-o-device-pixel-ratio]]']] [CODE(CSS)@en['[[-o-max-device-pixel-ratio]]']] [CODE(CSS)@en['[[-o-min-device-pixel-ratio]]']]
- [CODE(CSS)@en['[[device-width]]']] [CODE(CSS)@en['[[max-device-width]]']] [CODE(CSS)@en['[[min-device-width]]']]
- [CODE(CSS)@en['[[grid]]']]
- [CODE(CSS)@en['[[height]]']] [CODE(CSS)@en['[[max-height]]']] [CODE(CSS)@en['[[min-height]]']]
- [CODE(CSS)@en['[[-ms-high-contrast]]']]
- [CODE(CSS)@en['[[hover]]']]
- [CODE(CSS)@en['[[-moz-images-in-menus]]']]
- [CODE(CSS)@en['[[luminosity]]']]
- [CODE(CSS)@en['[[-moz-mac-graphite-theme]]']]
- [CODE(CSS)@en['[[-moz-maemo-classic]]']]
- [CODE(CSS)@en['[[monochrome]]']] [CODE(CSS)@en['[[max-monochrome]]']] [CODE(CSS)@en['[[min-monochrome]]']]
- [CODE(CSS)@en['[[orientation]]']]
- [CODE(CSS)@en['[[-moz-os-version]]']]
- [CODE(CSS)@en['[[pointer]]']]
- [CODE(CSS)@en['[[resolution]]']] [CODE(CSS)@en['[[max-resolution]]']] [CODE(CSS)@en['[[min-resolution]]']]
- [CODE(CSS)@en['[[scan]]']]
- [CODE(CSS)@en['[[script]]']]
- [CODE(CSS)@en['[[-moz-scrollbar-end-backward]]']]
- [CODE(CSS)@en['[[-moz-scrollbar-end-forward]]']]
- [CODE(CSS)@en['[[-moz-scrollbar-start-backward]]']]
- [CODE(CSS)@en['[[-moz-scrollbar-start-forward]]']]
- [CODE(CSS)@en['[[-moz-scrollbar-thumb-proportional]]']]
- [CODE(CSS)@en['[[-moz-touch-enabled]]']]
- [CODE(CSS)@en['[[transform-2d]]']] [CODE(CSS)@en['[[-webkit-transform-2d]]']]
- [CODE(CSS)@en['[[transform-3d]]']] [CODE(CSS)@en['[[-webkit-transform-3d]]']]
- [CODE(CSS)@en['[[transition]]']] [CODE(CSS)@en['[[-webkit-transition]]']]
- [CODE(CSS)@en[-webkit-video-playable-inline]]
- [CODE(CSS)@en['[[view-mode]]']]
- [CODE(CSS)@en['[[-ms-view-state]]']]
- [CODE(CSS)@en['[[width]]']] [CODE(CSS)@en['[[max-width]]']] [CODE(CSS)@en['[[min-width]]']]
- [CODE(CSS)@en['[[-moz-windows-classic]]']]
- [CODE(CSS)@en['[[-moz-windows-compositor]]']]
- [CODE(CSS)@en['[[-moz-windows-default-theme]]']]
- [CODE(CSS)@en['[[-moz-windows-glass]]']]
- [CODE(CSS)@en['[[-moz-windows-theme]]']]
]FIG]

[REFS[
-[15] [CITE[webkit/Source/WebCore/css/MediaFeatureNames.h at master · WebKit/webkit]] ([TIME[2013-07-28 14:02:34 +09:00]] 版) <https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/MediaFeatureNames.h>
]REFS]

[19] [CITE@en-us[IndieUI: User Context 1.0]]
([TIME[2016-08-19 00:40:59 +09:00]])
<https://w3c.github.io/indie-ui/indie-ui-context.html>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)