From 5468d1f2fffd33b0c76194c6187488cb4487ec69 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Fri, 26 Jan 2024 16:07:07 +0100 Subject: [PATCH 1/2] Add clonable to experimental features (#31937) * Add clonable to experimental features * Remove duplicates * Remove duplicates * Apply suggestions from code review Co-authored-by: Brian Thomas Smith * Mention default value --------- Co-authored-by: Brian Thomas Smith --- .../firefox/experimental_features/index.md | 16 ++++++++ .../mozilla/firefox/releases/122/index.md | 39 ++++--------------- 2 files changed, 23 insertions(+), 32 deletions(-) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index e0d3f372d6c972e..77765da6b2b394a 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -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). diff --git a/files/en-us/mozilla/firefox/releases/122/index.md b/files/en-us/mozilla/firefox/releases/122/index.md index 9065c9c8bce64fc..78a13bae02fdab1 100644 --- a/files/en-us/mozilla/firefox/releases/122/index.md +++ b/files/en-us/mozilla/firefox/releases/122/index.md @@ -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 `
    ` and `
      ` 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)) @@ -29,14 +25,10 @@ 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 @@ -44,14 +36,6 @@ This article provides information about the changes in Firefox 122 that affect d - Removed support for `data:` URLs in SVG `` 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. @@ -59,18 +43,8 @@ This article provides information about the changes in Firefox 122 that affect d #### 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 @@ -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. @@ -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)) From f7daf15512ea736498837b68bcc36d82d6a323f4 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 26 Jan 2024 13:49:04 -0800 Subject: [PATCH 2/2] Media queries module (#31903) * New module * minor * media features * all the nested files * Apply suggestions from code review Co-authored-by: Chris Mills * Apply suggestions from code review Co-authored-by: Chris Mills * updates per review * not rewording * add sidebar in * Apply suggestions from code review Co-authored-by: Chris Mills --------- Co-authored-by: Chris Mills --- files/en-us/web/css/@media/index.md | 3 + .../en-us/web/css/css_media_queries/index.md | 127 ++++++++++++---- .../css/css_media_queries/printing/index.md | 10 +- .../testing_media_queries/index.md | 14 +- .../using_media_queries/index.md | 143 ++++++++++-------- .../index.md | 6 +- 6 files changed, 200 insertions(+), 103 deletions(-) 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 [`