Web platform features explorer

📃 March 2020 release notes

Newly available

The following features are newly available:

  • font-optical-sizing: The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
  • 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.
  • Opacity (SVG): The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.
  • overflow: The overflow CSS property sets the behavior for when content doesn't fit in an element.
  • 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.
  • Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.

Widely available

The following features are now widely available:

  • Brotli compression: Brotli is a lossless data compression algorithm. When used as a content encoding, it often provides better compression than gzip.
  • Intl: The Intl API provides language sensitive string comparison, number formatting, date and time formatting, and more.
  • Media capture: The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras.
  • Resource timing: PerformanceResourceTiming entries report when network events happen while loading a resource, such as when connections start and end. You can use this information to measure loading times.

New in Firefox

The following features are now available in Firefox:

  • text-underline-position: The text-underline-position CSS property sets the position of underlines on text. For example, text-underline-position: under places the underline below the text, avoiding crossing descenders. The underline may be further adjusted by the text-underline-offset property.

New in Safari

The following features are now available in Safari:

  • Async clipboard: The navigator.clipboard API asynchronously reads and writes to the system clipboard.
  • clip-path: The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.
  • Clip path boxes: The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
  • dynamic-range media query: The dynamic-range CSS media query sets styles based on whether a device can display at least standard range colors or at least high range colors. Non-visual devices will match neither.
  • 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.
  • UI fonts: The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text.
  • image-orientation: The image-orientation CSS property corrects the rotation of an image using the image's metadata, such as EXIF.
  • 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.
  • 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.
  • Remote playback: The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities.
  • Resize observer: The ResizeObserver API observes and reacts to changes in the size of DOM elements.
  • 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.
  • String replaceAll(): The replaceAll() method of strings returns a new string where all matches of a pattern (a string or regular expression) have been substituted with a replacement string.
  • tab-size: The tab-size CSS property sets the width of the tab character.
  • transform-box: The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.
  • Multi-value (WebAssembly): Instructions and blocks can produce multiple result values.
  • 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().

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Async clipboard: The navigator.clipboard API asynchronously reads and writes to the system clipboard.
  • Clip path boxes: The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
  • dynamic-range media query: The dynamic-range CSS media query sets styles based on whether a device can display at least standard range colors or at least high range colors. Non-visual devices will match neither.
  • 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.
  • UI fonts: The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text.
  • image-orientation: The image-orientation CSS property corrects the rotation of an image using the image's metadata, such as EXIF.
  • 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.
  • 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.
  • Remote playback: The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities.
  • Resize observer: The ResizeObserver API observes and reacts to changes in the size of DOM elements.
  • 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.
  • String replaceAll(): The replaceAll() method of strings returns a new string where all matches of a pattern (a string or regular expression) have been substituted with a replacement string.
  • tab-size: The tab-size CSS property sets the width of the tab character.
  • transform-box: The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.
  • Multi-value (WebAssembly): Instructions and blocks can produce multiple result values.
  • 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().