diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md index 6bd039dc80fe07f..96d82292f6f65d4 100644 --- a/files/en-us/web/css/@media/index.md +++ b/files/en-us/web/css/@media/index.md @@ -40,9 +40,11 @@ For a discussion of media query syntax, please see [Using media queries](/en-US/ ## Description +A media query's `` includes [``s](#media_types), [`s`](#media_features), and [logical operators](#logical_operators). + ### Media types -_Media types_ describe the general category of a device. +A _``_ describes the general category of a device. Except when using the `only` logical operator, the media type is optional and the `all` type is implied. - `all` @@ -57,30 +59,25 @@ Except when using the `only` logical operator, the media type is optional and th ### Media features -_Media features_ describe specific characteristics of the {{glossary("user agent")}}, output device, or environment. -Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses. +A _``_ describes specific characteristics of the {{glossary("user agent")}}, output device, or environment. +Media feature expressions test for their presence, value, or range of values, and are entirely optional. Each media feature expression must be surrounded by parentheses. - {{cssxref("@media/any-hover", "any-hover")}} - : Does any available input mechanism allow the user to hover over elements? - Added in Media Queries Level 4. - {{cssxref("@media/any-pointer", "any-pointer")}} - : Is any available input mechanism a pointing device, and if so, how accurate is it? - Added in Media Queries Level 4. - {{cssxref("@media/aspect-ratio", "aspect-ratio")}} - - : Width-to-height {{glossary("aspect ratio")}} of the viewport + - : Width-to-height {{glossary("aspect ratio")}} of the viewport. - {{cssxref("@media/color", "color")}} - - : Number of bits per color component of the output device, or zero if the device isn't color + - : Number of bits per color component of the output device, or zero if the device isn't color. - {{cssxref("@media/color-gamut", "color-gamut")}} - : Approximate range of colors that are supported by the user agent and output device. - Added in Media Queries Level 4. - {{cssxref("@media/color-index", "color-index")}} - - : Number of entries in the output device's color lookup table, or zero if the device does not use such a table + - : Number of entries in the output device's color lookup table, or zero if the device does not use such a table. - {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} - - : Width-to-height aspect ratio of the output device. - Deprecated in Media Queries Level 4. + - : Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4. - {{cssxref("@media/device-height", "device-height")}} - - : Height of the rendering surface of the output device. - Deprecated in Media Queries Level 4. + - : Height of the rendering surface of the output device. Deprecated in Media Queries Level 4. - {{cssxref("@media/device-width", "device-width")}} - : Width of the rendering surface of the output device. Deprecated in Media Queries Level 4. - {{cssxref("@media/display-mode", "display-mode")}} @@ -97,7 +94,6 @@ Media feature expressions test for their presence or value, and are entirely opt - : Height of the viewport. - {{cssxref("@media/hover", "hover")}} - : Does the primary input mechanism allow the user to hover over elements? - Added in Media Queries Level 4. - {{cssxref("@media/inverted-colors", "inverted-colors")}} - : Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5. @@ -107,13 +103,10 @@ Media feature expressions test for their presence or value, and are entirely opt - : Orientation of the viewport. - {{cssxref("@media/overflow-block", "overflow-block")}} - : How does the output device handle content that overflows the viewport along the block axis? - Added in Media Queries Level 4. - {{cssxref("@media/overflow-inline", "overflow-inline")}} - : Can content that overflows the viewport along the inline axis be scrolled? - Added in Media Queries Level 4. - {{cssxref("@media/pointer", "pointer")}} - : Is the primary input mechanism a pointing device, and if so, how accurate is it? - Added in Media Queries Level 4. - {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} - : Detect if the user prefers a light or dark color scheme. Added in Media Queries Level 5. @@ -138,7 +131,6 @@ Media feature expressions test for their presence or value, and are entirely opt - : Detects the shape of the device to distinguish rectangular and round displays. - {{cssxref("@media/update", "update")}} - : How frequently the output device can modify the appearance of content. - Added in Media Queries Level 4. - {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}} - : Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5. - {{cssxref("@media/width", "width")}} @@ -228,7 +220,7 @@ Because of this potential, a browser may opt to fudge the returned values in som } ``` -Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: +The range syntax allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: ```css @media (height > 600px) { @@ -258,6 +250,6 @@ For more examples, please see [Using media queries](/en-US/docs/Web/CSS/CSS_medi - [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) -- In JavaScript, `@media` can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}. +- {{domxref("CSSMediaRule")}} interface - [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features) - [Extended WebKit media features](/en-US/docs/Web/CSS/WebKit_Extensions#media_features)