📃 January 2020 release notes

New in Edge

The following features are now available in Edge:

• alignment-baseline: The alignment-baseline CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent.
• Alt text for generated content: The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
• Async clipboard: The navigator.clipboard API asynchronously reads and writes to the system clipboard.
• AudioWorklet: The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
• autocapitalize: The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.
• ::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.
• backdrop-filter: The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.
• Background fetch: Background fetch downloads data in the background even when the web page is closed.
• Background sync: The background synchronization API registers a service worker callback to run only when the device is no longer offline. You can use this to let users continue using your app while offline and synchronize with a server after reconnecting.
• baseline-shift: The baseline-shift CSS property sets the position of an element relative to its dominant baseline.
• Battery status: The navigator.getBattery() API obtains information about the device's battery, including charge level and status. Also known as the Battery API.
• beforeinstallprompt: The beforeinstallprompt event fires when a Progressive Web App (PWA) is installable. You can cancel the event and later call event.prompt() to control when the installation prompt is shown. The appinstalled event fires when the PWA is successfully installed.
• BigInt: The BigInt JavaScript type represents integers of any size, including integers too large for the primitive Number type.
• BigInt64Array: The BigInt64Array and BigUint64Array typed arrays represent 64-bit integers, signed and unsigned respectively.
• BroadcastChannel: The BroadcastChannel API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs.
• 2D canvas opacity: The optional alpha parameter of a 2D canvas's getContext() method sets whether the canvas has an alpha transparency channel. If set to false, then this permits the browser to optimize compositing for an opaque canvas.
• Desynchronized 2D canvas: The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.
• captureStream() for <audio> and <video>: The captureStream() method for <audio> and <video> elements returns a MediaStream for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection.
• clip: The clip CSS property sets the visible area of an absolutely positioned element.
• color-gamut media query: The color-gamut media query sets styles based on the colors a device can display.
• Conic gradients: The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.
• Constructed stylesheets: The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.
• contain: The contain CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The none keyword value disables containment, strict is equivalent to contain: size layout style paint, and content is equivalent to contain: layout style paint.
• 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.
• 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.
• 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.
• Style containment: The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.
• 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.
• 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.
• CSS typed object model: The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.
• Cursor styles: The cursor CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.
• 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.
• Device memory: The navigator.deviceMemory property is the approximate amount of device memory, in gigabytes.
• <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.
• dirname: The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission.
• Element timing: The element performance entry and the PerformanceElementTiming API measures the time to render elements that have the elementtiming attribute.
• enterkeyhint: The enterkeyhint global HTML attribute sets the label for a virtual keyboard's Enter key. For example, enterkeyhint="search" may label the key with a magnifying glass icon.
• Event timing: The event and first-input performance entries and the PerformanceEventTiming API measures the latency of user input events, such as mouse clicks or keypresses. They're used to calculate Interaction to Next Paint (INP), a common metric for perceived responsiveness.
• EXT_color_buffer_float WebGL extension: The EXT_color_buffer_float extension for WebGL 2.0 contexts adds color-renderable floating point formats to renderbufferStorage().
• EXT_float_blend WebGL extension: The EXT_float_blend extension for WebGL 1.0 and 2.0 contexts adds 32-bit floating-point components to blending and draw buffers.
• Federated credentials: The FederatedCredential API represents the details required to authenticate a user using a third-party identity provider. Not to be confused with federated credential management (FedCM).
• fit-content: The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.
• System font: The font-family: system-ui CSS declaration uses the operating system default font for text.
• Forced colors: The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
• Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
• Fullscreen API: The fullscreen API makes a specific element fill the whole screen and hides most browser UI.
• Gamepad haptic feedback: The gamepad.vibrationActuator property represents a gamepad's haptics hardware, which allows you to control the vibration motors in a gamepad.
• Gyroscope: The Gyroscope API reads the angular velocity of a device in three dimensions.
• Hashbang comments: The #! comment at the absolute start of a script or module is treated as a normal comment and is ignored by the JavaScript engine.
• :host-context(): The :host-context() CSS pseudo-class selects the containing element of the shadow tree in which it is used if that element or an ancestor matches the provided selector.
• image-rendering: The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.
• IndexedDB: The IndexedDB API is a local storage transactional object database.
• inputmode: The inputmode global HTML attribute gives a hint about what type of data is to be entered into an <input> element, such as text, numeric, or email, so the browser may help the user enter data using an adapted input mechanism, such as an on-screen virtual keyboard.
• 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.
• Intl.ListFormat: The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.
• Intl.Locale: The Intl.Locale API parses Unicode locale identifiers, with language, region, and script codes, such as zh-Hans-CN or en-GB.
• Intl.RelativeTimeFormat: The Intl.RelativeTimeFormat API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.
• Keyboard lock: The navigator.keyboard.lock() API allows you to capture keys that are normally reserved by the operating system. It can be used to provide an immersive fullscreen experience such as games.
• Keyboard map: The navigator.keyboard.getLayoutMap() API returns a map from key codes to human readable key names. It can be used to describe buttons to the user when using the keyboard as a set of buttons, such as in games.
• KHR_parallel_shader_compile WebGL extension: The KHR_parallel_shader_compile extension for WebGL 1.0 and 2.0 contexts checks the status of shader compilation without blocking the runtime.
• Largest contentful paint (LCP): The largest-contentful-paint performance entry and the LargestContentfulPaint API measures the time it takes for the largest image or text to appear. Largest contentful paint (LCP) is a common metric for perceived loading times.
• <link rel="dns-prefetch">: The rel="dns-prefetch" attribute for the <link> HTML element is a hint to the browser that the page or user is likely to request resources from another domain, so the browser should preemptively resolve DNS for the href value's domain.
• <link rel="preload">: The rel="preload" attribute for the <link> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.
• 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.
• Long tasks: The longtask performance event type and the PerformanceLongTaskTiming API provides information about tasks that occupy the UI thread for 50 milliseconds or more, a metric for input latency, delayed animations, and other sources of "jank."
• Web app manifest: A web app manifest file provides metadata about the site. The browser can use the metadata to install the site as a standalone application on the user's device. The metadata usually includes the app's name, icon, description, and ways in which the app wishes to integrate with the device.
• 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.
• MediaStream recording: The MediaRecorder API captures data generated by MediaStream or HTMLMediaElement objects for analysis, processing, or saving to disk. Also known as the Media Recording API.
• 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.
• <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.
• Motion path: The offset CSS property animates an element along a defined motion path.
• Numeric factory functions: The numeric factory functions, such as CSS.px() or CSS.kHz(), return a CSSUnitValue representing a CSS number value (as in 12px or 440kHz).
• Numeric separators: To improve readability for numeric literals, underscores (_) can be used as separators. For example, 1_050.95 is equivalent to 1050.95.
• Offscreen canvas: The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.
• 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.
• overflow-anchor: The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.
• overflow: The overflow CSS property sets the behavior for when content doesn't fit in an element.
• Page lifecycle: The page lifecycle API helps you safely handle page suspensions or discards from memory. The freeze and resume events fire when the browser suspends or resumes a page from memory while the document.wasDiscarded property reports whether the page was reloaded after being dropped.
• Page setup: The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.
• paint(): The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.
• Paint timing: The paint performance entry and the PerformancePaintTiming API measures the duration of "paint" (also called "render") operations as a page loads. The API measures the time to First Paint (FP) and First Contentful Paint (FCP), common metrics for perceived loading times.
• Password credentials: The PasswordCredential API represents a username and password.
• Payment handler: The payment handler API registers a web application as a payment handler and responds to payment requests in the browser's user interface, rather than redirecting users to a separate site to complete a payment.
• Permissions: The navigator.permissions API checks whether a permission, such as access to geolocation data, has been granted.
• 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.
• 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.
• Presentation API: The Presentation API shows or controls content on another display, such as a network-connected TV or projector.
• Promise.allSettled(): The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject).
• Q unit: The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.
• queueMicrotask(): The queueMicrotask() method schedules a function to run after the currently running synchronous JavaScript finishes but before returning to the event loop.
• registerProtocolHandler: The navigator.registerProtocolHandler() method declares a site's ability to handle an address scheme (also known as a protocol). For example, an email site can register to open mailto: URLs or a VoIP site to open tel: URLs.
• 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.
• requestIdleCallback(): The requestIdleCallback() API queues a function that runs in idle browser time, either at the end of a frame or when the user is inactive. Also known as the background tasks API.
• resize (CSS property): The resize CSS property sets whether an element can be resized by the user, and on which axes.
• Resize observer: The ResizeObserver API observes and reacts to changes in the size of DOM elements.
• resolution media query: The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.
• Save-Data: Browsers send the Save-Data HTTP request header when the user turns on a data-saving mode. It is a hint to reduce data sent to the browser. Servers should respond with alternative content, such as smaller images and videos, or different markup and styling.
• Screen capture: The navigator.mediaDevices.getDisplayMedia() method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream.
• 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.
• 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.
• Scroll methods on elements: The scroll() and scrollBy() methods change the scroll position of overflow content within an element. Similar to setting scrollTop and scrollLeft properties, but with options setting whether the scroll should animate smoothly or jump. Note that scrollTo() is an alias for scroll().
• Serializable errors: The DOMException, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError objects are serializable. You can call structuredClone() on an error object or pass it to a worker using postMessage().
• Server timing: The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests.
• Shadow parts: The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
• SharedArrayBuffer and Atomics: The SharedArrayBuffer object represents bytes shared between multiple workers and the main thread. The Atomics object safely accesses SharedArrayBuffer data to make sure predictable values are read and written and that operations are not interrupted.
• Shared worker: The SharedWorker() constructor runs a script in its own thread, which can send and receive messages with other scripts running at the same origin.
• steps() easing: The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.
• Storage manager: The navigator.storage API provides information about the availability and persistence of the data that a site stores on the device, by using APIs such as the Cache API or the IndexedDB API.
• Streams: The streams API creates, composes, and consumes continuously generated data.
• tab-size: The tab-size CSS property sets the width of the tab character.
• 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.
• text-decoration-line: blink: The text-decoration: blink CSS declaration flashes text between visible and invisible.
• text-orientation: The text-orientation CSS property sets the how text is typeset within a line when the writing mode is vertical.
• text-size-adjust: The text-size-adjust CSS property disables or modifies the browser's default text size adjustment for small screen sizes.
• Time-relative pseudo-selectors: The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.
• translate: The translate HTML attribute marks whether an element's text should be translated.
• 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.
• user-select: The user-select CSS property controls which elements can be selected by the user.
• Vibration: The navigator.vibrate() method makes a tactile alert, if the device is equipped with a haptic motor.
• Visual viewport API: The visualViewport API provides a way to query and modify the user-visible viewport of a web page.
• Bulk memory operations (WebAssembly): Bulk memory operations, such as copy and init, mirror the efficiency of native memcpy and memmove operations.
• Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.
• Threads and atomics (WebAssembly): Threads in WebAssembly run code in parallel, while atomic memory instructions can guarantee that no two threads can read or write to shared memory at the same time.
• Web Bluetooth: The Web Bluetooth API enables selecting and communicating with nearby Bluetooth devices.
• Locks: The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.
• Web MIDI: The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages.
• WEBGL_compressed_texture_etc WebGL extension: The WEBGL_compressed_texture_etc extension for WebGL 1.0 and 2.0 contexts adds many ETC2 and EAC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
• WEBGL_compressed_texture_etc1 WebGL extension: The WEBGL_compressed_texture_etc1 extension for WebGL 1.0 and 2.0 contexts adds the ETC1 compressed texture format to compressedTexImage2D() and compressedTexSubImage2D().
• WEBGL_debug_shaders WebGL extension: The WEBGL_debug_shaders extension for WebGL 1.0 and 2.0 contexts adds the getTranslatedShaderSource() method to debug shaders from privileged contexts.
• Desynchronized WebGL canvas: The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL canvas independently of the event loop. This can reduce drawing latency.
• SharedArrayBuffer in WebGL: SharedArrayBuffer objects can be used in WebGL APIs that previously only worked with ArrayBuffer objects.
• WebGL2: The WebGL2RenderingContext API is the "webgl2" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.
• Desynchronized WebGL2 canvas: The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL2 canvas independently of the event loop. This can reduce drawing latency.
• WebRTC SCTP information: The sctp object on RTCPeerConnection represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that RTCDataChannel uses.
• WebUSB: The WebUSB API exposes USB compatible devices to web pages.
• WebXR: The navigator.xr API represents the browser's virtual reality or augmented reality system. You can use to request a WebXR session.
• Gamepad (WebXR): The gamepad attribute of an XRInputSource represents an XR input device, such as a motion controller, that reports data from physical inputs (such as buttons, touch pads, and triggers).