2023
30 featuresThe 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.
The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
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.
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.
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.
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.
The reset() method clears a canvas to its initial state.
The cap CSS length unit corresponds to the height of Latin capital letters.
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.
CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.
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.
The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
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.
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.
The rlh CSS length unit is a font-relative length relative to the line height of root element.
The navigator.userActivation API reveals whether the user has interacted with the page through an "activation" gesture such as a click, tap, or key press. User activation gated APIs (such as the fullscreen API) fail without user interaction, and this API allows you to predict such a failure.
The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.
The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
The getAuthenticatorData(), getPublicKey(), and getPublicKeyAlgorithm() methods of AuthenticatorAttestationResponse access credential data inside attestationObject without the need to parse it.
The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
WAI-ARIA attributes have corresponding properties on Element and ElementInternals objects.
The <search> HTML element is a container that represents the parts of the web page with search functionality.
The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.
The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.
The update CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. For example, you can avoid animations on devices that aren't fast enough to display them smoothly.
The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.
The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.