Web platform features explorer

📃 April 2021 release notes

Newly available

The following features are newly available:

  • AudioWorklet: The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • Flexbox gap: The gap CSS property in a flexbox layout sets the size of the space between items.
  • Date and time <input> types: The <input type="date"> and <input type="time"> HTML elements show date and time pickers.
  • Intl.DisplayNames: The Intl.DisplayNames API provides localized names of language, region, script, and currency codes.
  • Intl.ListFormat: The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.
  • 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.
  • OES_fbo_render_mipmap WebGL extension: The OES_fbo_render_mipmap extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.
  • OfflineAudioContext: The OfflineAudioContext API represents an audio processing graph that writes to an AudioBuffer instead of an output device.
  • 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.
  • Quotes: The quotes CSS property sets the quotation marks inserted via the content CSS property or <q> element.
  • BigInt to i64 conversion (WebAssembly): Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.
  • Sign extension operators (WebAssembly): Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.
  • Web Audio: The Web Audio API creates graphs of audio nodes that handle sound inputs, synthesize sounds, apply effects, create visualizations, and output to audio devices.

Widely available

The following features are now widely available:

  • <meter>: The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.
  • <output>: The <output> element represents the result of a calculation, user action, or form entry.
  • overflow-wrap: The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.
  • Promise finally(): The promise finally() method executes a function when the promise settles (resolves or rejects).
  • resolution media query (compatibility prefixes): The -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, and -webkit-max-device-pixel-ratio CSS media queries are standardized compatibility alternatives to resolution media queries.
  • tabindex: The tabindex HTML attribute make an element focusable, and sets the element's relative ordering for sequential focus navigation.

New in Chrome

The following features are now available in Chrome:

  • overflow: clip: The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.
  • User agent client hints: The Sec-CH-UA HTTP request header and the navigator.userAgentData API expose browser and platform information used to vary responses and application logic. User agent client hints are similar to user agent strings but more privacy-preserving and safer to parse.
  • Depth sensing: An XRDepthInformation object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.
  • Lighting estimation: The XRLightProbe and XRLightEstimate objects represent real-world environmental lighting conditions during a WebXR session.

New in Chrome Android

The following features are now available in Chrome Android:

  • overflow: clip: The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.
  • User agent client hints: The Sec-CH-UA HTTP request header and the navigator.userAgentData API expose browser and platform information used to vary responses and application logic. User agent client hints are similar to user agent strings but more privacy-preserving and safer to parse.
  • Depth sensing: An XRDepthInformation object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.
  • Lighting estimation: The XRLightProbe and XRLightEstimate objects represent real-world environmental lighting conditions during a WebXR session.

New in Edge

The following features are now available in Edge:

  • overflow: clip: The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.
  • User agent client hints: The Sec-CH-UA HTTP request header and the navigator.userAgentData API expose browser and platform information used to vary responses and application logic. User agent client hints are similar to user agent strings but more privacy-preserving and safer to parse.
  • Depth sensing: An XRDepthInformation object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.
  • Lighting estimation: The XRLightProbe and XRLightEstimate objects represent real-world environmental lighting conditions during a WebXR session.

New in Firefox

The following features are now available in Firefox:

  • display: ruby: The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.
  • HTTP/3: HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.
  • outline: The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
  • :user-valid and :user-invalid: The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • display: ruby: The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.
  • HTTP/3: HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.
  • outline: The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
  • :user-valid and :user-invalid: The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.

New in Safari

The following features are now available in Safari:

  • autocorrect: The autocorrect global HTML attribute controls whether to automatically correct spelling or punctuation errors for user input.
  • 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.
  • EXT_texture_compression_rgtc WebGL extension: The EXT_texture_compression_rgtc extension for WebGL 1.0 and 2.0 contexts adds RGTC compressed texture formats. RGTC is a block-based texture compression format suited for unsigned and signed red and red-green textures. Also known as Red-Green Texture Compression.
  • Individual transform properties: The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.
  • Intl.Segmenter: The Intl.Segmenter API creates a locale-aware text splitter that can separate a string into meaningful graphemes, words, or sentences.
  • 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.
  • PerformanceTiming and PerformanceNavigation: The window.performance.timing and window.performance.navigation APIs report performance timing information for events that occur during the loading and use of the current page.
  • prefers-contrast media query: The prefers-contrast CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.
  • Streams: The streams API creates, composes, and consumes continuously generated data.
  • WEBGL_compressed_texture_s3tc_srgb WebGL extension: The WEBGL_compressed_texture_s3tc_srgb extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats for the sRGB colorspace to compressedTexImage2D() and compressedTexSubImage2D().
  • WebVTT cue alignment: The WebVTT cue alignment settings control which part of the cue is aligned with the given line and position. Cue alignment is set using line and position settings in WebVTT files or the lineAlign and positionAlign properties of VTTCue using JavaScript.
  • WebVTT regions: WebVTT regions set the areas of the video where captions or subtitles should be rendered, such as placing roll-up captions used for live captions.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • autocorrect: The autocorrect global HTML attribute controls whether to automatically correct spelling or punctuation errors for user input.
  • Individual transform properties: The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.
  • Intl.Segmenter: The Intl.Segmenter API creates a locale-aware text splitter that can separate a string into meaningful graphemes, words, or sentences.
  • 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.
  • PerformanceTiming and PerformanceNavigation: The window.performance.timing and window.performance.navigation APIs report performance timing information for events that occur during the loading and use of the current page.
  • prefers-contrast media query: The prefers-contrast CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.
  • Streams: The streams API creates, composes, and consumes continuously generated data.
  • WEBGL_compressed_texture_s3tc_srgb WebGL extension: The WEBGL_compressed_texture_s3tc_srgb extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats for the sRGB colorspace to compressedTexImage2D() and compressedTexSubImage2D().
  • WebVTT cue alignment: The WebVTT cue alignment settings control which part of the cue is aligned with the given line and position. Cue alignment is set using line and position settings in WebVTT files or the lineAlign and positionAlign properties of VTTCue using JavaScript.
  • WebVTT regions: WebVTT regions set the areas of the video where captions or subtitles should be rendered, such as placing roll-up captions used for live captions.