Skip to content

Commit

Permalink
Merge branch 'main' into patch-2
Browse files Browse the repository at this point in the history
  • Loading branch information
@cartesian-plane
cartesian-plane authored Jan 26, 2024
2 parents fbc5c64 + f7daf15 commit 32843dd
Show file tree
Hide file tree
Showing 8 changed files with 223 additions and 135 deletions.
16 changes: 16 additions & 0 deletions files/en-us/mozilla/firefox/experimental_features/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1483,6 +1483,22 @@ It is disabled by default on all builds [Firefox bug 1750902](https://bugzil.la/

### HTML DOM API

#### Shadow DOM

Firefox now supports the `clonable` option and property for shadow DOM.

- The {{domxref("Element.attachShadow()")}} method's `clonable` boolean option specifies whether the created shadow root is clonable: the default value is `false` but when set to `true`, the shadow host cloned with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include shadow root in the copy.
- The {{domxref("ShadowRoot")}} interface's {{domxref("ShadowRoot.clonable", "clonable")}} read-only property returns `true` if the shadow root is clonable, and `false` otherwise.

When shadow root is created via declarative shadow DOM, the `clonable` option is set to `true` by default, and the `clonable` property returns `true`. ([Firefox bug 1868428](https://bugzil.la/1868428))

| Release channel | Version added | Enabled by default? |
| ----------------- | ------------- | ------------------- |
| Nightly | 122 | Yes |
| Developer Edition | NA | No |
| Beta | NA | No |
| Release | NA | No |

#### Popover API

Firefox now supports the [Popover API](/en-US/docs/Web/API/Popover_API).
Expand Down
39 changes: 7 additions & 32 deletions files/en-us/mozilla/firefox/releases/122/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,11 @@ This article provides information about the changes in Firefox 122 that affect d

## Changes for web developers

### Developer Tools

### HTML

- {{HTMLElement("hr")}} elements are now allowed as children of {{HTMLElement("select")}} elements. This is a new feature that improves the readability of select lists with many options. ([Firefox bug 1830909](https://bugzil.la/1830909)).
- The `type` HTML attribute no longer has an effect if set to `none`, `disc`, `circle` or `square` in {{HTMLElement("ol")}} and no longer has an effect if set to `1`, `a`, `A`, `i` or `I` in {{HTMLElement("ul")}}. As `type` is a deprecated attribute for `<ul>` and `<ol>` lists, these should be styled with {{CSSxref("list-style-type")}} CSS property instead. ([Firefox bug 1868087](https://bugzil.la/1868087)).

#### Removals

### CSS

- The CSS {{cssxref("offset-position")}} property is now available by default. It defines the initial position of an element on a path. ([Firefox bug 1598152](https://bugzil.la/1598152))
Expand All @@ -29,48 +25,26 @@ This article provides information about the changes in Firefox 122 that affect d

- The {{CSSxref("clip-path")}} and {{CSSxref("offset-path")}} properties now accept [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) and [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) shape functions. These {{CSSXref("basic-shape")}} values allow the clipping and offsetting of elements with a rectangle defined by distance from the edge of the element (`rect()`) or coordinates and size (`xywh()`). ([Firefox bug 1868722](https://bugzil.la/1868722)).

#### Removals

### JavaScript

- The {{jsxref("ArrayBuffer.prototype.transfer()")}} and {{jsxref("ArrayBuffer.prototype.transferToFixedLength()")}} methods can now be used to [transfer ownership](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer#transferring_arraybuffers) of memory from one {{jsxref("ArrayBuffer")}} to another. After transfer, the original buffer is detached from its original memory and hence unusable; the state can be checked using {{jsxref("ArrayBuffer.prototype.detached")}}. (See [Firefox bug 1865103](https://bugzil.la/1865103) for more details.)

#### Removals

### SVG

#### Removals

- Removed support for `data:` URLs in SVG `<use>` elements and via the [`SVGUseElement`](/en-US/docs/Web/API/SVGUseElement) interface to prevent [XSS](/en-US/docs/Glossary/Cross-site_scripting) attacks.
The legacy functionality may be re-enabled by setting the `svg.use-element.data-url-href.allowed` preference to `true`, although this is not recommended for security reasons ([Firefox bug 1806964](https://bugzil.la/1806964)).

### HTTP

#### Removals

### Security

#### Removals

### APIs

- The [LargestContentfulPaint API](/en-US/docs/Web/API/LargestContentfulPaint) is now supported.
This API is part of the [Performance APIs](/en-US/docs/Web/API/Performance_API) and provides timing information about the largest image or text paint before users interact with a web page ([Firefox bug 1866266](https://bugzil.la/1866266)).

#### DOM

### showPicker() method for HTML select elements

- The {{domxref("HTMLSelectElement.showPicker()")}} method is now supported, allowing the browser picker for a {{HTMLElement("select")}} element to be programmatically launched when triggered by user interaction ([Firefox bug 1865207](https://bugzil.la/1865207)).

#### Media, WebRTC, and Web Audio

#### Removals

### WebAssembly

#### Removals

### WebDriver conformance (WebDriver BiDi, Marionette)

#### General
Expand All @@ -89,12 +63,6 @@ This article provides information about the changes in Firefox 122 that affect d

- Fixed a bug with [Get Element Text](https://w3c.github.io/webdriver/#dfn-get-element-text), where the command was incorrectly returning an empty text when the element was located within a ShadowRoot's slot ([Firefox bug 1824664](https://bugzil.la/1824664)).

## Changes for add-on developers

### Removals

### Other

## Experimental web features

These features are newly shipped in Firefox 122 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page.
Expand All @@ -103,6 +71,13 @@ These features are newly shipped in Firefox 122 but are disabled by default. To

The {{htmlelement("template")}} element now supports a `shadowrootmode` attribute which can be set to either `open` or `closed`, the same values as the `mode` option of the {{domxref("Element.attachShadow()", "attachShadow()")}} method. It allows the creation of a shadow DOM subtree declaratively. ([Firefox bug 1712140](https://bugzil.la/1712140))

- **Clonable option and property for shadow DOM.**

- The {{domxref("Element.attachShadow()")}} method now supports the `clonable` boolean option that specifies whether the created shadow root is clonable: the default value is `false` but when set to `true`, the shadow host cloned with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include shadow root in the copy.
- The {{domxref("ShadowRoot")}} interface now supports the {{domxref("ShadowRoot.clonable", "clonable")}} read-only property. It returns `true` if the shadow root is clonable, and `false` otherwise. It always returns `true` for shadow roots created via declarative shadow DOM.

When shadow root is created via declarative shadow DOM, the `clonable` option is set to `true` by default, and the `clonable` property returns `true`. ([Firefox bug 1712140](https://bugzil.la/1868428))

- **Popover API:** `dom.element.popover.enabled`.

Displaying popovers on top of page content is now supported via HTML attributes or JavaScript API, including styling with the CSS [`:popover-open`](/en-US/docs/Web/CSS/:popover-open) pseudo-class and extended support for the [`::backdrop`](/en-US/docs/Web/CSS/::backdrop) pseudo-element. See the [Popover API](/en-US/docs/Web/API/Popover_API) reference for more details. ([Firefox bug 1823757](https://bugzil.la/1823757))
Expand Down
3 changes: 3 additions & 0 deletions files/en-us/web/css/@media/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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)
Expand Down
127 changes: 101 additions & 26 deletions files/en-us/web/css/css_media_queries/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,63 +3,138 @@ 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

- {{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

- [`<media-types>`](/en-US/docs/Web/CSS/@media#media_types)
- [`<media-features>`](/en-US/docs/Web/CSS/@media#media_features)
- [`<resolution>`](/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 [`<img>`](/en-US/docs/Web/HTML/Element/img#sizes), [`<link>`](/en-US/docs/Web/HTML/Element/link#sizes), and [`<source>`](/en-US/docs/Web/HTML/Element/source#sizes) for {{HTMLElement("picture")}}
- `media` attribute for [`<link>`](/en-US/docs/Web/HTML/Element/link#media), [`<source>`](/en-US/docs/Web/HTML/Element/source#media), and [`<style>`](/en-US/docs/Web/HTML/Element/style#media) [HTML](/en-US/docs/Web/HTML)
- [Viewport `<meta>` tag](/en-US/docs/Web/HTML/Viewport_meta_tag)
- SVG [`media`](/en-US/docs/Web/SVG/Attribute/media) attribute

## Specifications

{{Specifications}}

## See also

- [Using the `srcset` and `sizes` attributes](/en-US/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)
- [Container queries](/en-US/docs/Web/CSS/CSS_container_queries)
- [CSS paged media](/en-US/docs/Web/CSS/CSS_paged_media)
- Use {{cssxref("@supports")}} to apply styles that depend on browser support for various CSS technologies.
Loading

0 comments on commit 32843dd

Please sign in to comment.