📅 June 2026 release notes
Newly available
The following features are newly available:
-
field-sizing:
The
field-sizingCSS 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
capCSS length unit corresponds to the height of Latin capital letters. -
counter-set:
The
counter-setCSS 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 anImageBitmapobject from a source such as an image, SVG, blob, or canvas. AnImageBitmapobject represents pixel data that can be drawn to a canvas with lower latency than other types, such asImageData. -
: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(), andexp()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
maskCSS 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
imagesrcsetandimagesizesattributes with therel="preload"attribute for the<link>HTML element starts fetching responsive images before they're found in the body of the document. -
preservesPitch:
The
preservesPitchproperty 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
scriptingCSS media query sets styles based on whether scripting such as JavaScript is available. Values areenabledif scripting is available,initial-onlyif scripting is only available on page load (for example, printed content), ornone. -
Storage access:
The
document.requestStorageAccess()method allows content in iframes to request storing and reading cookies and other site data, while thedocument.hasStorageAccess()method checks if such access is granted. -
URL.canParse():
The
URL.canParse()static method checks whether a URL can be parsed into a validURLobject. It's an alternative to callingnew URL()in atry … catchstatement.
New in Chrome
The following features are now available in Chrome:
-
Web app origin migration:
The
migrate_toandmigrate_fromweb 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-areaCSS declaration draws the background underneath only the border of an element. -
Gap decorations:
The
column-ruleandrow-ruleCSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. Therule-break,rule-outset, andrule-paint-orderproperties control the appearance of these lines. -
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. -
popover="hint":
The
popover="hint"global HTML attribute creates a popover that is subordinate to popovers with apopover="auto"attribute. You can use this to create tooltips that don't dismissautopopovers. -
text-fit:
The
text-fitCSS 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 across-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 anintegrity()modifier to use subresource integrity to verify the response from the requested URL. -
referrer-policy() for url():
The
url()CSS function accepts areferrer-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-areaCSS declaration draws the background underneath only the border of an element. -
Gap decorations:
The
column-ruleandrow-ruleCSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. Therule-break,rule-outset, andrule-paint-orderproperties control the appearance of these lines. -
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. -
popover="hint":
The
popover="hint"global HTML attribute creates a popover that is subordinate to popovers with apopover="auto"attribute. You can use this to create tooltips that don't dismissautopopovers. -
text-fit:
The
text-fitCSS 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 across-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 anintegrity()modifier to use subresource integrity to verify the response from the requested URL. -
referrer-policy() for url():
The
url()CSS function accepts areferrer-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_toandmigrate_fromweb 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. -
Gap decorations:
The
column-ruleandrow-ruleCSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. Therule-break,rule-outset, andrule-paint-orderproperties control the appearance of these lines.