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

  • <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: The overflow CSS property sets the behavior for when content doesn't fit in an element.
  • 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: The overflow CSS property sets the behavior for when content doesn't fit in an element.
  • 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: The overflow CSS property sets the behavior for when content doesn't fit in an element.
  • 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:

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

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

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

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