@@ -348,7 +352,7 @@ Media Types but the definition of media types as mutually exclusive makes it difficult to use them in a reasonable manner; instead, their exclusive aspects are better expressed as media features - such as '@media/grid' or 'scan'. + such as '@media/grid' or '@media/scan'. As such, the following media types are defined for use in media queries: @@ -447,9 +451,9 @@ Media Features the media feature must always evaluate to false.- The media feature ''device-aspect-ratio'' only applies to + The media feature '@media/device-aspect-ratio' only applies to visual devices. On an ''speech'' device, expressions involving - ''device-aspect-ratio'' will therefore always be false: + '@media/device-aspect-ratio' will therefore always be false:<link media="speech and (device-aspect-ratio: 16/9)" @@ -463,7 +467,7 @@ Media Feature Types: “range” and “discrete” Every media feature defines its “type” as either “range” or “discrete” in its definition table. “Discrete” media features, - like 'pointer' + like '@media/pointer' take their values from a set. The values may be keywords or boolean numbers (0 and 1), @@ -519,7 +523,7 @@ Evaluating Media Features in a Boolean ContextSome media features are designed to be written like this. - For example, 'update' is typically written as ''(update)'' to test if any kind of updating is available, + For example, '@media/update' is typically written as ''(update)'' to test if any kind of updating is available, or ''not (update)'' to check for the opposite. It can still be given an explicit value as well, @@ -540,7 +544,7 @@ Evaluating Media Features in a Boolean Context Only some of the media features that accept keywords are meaningful in a boolean context. For example, ''(pointer)'' is useful, - as 'pointer' has a ''pointer/none'' value to indicate there's no pointing device at all on the device. + as '@media/pointer' has a ''@media/pointer/none'' value to indicate there's no pointing device at all on the device. On the other hand, ''(scan)'' is just always true or always false (depending on whether it applies at all to the device), as there's no value that means “false”. @@ -1025,7 +1029,7 @@ Error Handling@@ -1140,7 +1144,7 @@ Aspect-Ratio: the aspect-ratio feature@media (min-orientation:portrait) { … }- The 'orientation' feature does not accept prefixes, + The '@media/orientation' feature does not accept prefixes, so this is considered an unknown media feature, and turned into ''not all''.-Orientation: the 'orientation' feature
+Orientation: the '@media/orientation' featureName: orientation @@ -1151,11 +1155,11 @@ Orientation: the 'orientation' feature
- portrait -
- The 'orientation' media feature is ''portrait'' +
- The '@media/orientation' media feature is ''portrait'' when the value of the '@media/height' media feature is greater than or equal to the value of the '@media/width' media feature.
- landscape -
- Otherwise 'orientation' is ''landscape''. +
- Otherwise '@media/orientation' is ''landscape''.
@@ -1254,13 +1258,13 @@ Horizontal Viewport Segments: the '@media/horizontal-viewport-segments' feature< The '@media/horizontal-viewport-segments' media feature describes the number of logical segments of - the viewport in the horizontal direction. + the viewport in the horizontal direction. - The '@media/horizontal-viewport-segments' media feature is false in the negative range. + The '@media/horizontal-viewport-segments' media feature is false in the negative range. - When the viewport is split by one or more hardware features (such as a fold or a hinge between - separate displays) that act as a logical divider, segments are the regions of the viewport that - can be treated as logically distinct by the page. + When the viewport is split by one or more hardware features (such as a fold or a hinge between + separate displays) that act as a logical divider, segments are the regions of the viewport that + can be treated as logically distinct by the page.Vertical Viewport Segments: the '@media/vertical-viewport-segments' feature
@@ -1273,9 +1277,9 @@ Vertical Viewport Segments: the '@media/vertical-viewport-segments' feature The '@media/vertical-viewport-segments' media feature describes the number of logical segments of - the viewport in the vertical direction. + the viewport in the vertical direction. - The '@media/vertical-viewport-segments' media feature is false in the negative range. + The '@media/vertical-viewport-segments' media feature is false in the negative range.This media query detects a viewport that has exactly two segments that are side-by-side. @@ -1284,7 +1288,7 @@ Vertical Viewport Segments: the '@media/vertical-viewport-segments' feature-Display Modes: the ''display-mode'' media feature
+Display Modes: the '@media/display-mode' media featureName: display-mode @@ -1367,7 +1371,7 @@ Display Modes: the ''display-mode'' media featureThe [=display mode/fullscreen=] [=display mode=] is distinct from the [[FULLSCREEN|Fullscreen API]]. - The ''fullscreen'' value for [=display-mode=] is not directly related + The ''fullscreen'' value for '@media/display-mode' is not directly related to the CSS '':fullscreen'' pseudo-class. The '':fullscreen'' pseudo-class matches an element exclusively when that element is put into the fullscreen element stack. @@ -1414,7 +1418,7 @@ Display Modes: the ''display-mode'' media feature Display Quality Media Features-Display Resolution: the 'resolution' feature
+Display Resolution: the '@media/resolution' featureName: resolution @@ -1423,13 +1427,13 @@ Display Resolution: the 'resolution' feature Type: range- The 'resolution' media feature describes the resolution of the output + The '@media/resolution' media feature describes the resolution of the output device, i.e. the density of the pixels, taking into account the page zoom but assuming a pinch zoom of 1.0. - The 'resolution' media feature is false in the negative range + The '@media/resolution' media feature is false in the negative range - When querying media with non-square pixels, 'resolution' queries the density in the vertical dimension. + When querying media with non-square pixels, '@media/resolution' queries the density in the vertical dimension. For printers, this corresponds to the screening resolution (the resolution for printing dots of arbitrary color). @@ -1479,7 +1483,7 @@ Display Resolution: the 'resolution' feature-Display Type: the 'scan' feature
+Display Type: the '@media/scan' featureName: scan @@ -1488,7 +1492,7 @@ Display Type: the 'scan' feature Type: discrete- The 'scan' media feature describes the scanning process of some output devices. + The '@media/scan' media feature describes the scanning process of some output devices.
- interlace @@ -1558,7 +1562,7 @@ Detecting Console Displays: the '@media/grid' feature Note: At the time of writing, all known implementations match
grid: 0rather thangrid: 1.-Display Update Frequency: the 'update' feature
+Display Update Frequency: the '@media/update' featureName: update @@ -1567,7 +1571,7 @@ Display Update Frequency: the 'update' feature Type: discrete- The 'update' media feature is used to query the ability of the output device + The '@media/update' media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered. It accepts the following values: @@ -1606,56 +1610,56 @@ Display Update Frequency: the 'update' feature-Detecting the display technology: the 'environment-blending' feature
+Detecting the display technology: the '@media/environment-blending' feature -- Name: environment-blending - Value: opaque | additive | subtractive - For: @media - Type: discrete -++ Name: environment-blending + Value: opaque | additive | subtractive + For: @media + Type: discrete +- The 'environment-blending' media feature is used to query the characteristics of the user's display - so the author can adjust the style of the document. - An author might choose to adjust the visuals and/or layout of the page depending on the display - technology to increase the appeal or improve legibility. + The '@media/environment-blending' media feature is used to query the characteristics of the user's display + so the author can adjust the style of the document. + An author might choose to adjust the visuals and/or layout of the page depending on the display + technology to increase the appeal or improve legibility. - The following values are valid: + The following values are valid: --
- Issue: Is there a need for the ''subtractive'' value? + Issue: Is there a need for the ''subtractive'' value? -- opaque -
- - The document is rendered on an opaque medium, such as a traditional monitor or paper. - Black is dark and white is 100% light. +
+
+ For example: an LCD display embedded in a bathroom mirror. +- opaque +
- + The document is rendered on an opaque medium, such as a traditional monitor or paper. + Black is dark and white is 100% light. -
- additive -
- - The display blends the colors of the canvas with the real world using additive mixing. - Black is fully transparent and white is 100% light. +
- additive +
- + The display blends the colors of the canvas with the real world using additive mixing. + Black is fully transparent and white is 100% light. - For example: a head-up display in a car. + For example: a head-up display in a car. -
- subtractive -
- - The display blends the colors of the canvas with the real world using subtractive mixing. - White is fully transparent and dark colors have the most contrast. +
- subtractive +
- + The display blends the colors of the canvas with the real world using subtractive mixing. + White is fully transparent and dark colors have the most contrast. - For example: an LCD display embedded in a bathroom mirror. -
-- body { background-color: white; } - p { color: black; } ++++ @media(environment-blending: additive) { + body { background-color: black; } + p { color: white; font-size: 16px; font-weight: 1000; } + } ++ body { background-color: white; } + p { color: black; } - @media(environment-blending: additive) { - body { background-color: black; } - p { color: white; font-size: 16px; font-weight: 1000; } - } --User Preference Media Features
-Detecting the desire for less motion on the page: the 'prefers-reduced-motion' feature
+Detecting the desire for less motion on the page: the '@media/prefers-reduced-motion' featureName: prefers-reduced-motion @@ -2764,7 +2768,7 @@ Detecting the desire for less motion on the page: the 'prefers-reduced-motion' f Type: discrete- The 'prefers-reduced-motion' media feature is used to detect if the user + The '@media/prefers-reduced-motion' media feature is used to detect if the user has requested the system minimize the amount of non-essential motion it uses. @@ -2785,7 +2789,7 @@ Detecting the desire for less motion on the page: the 'prefers-reduced-motion' f-Detecting the desire for reduced transparency on the page: the 'prefers-reduced-transparency' feature
+Detecting the desire for reduced transparency on the page: the '@media/prefers-reduced-transparency' featureName: prefers-reduced-transparency @@ -2794,7 +2798,7 @@ Detecting the desire for reduced transparency on the page: the 'prefers-reduced- Type: discrete- The 'prefers-reduced-transparency' media feature is used to detect if the user + The '@media/prefers-reduced-transparency' media feature is used to detect if the user has requested the system minimize the amount of transparent or translucent layer effects it uses. @@ -2816,7 +2820,7 @@ Detecting the desire for reduced transparency on the page: the 'prefers-reduced- They're not about transparency, but they also interfere with shape recognition.-Detecting the desire for increased or decreased color contrast from elements on the page: the 'prefers-contrast' feature
+Detecting the desire for increased or decreased color contrast from elements on the page: the '@media/prefers-contrast' featureName: prefers-contrast @@ -2825,7 +2829,7 @@ Detecting the desire for increased or decreased color contrast from elements on Type: discrete- The 'prefers-contrast' media feature is used to detect + The '@media/prefers-contrast' media feature is used to detect if the user has requested more or less contrast in the page. This could be responded to, for example, by adjusting the contrast ratio between adjacent colors, @@ -2930,7 +2934,7 @@ Detecting the desire for increased or decreased color contrast from elements on-Detecting Forced Colors Mode: the 'forced-colors' feature
+Detecting Forced Colors Mode: the '@media/forced-colors' featureName: forced-colors @@ -2968,7 +2972,7 @@ Detecting Forced Colors Mode: the 'forced-colors' feature Similarly, if the forced color palette chosen by the user - fits within one of the color schemes described by 'prefers-color-scheme', + fits within one of the color schemes described by '@media/prefers-color-scheme', the corresponding value must also match.none @@ -2985,7 +2989,7 @@ Detecting Forced Colors Mode: the 'forced-colors' feature -Detecting the desire for light or dark color schemes: the 'prefers-color-scheme' feature
+Detecting the desire for light or dark color schemes: the '@media/prefers-color-scheme' featureName: prefers-color-scheme @@ -2994,7 +2998,7 @@ Detecting the desire for light or dark color schemes: the 'prefers-color-scheme' Type: discrete- The 'prefers-color-scheme' media feature reflects the user's + The '@media/prefers-color-scheme' media feature reflects the user's desire that the page use a light or dark color theme.
change at |preference|.
-change at [=this=].
To query for the size of the viewport (or the page box on page media), the '@media/width', '@media/height' and aspect-ratio media features - should be used, rather than 'device-width', 'device-height' and - 'device-aspect-ratio', which refer to the physical size of the device + should be used, rather than '@media/device-width', '@media/device-height' and + '@media/device-aspect-ratio', which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better @@ -3582,7 +3587,7 @@ device-width Type: range - The 'device-width' media feature describes the width of the rendering surface of the output device. + The '@media/device-width' media feature describes the width of the rendering surface of the output device. For [=continuous media=], this is the width of the Web-exposed screen area. For [=paged media=], this is the width of the page sheet size. @@ -3611,7 +3616,7 @@ device-height Type: range - The 'device-height' media feature describes the height of the rendering surface of the output device. + The '@media/device-height' media feature describes the height of the rendering surface of the output device. For [=continuous media=], this is the height of the Web-exposed screen area. For [=paged media=], this is the height of the page sheet size. @@ -3636,9 +3641,9 @@ device-aspect-ratio Type: range - The 'device-aspect-ratio media feature is defined as the ratio of - the value of the 'device-width' media feature to - the value of the 'device-height media feature. + The '@media/device-aspect-ratio' media feature is defined as the ratio of + the value of the '@media/device-width' media feature to + the value of the '@media/device-height' media feature.
video-height,
and video-resolution.
(See Issue 5044)
- * Renamed 'prefers-contrast' values high and low
+ * Renamed '@media/prefers-contrast' values high and low
to ''prefers-contrast/more'' and ''prefers-contrast'' less.
(See Issue 2943)
- * Rework the interaction between 'prefers-contrast' and 'forced-colors',
+ * Rework the interaction between '@media/prefers-contrast' and '@media/forced-colors',
retiring prefers-contrast: forced and introducing ''prefers-contrast/custom''.
(See Issue 5433)
and Issue 6036)
- * Added the 'horizontal-viewport-segments' and 'vertical-viewport-segments' media feature.
+ * Added the '@media/horizontal-viewport-segments' and '@media/vertical-viewport-segments' media feature.
(See Issue 6234)
- * Added the 'nav-controls' media feature.
+ * Added the '@media/nav-controls' media feature.
(See Issue 6234)
- * Make it possible for multiple values of 'dynamic-range' to match at the same time.
+ * Make it possible for multiple values of '@media/dynamic-range' to match at the same time.
(See Issue 6793)
@@ -3787,7 +3719,7 @@ The following additions were made to this module since the
light-level, 'inverted-colors', and Custom Media Queries sections
+ Reinstate the light-level, '@media/inverted-colors', and Custom Media Queries sections
from earlier Media Queries Level 4 drafts.