January 2020 web platform update

Newly available on the web platform

Newly available

• Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it. Learn more.

• Async generators: Async generator functions (async function*) create iterators that return multiple promises, one after another, on-demand. Learn more.

• Autonomous custom elements: Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define. Learn more.

• <bdi>: The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text. Learn more.

• caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input. Learn more.

• Credential management: The navigator.credentials API provides generic storage for authentication credentials. Other credential APIs represent specific kinds of credentials, such as password or public key credentials, that the credential management API stores. Learn more.

• :default: The :default CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the checked attribute. Learn more.

• <details>: The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible. Learn more.

• <embed>: The <embed> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash. Learn more.

• font-display: The font-display CSS descriptor sets whether to show a substitute font or nothing while a font face loads. The property manages what's known as a flash of unstyled text or flash of invisible text. Learn more.

• font-kerning: The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters. Learn more.

• font-variant-caps: The font-variant-caps CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles. Learn more.

• font-variant-east-asian: The font-variant-east-asian CSS property controls glyph substitution and sizing in East Asian text. Learn more.

• font-variant-ligatures: The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons. Learn more.

• font-variant-numeric: The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash. Learn more.

• HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels. Learn more.

• srcdoc: The srcdoc attribute for the <iframe> HTML element sets a string of HTML to embed in the document. The value of srcdoc overrides loading a document from the src attribute. Learn more.

• :indeterminate: The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked. Learn more.

• prefers-color-scheme media query: The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark. Learn more.

• prefers-reduced-motion media query: The prefers-reduced-motion CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing. Learn more.

• RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels. Learn more.

• Safe area inset environment variables: The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone. Learn more.

• Shadow DOM: Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components. Learn more.

• <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup. Learn more.

• Stable array sort: Stable array sort() function Learn more.

• String matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups. Learn more.

• String trimStart() and trimEnd(): The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string. Learn more.

• WebRTC: The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications. Learn more.

• will-change: The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes. Learn more.