Web platform features explorer

📃 September 2017 release notes

Newly available

The following features are newly 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 Chrome

The following features are now available in Chrome:

  • CSS.supports(): The CSS.supports() static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an @supports at-rule condition string.
  • DOM Geometry: The DOMMatrix, DOMPoint, DOMQuad and DOMRect APIs represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.
  • JavaScript modules: JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.
  • 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().
  • 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.
  • Visual viewport API: The visualViewport API provides a way to query and modify the user-visible viewport of a web page.
  • WebUSB: The WebUSB API exposes USB compatible devices to web pages.

New in Chrome Android

The following features are now available in Chrome Android:

  • CSS.supports(): The CSS.supports() static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an @supports at-rule condition string.
  • DOM Geometry: The DOMMatrix, DOMPoint, DOMQuad and DOMRect APIs represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.
  • JavaScript modules: JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.
  • 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().
  • navigator.share(): The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets. Also known as the Web Share API.
  • 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.
  • Visual viewport API: The visualViewport API provides a way to query and modify the user-visible viewport of a web page.
  • WebUSB: The WebUSB API exposes USB compatible devices to web pages.

New in Firefox

The following features are now available in Firefox:

  • <meter>: The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.
  • 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.
  • 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.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • <meter>: The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.
  • 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.
  • 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.

New in Safari

The following features are now available in Safari:

  • captureStream() for <canvas>: The captureStream() method for <canvas> elements returns a MediaStream which includes a CanvasCaptureMediaStreamTrack representing real-time video of the canvas image. You can use this to record the canvas, or send it elsewhere, such as another canvas or WebRTC connection.
  • CSS.supports(): The CSS.supports() static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an @supports at-rule condition string.
  • 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.
  • Document colors: A document's bgColor, fgColor, alinkColor, linkColor, and vlinkColor properties get and set the background, foreground, active link, link, and visited link colors of that document.
  • document.write(): The document.open(), document.write(), document.writeln(), and document.close() methods write content to a document, possibly while that document is still loading.
  • DOM Geometry: The DOMMatrix, DOMPoint, DOMQuad and DOMRect APIs represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.
  • 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.
  • font-stretch: The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.
  • font-variation-settings: The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
  • JavaScript modules: JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.
  • Layout direction override: The unicode-bidi and direction CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the dir global HTML attribute and <bdo> HTML element instead.
  • min-content and max-content: The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.
  • Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container.
  • Template literals: Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
  • WebAssembly: The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.
  • Web Cryptography: The Web Cryptography API performs low-level cryptographic operations, such as encryption, decryption, and signature verification. Also known as the Web Crypto API.
  • WebRTC: The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.
  • WebRTC statistics: The RTCPeerConnection.getStats(), RTCRtpSender.getStats(), and RTCRtpReceiver.getStats() methods return detailed information about the status, performance, network, and media for a given WebRTC connection.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • captureStream() for <canvas>: The captureStream() method for <canvas> elements returns a MediaStream which includes a CanvasCaptureMediaStreamTrack representing real-time video of the canvas image. You can use this to record the canvas, or send it elsewhere, such as another canvas or WebRTC connection.
  • CSS.supports(): The CSS.supports() static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an @supports at-rule condition string.
  • Document colors: A document's bgColor, fgColor, alinkColor, linkColor, and vlinkColor properties get and set the background, foreground, active link, link, and visited link colors of that document.
  • document.write(): The document.open(), document.write(), document.writeln(), and document.close() methods write content to a document, possibly while that document is still loading.
  • DOM Geometry: The DOMMatrix, DOMPoint, DOMQuad and DOMRect APIs represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.
  • 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.
  • font-stretch: The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.
  • font-variation-settings: The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
  • JavaScript modules: JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.
  • Layout direction override: The unicode-bidi and direction CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the dir global HTML attribute and <bdo> HTML element instead.
  • min-content and max-content: The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.
  • Scroll snap: CSS scroll snap controls the panning and scrolling behavior within a scroll container.
  • Template literals: Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
  • WebAssembly: The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.
  • Web Cryptography: The Web Cryptography API performs low-level cryptographic operations, such as encryption, decryption, and signature verification. Also known as the Web Crypto API.
  • WebRTC: The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.
  • WebRTC statistics: The RTCPeerConnection.getStats(), RTCRtpSender.getStats(), and RTCRtpReceiver.getStats() methods return detailed information about the status, performance, network, and media for a given WebRTC connection.