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

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.

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.