Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@media: add name of data types #36171

Merged
merged 3 commits into from
Oct 3, 2024
Merged

@media: add name of data types #36171

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbea572
@media: add name of data types
estelle Oct 2, 2024
e89b87f
Update index.md
estelle Oct 2, 2024
1b1899f
Apply suggestions from code review
estelle Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 12 additions & 20 deletions files/en-us/web/css/@media/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@ For a discussion of media query syntax, please see [Using media queries](/en-US/

## Description

A media query's `<media-query-list>` includes [`<media-type>`s](#media_types), [`<media-feature>s`](#media_features), and [logical operators](#logical_operators).

### Media types

_Media types_ describe the general category of a device.
A _`<media-type>`_ 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`
Expand 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 _`<media feature>`_ 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")}}
Expand All @@ -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.
Expand All @@ -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.
Expand All @@ -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")}}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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)