March 2022 web platform update

Now widely available on the web platform

Widely available

• Intl.PluralRules: The Intl.PluralRules API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number. Learn more.

• Print events: An alternative to @media print queries, the beforeprint and afterprint events allow you to change the page for printing and and restore the page after printing. Learn more.

• Sticky positioning: The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position. Learn more.

• touch-action: The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom. Learn more.

Newly available on the web platform

Newly available

• appearance: The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS. Learn more.

• Array at(): The at() method of arrays and typed arrays returns the item at an index, including negative indices for getting items relative to the end of an array. Also known as the relative indexing method. Learn more.

• ::backdrop: The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath. Learn more.

• background-attachment: The background-attachment CSS property sets whether an element's background image or gradient moves as the element scrolls. Learn more.

• BroadcastChannel: The BroadcastChannel API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs. Learn more.

• Cascade layers: The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components. Learn more.

• Layout containment: The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations. Learn more.

• Paint containment: The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations. Learn more.

• Size containment: The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations. Learn more.

• <dialog>: The <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data. Learn more.

• :focus-visible: The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements. Learn more.

• hardwareConcurrency: The navigator.hardwareConcurrency read-only property returns the number of logical processors available to run threads on the user's computer. Learn more.

• scroll-behavior: The scroll-behavior CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation. Learn more.

• String at(): The at() method of strings returns the character (one UTF-16 code unit) at an index, including negative indices for getting the character relative to the end of the string. Also known as the relative indexing method. Learn more.

• structuredClone(): The structuredClone() global method creates a deep copy of an object. Values that cannot be cloned can instead be transferred, making the original value no longer usable. Learn more.

• text-combine-upright: The text-combine-upright CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism. Learn more.

• text-emphasis: The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages. Learn more.

• 3D transforms: The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms. Learn more.

• Locks: The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks. Learn more.