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.

• Autonomous custom elements: Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define. 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.

• :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: The prefers-color-scheme CSS media query detects the requested color scheme, light or dark. 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.

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

Now available in Edge

Limited availability

• Accelerometer: The Accelerometer and LinearAccelerationSensor APIs read the acceleration applied to a device in three dimensions, either including the effect of gravity or not, respectively. Learn more.

• backdrop-filter: The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element. Learn more.

• Background fetch: Background fetch downloads data in the background even when the web page is closed. Learn more.

• BigInt: The BigInt JavaScript type represents integers of any size, including integers too large for the primitive Number type. 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.

• Conic gradients: The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point. Learn more.

• Constructed stylesheets: The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets. Learn more.

• controlslist: The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen. Learn more.

• Customized built-in elements: Customized built-in elements are HTML elements that extend built-in elements using the is attribute, to add new behaviors that you define. 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.

• dirname: The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission. Learn more.

• Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API. Learn more.

• Fullscreen API: The fullscreen API makes a specific element fill the whole screen and hides most browser UI. Learn more.

• Grid: CSS Grid is a two-dimensional layout system, which lays content out in rows and columns. Learn more.

• Gyroscope: The Gyroscope API reads the angular velocity of a device in three dimensions. Learn more.

• Hyphenation: The hyphens CSS property controls when long words are broken by line wrapping. Although called hyphens, the property applies to word-splitting behavior across languages, such as customary spelling changes or the use of other characters to mark an intraword line break. Learn more.

• input event: The input event fires when a form control changes or an element with the contenteditable attribute changes. Learn more.

• Intersection observer visibility tracking: The trackVisibility parameter for the IntersectionObserver constructor enables tracking the visibility of an element, to detect if it may be obscured by other content or visual effects. Also known as IntersectionObserver v2. 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.

• Media session: The navigator.mediaSession API integrates with platform UI for media playback. It can be used to set metadata such as title and artwork, and to handle user actions like playing, pausing, or seeking. Learn more.

• min(), max(), and clamp(): The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range. Learn more.

• <link rel="modulepreload">: The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution. Learn more.

• Orientation Sensor: The AbsoluteOrientationSensor and RelativeOrientationSensor APIs describe the physical orientation of a device in three-dimensional space, either in relation to the Earth's coordinate system or in relation to the device's own orientation, respectively. Learn more.

• paint(): The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border. Learn more.

• Permissions: The navigator.permissions API checks whether a permission, such as access to geolocation data, has been granted. Learn more.

• Picture-in-picture (video): The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video. 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.

• Promise.allSettled(): The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject). Learn more.

• requestAnimationFrame() in workers: The requestAnimationFrame() method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker. Learn more.

• Screen orientation: The screen.orientation API gets information about the orientation of the viewport, such as landscape or portrait. With this API, you can adapt an application's layout or behavior in response to changes in orientation. Learn more.

• scrollIntoView(): The scrollIntoView() method scrolls an element's ancestor containers such that the element is visible to the user. Learn more.

• Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container. Learn more.

• Server timing: The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests. Learn more.

• Streams: The streams API creates, composes, and consumes continuously generated data. Learn more.

• translate attribute: The translate HTML attribute marks whether an element's text should be translated. Learn more.

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

• Visual viewport API: The visualViewport API provides a way to query and modify the user-visible viewport of a web page. Learn more.

• Web animations: The web animations API allows you to animate and synchronize the animations of DOM elements. Learn more.

• Web Bluetooth: The Web Bluetooth API enables selecting and communicating with nearby Bluetooth devices. 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.

• Web MIDI: The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages. Learn more.

• WebRTC SCTP information: The sctp object on RTCPeerConnection represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that RTCDataChannel uses. Learn more.

• WebUSB: The WebUSB API exposes USB compatible devices to web pages. Learn more.

Now available in Firefox

Limited availability

• Individual transform properties: Transform elements with separate translate, rotate, and scale CSS properties. Learn more.

• Motion path: The offset CSS property animates an element along a defined motion path. Learn more.