Web features explorer

📅 June 2026 release notes

Newly available

The following features are newly available:

  • field-sizing: The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.

Widely available

The following features are now widely available:

  • Canvas reset(): The reset() method clears a canvas to its initial state.
  • cap unit: The cap CSS length unit corresponds to the height of Latin capital letters.
  • counter-set: The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.
  • createImageBitmap: The createImageBitmap() global method creates an ImageBitmap object from a source such as an image, SVG, blob, or canvas. An ImageBitmap object represents pixel data that can be drawn to a canvas with lower latency than other types, such as ImageData.
  • :dir(): The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
  • Exponential functions (CSS): The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
  • :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  • linear() easing: The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.
  • Lazy-loading images and iframes: The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  • Masks: The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
  • Nesting: CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.
  • Preloading responsive images: The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document.
  • preservesPitch: The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.
  • scripting media query: The scripting CSS media query sets styles based on whether scripting such as JavaScript is available. Values are enabled if scripting is available, initial-only if scripting is only available on page load (for example, printed content), or none.
  • Storage access: The document.requestStorageAccess() method allows content in iframes to request storing and reading cookies and other site data, while the document.hasStorageAccess() method checks if such access is granted.
  • URL.canParse(): The URL.canParse() static method checks whether a URL can be parsed into a valid URL object. It's an alternative to calling new URL() in a try … catch statement.

New in Chrome

The following features are now available in Chrome:

  • Web app origin migration: The migrate_to and migrate_from web app manifest members move an installed app from one origin to another, within the same site. They preserve the user's installation settings on the device, like shortcuts.
  • background-clip: border-area: The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
  • CSSPseudoElement: A CSSPseudoElement object represents a pseudo-element and its context in the document tree. You get an instance through the pseudo() method of Element or CSSPseudoElement objects or the pseudoTarget property of some events.
  • flex-wrap: balance: The flex-wrap: balance CSS declaration distributes items in a multi-line flex container such that each line has about the same number of items.
  • Gap decorations: The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.
  • HTML processing instructions: An HTML processing instruction is text enclosed by <? and >, which marks a target for further processing. They may appear anywhere in a document. They are ignored like comments when they're not recognized for a specific purpose.
  • light-dark() image values: The light-dark() CSS function accepts, in addition to colors, two <image> values, such as a gradient or URL, and uses one depending on the current color scheme.
  • Lazy-loading media: The loading="lazy" attribute for <video> and <audio> elements defers loading the media resource until the element is near the viewport. This matches the lazy-loading behavior for <img> and <iframe> elements.
  • Scroll method promises: The scroll(), scrollBy(), scrollTo(), and scrollIntoView() methods on the Element and Window interfaces return Promises that resolve when scrolling completes.
  • named-feature(): The named-feature() function, when used with @supports, checks if a named CSS behavior is supported. The CSS behavior names are defined by specification. For example, @supports named-feature(anchor-position-follows-transforms) checks whether anchor-positioning applies after transforms."
  • <template for>: The <template for="…"> HTML element replaces the content at a named range or insertion point, marked by the processing instructions <?start name="…"> and <?end> or <?marker name="…">. You can use this to stream or "patch" partial updates into the document out of order.
  • text-fit: The text-fit CSS property scales text to fill the inline size of its container. You can use this to grow or shrink headlines, captions, or pull quotes to fit a container.
  • cross-origin() for url(): The url() CSS function accepts a cross-origin() modifier to control cross-origin resource sharing (CORS) when requesting the URL. For example, url("https://example.com" cross-origin(anonymous))) does not send credentials to the URL.
  • integrity() for url(): The url() CSS function accepts an integrity() modifier to use subresource integrity to verify the response from the requested URL.
  • referrer-policy() for url(): The url() CSS function accepts a referrer-policy() modifier to choose which referrer to send when requesting the URL. For example, `url("https://example.com" referrer-policy(no-referrer)) does not send a referrer to the URL.

New in Chrome Android

The following features are now available in Chrome Android:

  • background-clip: border-area: The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
  • CSSPseudoElement: A CSSPseudoElement object represents a pseudo-element and its context in the document tree. You get an instance through the pseudo() method of Element or CSSPseudoElement objects or the pseudoTarget property of some events.
  • flex-wrap: balance: The flex-wrap: balance CSS declaration distributes items in a multi-line flex container such that each line has about the same number of items.
  • Gap decorations: The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.
  • HTML processing instructions: An HTML processing instruction is text enclosed by <? and >, which marks a target for further processing. They may appear anywhere in a document. They are ignored like comments when they're not recognized for a specific purpose.
  • light-dark() image values: The light-dark() CSS function accepts, in addition to colors, two <image> values, such as a gradient or URL, and uses one depending on the current color scheme.
  • Lazy-loading media: The loading="lazy" attribute for <video> and <audio> elements defers loading the media resource until the element is near the viewport. This matches the lazy-loading behavior for <img> and <iframe> elements.
  • Scroll method promises: The scroll(), scrollBy(), scrollTo(), and scrollIntoView() methods on the Element and Window interfaces return Promises that resolve when scrolling completes.
  • named-feature(): The named-feature() function, when used with @supports, checks if a named CSS behavior is supported. The CSS behavior names are defined by specification. For example, @supports named-feature(anchor-position-follows-transforms) checks whether anchor-positioning applies after transforms."
  • <template for>: The <template for="…"> HTML element replaces the content at a named range or insertion point, marked by the processing instructions <?start name="…"> and <?end> or <?marker name="…">. You can use this to stream or "patch" partial updates into the document out of order.
  • text-fit: The text-fit CSS property scales text to fill the inline size of its container. You can use this to grow or shrink headlines, captions, or pull quotes to fit a container.
  • cross-origin() for url(): The url() CSS function accepts a cross-origin() modifier to control cross-origin resource sharing (CORS) when requesting the URL. For example, url("https://example.com" cross-origin(anonymous))) does not send credentials to the URL.
  • integrity() for url(): The url() CSS function accepts an integrity() modifier to use subresource integrity to verify the response from the requested URL.
  • referrer-policy() for url(): The url() CSS function accepts a referrer-policy() modifier to choose which referrer to send when requesting the URL. For example, `url("https://example.com" referrer-policy(no-referrer)) does not send a referrer to the URL.

New in Edge

The following features are now available in Edge:

  • Web app origin migration: The migrate_to and migrate_from web app manifest members move an installed app from one origin to another, within the same site. They preserve the user's installation settings on the device, like shortcuts.
  • CSSPseudoElement: A CSSPseudoElement object represents a pseudo-element and its context in the document tree. You get an instance through the pseudo() method of Element or CSSPseudoElement objects or the pseudoTarget property of some events.
  • Gap decorations: The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.

New in Firefox

The following features are now available in Firefox:

  • Animation accessors: The animation property of an AnimationEvent or TransitionEvent object is the Animation object that represents the animation (and thus the element) that fired an animation event.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Animation accessors: The animation property of an AnimationEvent or TransitionEvent object is the Animation object that represents the animation (and thus the element) that fired an animation event.