📃 December 2023 release notes

Newly available

The following features are newly 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).
• pow(), sqrt(), hypot(), log(), and exp(): 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.