diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md index 861fc3b4a135e71..7ef1878753ed9a4 100644 --- a/files/en-us/web/css/@media/index.md +++ b/files/en-us/web/css/@media/index.md @@ -123,6 +123,8 @@ Media feature expressions test for their presence or value, and are entirely opt Added in Media Queries Level 5. - {{cssxref("@media/resolution", "resolution")}} - : Pixel density of the output device. +- {{cssxref("@media/scan", "scan")}} + - : Whether display output is progressive or interlaced. - {{cssxref("@media/scripting", "scripting")}} - : Detects whether scripting (i.e. JavaScript) is available. Added in Media Queries Level 5. @@ -246,6 +248,7 @@ For more examples, please see [Using media queries](/en-US/docs/Web/CSS/CSS_medi ## See also +- [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")}}. - [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features) diff --git a/files/en-us/web/css/css_media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md index 16e02e8198e37f5..ff7a0463d9f357a 100644 --- a/files/en-us/web/css/css_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/index.md @@ -3,40 +3,23 @@ title: CSS media queries slug: Web/CSS/CSS_media_queries page-type: css-module spec-urls: + - https://drafts.csswg.org/mediaqueries-3/ - https://drafts.csswg.org/mediaqueries/ - - https://drafts.csswg.org/css-conditional/ + - https://drafts.csswg.org/mediaqueries-5/ --- {{CSSRef}} -**CSS media queries** are a key component of [responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) that allow you to apply CSS styles depending on the presence or value of device characteristics. +The **CSS media queries** module enables testing and querying of viewport values and browser or device features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS `@media` rule and other contexts and languages such as HTML and JavaScript. -It's common to apply a media query based on the {{Glossary("viewport")}} size so that layout choices can be made for devices with different screen sizes. -For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens. +Media queries are a key component of [responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). They enable conditional setting of CSS styles depending on the presence or value of device characteristics. It's common to use a media query based on {{Glossary("viewport")}} size to set appropriate layouts on devices with different screen sizes — for example three columns on a wide screen or a single column on a narrow screen. -![A laptop and a mobile device with different viewport sizes that can be queried using media queries where we can see the content being laid out differently.](media-queries.svg) +Other common examples include increasing the font size and hiding navigation menus when printing a page, adjusting the padding between paragraphs when a page is viewed in portrait or landscape mode, or increasing the size of buttons to provide a larger hit area on touchscreens. -In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. -To conditionally apply an entire style sheet, use {{cssxref("@import")}}. +In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use {{cssxref("@import")}}. When designing reusable HTML components, you may also use [container queries](/en-US/docs/Web/CSS/CSS_container_queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics. -### Media queries in HTML - -In [HTML](/en-US/docs/Web/HTML), media queries can be applied to various elements: - -- In the {{HTMLElement("link")}} element's [`media`](/en-US/docs/Web/HTML/Element/link#media) attribute, they define the media to which a linked resource (typically CSS) should be applied. -- In the {{HTMLElement("source")}} element's [`media`](/en-US/docs/Web/HTML/Element/source#media) attribute, they define the media to which that source should be applied. (This is only valid inside {{HTMLElement("picture")}} elements.) -- In the {{HTMLElement("style")}} element's [`media`](/en-US/docs/Web/HTML/Element/style#media) attribute, they define the media to which the style should be applied. - -### Media queries in JavaScript - -In [JavaScript](/en-US/docs/Web/JavaScript), you can use the {{domxref("Window.matchMedia()")}} method to test the window against a media query. -You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of a query changes. -With this functionality, your site or app can respond to changes in the device configuration, orientation, or state. - -You can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries). - ## Reference ### At-rules @@ -44,22 +27,114 @@ You can learn more about programmatically using media queries in [Testing media - {{cssxref("@import")}} - {{cssxref("@media")}} +### Descriptors + +- {{cssxref("@media/any-hover", "any-hover")}} +- {{cssxref("@media/any-pointer", "any-pointer")}} +- {{cssxref("@media/aspect-ratio", "aspect-ratio")}} +- {{cssxref("@media/color", "color")}} +- {{cssxref("@media/color-gamut", "color-gamut")}} +- {{cssxref("@media/color-index", "color-index")}} +- {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} +- {{cssxref("@media/device-height", "device-height")}} +- {{cssxref("@media/device-width", "device-width")}} +- {{cssxref("@media/display-mode", "display-mode")}} +- {{cssxref("@media/dynamic-range", "dynamic-range")}} +- {{cssxref("@media/forced-colors", "forced-colors")}} +- {{cssxref("@media/grid", "grid")}} +- {{cssxref("@media/height", "height")}} +- {{cssxref("@media/hover", "hover")}} +- {{cssxref("@media/inverted-colors", "inverted-colors")}} +- {{cssxref("@media/monochrome", "monochrome")}} +- {{cssxref("@media/orientation", "orientation")}} +- {{cssxref("@media/overflow-block", "overflow-block")}} +- {{cssxref("@media/overflow-inline", "overflow-inline")}} +- {{cssxref("@media/pointer", "pointer")}} +- {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} +- {{cssxref("@media/prefers-contrast", "prefers-contrast")}} +- {{cssxref("@media/prefers-reduced-data", "prefers-reduced-data")}} +- {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} +- {{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}} +- {{cssxref("@media/resolution", "resolution")}} +- {{cssxref("@media/scan", "scan")}} +- {{cssxref("@media/scripting", "scripting")}} +- {{cssxref("@media/update", "update")}} +- {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}} +- {{cssxref("@media/width", "width")}} + +> **Note:** CSS media queries level 5 introduces five `@media` descriptors that have not been implemented: {{cssxref("@media/environment-blending", "environment-blending")}}, {{cssxref("@media/horizontal-viewport-segments", "horizontal-viewport-segments")}}, {{cssxref("@media/nav-controls", "nav-controls")}}, {{cssxref("@media/vertical-viewport-segments", "vertical-viewport-segments")}}, and {{cssxref("@media/video-color-gamut", "video-color-gamut")}} + +> **Note:** CSS media queries level 4 deprecated three `@media` descriptors: {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}}, {{cssxref("@media/device-height", "device-height")}}, and {{cssxref("@media/device-width", "device-width")}}. + +### Data types and operators + +- [``](/en-US/docs/Web/CSS/@media#media_types) +- [``](/en-US/docs/Web/CSS/@media#media_features) +- [``](/en-US/docs/Web/CSS/resolution) +- [Logical operators](/en-US/docs/Web/CSS/@media#logical_operators) + +### Glossary terms + +- [media](/en-US/docs/Glossary/Media/CSS) +- [media query](/en-US/docs/Glossary/Media_query) + ## Guides - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - - : Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions. -- [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) + + - : Introduces media queries, their syntax, and the operators and media features used to construct media query expressions. + +- [Beginner's guide to media queries](/en-US/docs/Learn/CSS/CSS_layout/Media_queries) + + - : Introduction to media queries and approaches for using them to create responsive designs. + +- [Testing media queries](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) + - : Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser). + - [Using media queries for accessibility](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility) - - : Learn how Media Queries can help users understand your website better. + + - : Learn how media queries can help users understand your website better. + - [Printing](/en-US/docs/Web/CSS/CSS_media_queries/Printing) + - : Tips and techniques for helping improve web content printer output. +- [Learn: responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + + - : Learn how to use media queries with `sizes` to implement responsive image solutions on websites. + +## Related concepts + +- [CSS containment](/en-US/docs/Web/CSS/CSS_containment) module + - {{cssxref("@container")}} at-rule + - [Using container queries](/en-US/docs/Web/CSS/CSS_container_queries) +- [CSS conditional rules](/en-US/docs/Web/CSS/CSS_container_queries) module + - {{cssxref("@supports")}} at-rule + - [Using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) +- [CSS paged media](/en-US/docs/Web/CSS/CSS_paged_media) module + - {{cssxref("@page")}} at-rule +- [CSS object model](/en-US/docs/Web/API/CSS_Object_Model) module + - {{DOMxRef("MediaQueryList")}} interface + - {{DOMxRef("MediaQueryList.matches", "matches")}} property + - {{DOMxRef("MediaQueryList.media", "media")}} property + - {{DOMxRef("MediaQueryList.change_event", "change")}} event + - {{DOMxRef("MediaList")}} interface + - {{DOMxRef("MediaList.mediaText", "mediaText")}} property + - {{DOMxRef("MediaQueryListEvent")}} object +- HTML + - `sizes` attribute for [``](/en-US/docs/Web/HTML/Element/img#sizes), [``](/en-US/docs/Web/HTML/Element/link#sizes), and [``](/en-US/docs/Web/HTML/Element/source#sizes) for {{HTMLElement("picture")}} + - `media` attribute for [``](/en-US/docs/Web/HTML/Element/link#media), [``](/en-US/docs/Web/HTML/Element/source#media), and [`