December 2023 web platform update

Newly available on the web platform

Newly available

• Canvas reset(): The reset() method clears a canvas to its initial state. Learn more.

• cap unit: The CSS cap unit corresponds to the height of Latin capital letters. Learn more.

• 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. Learn more.

• :dir(): The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr). Learn more.

• pow(), sqrt(), hypot(), log(), and exp(): The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions. Learn more.

• :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element. Learn more.

• 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. Learn more.

• 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. Learn more.

• Masks: The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image. Learn more.

• Nesting: CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others. Learn more.

• 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. Learn more.

• 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. Learn more.

• 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. Learn more.

• 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. Learn more.

• 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. Learn more.