📃 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.
-
font-stretch:
The
font-stretch
CSS property selects a font face from a font family based on width, either by a keyword such ascondensed
or a percentage. -
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 (initial support):
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
andDOMRect
interfaces offer a way to 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 andexport
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()
andscrollBy()
methods change the scroll position of overflow content within an element. Similar to settingscrollTop
andscrollLeft
properties, but with options setting whether the scroll should animate smoothly or jump. Note thatscrollTo()
is an alias forscroll()
. -
scrollIntoView():
The
scrollIntoView()
method scrolls an element's ancestor containers such that the element is visible to the user. -
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
andDOMRect
interfaces offer a way to 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 andexport
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()
andscrollBy()
methods change the scroll position of overflow content within an element. Similar to settingscrollTop
andscrollLeft
properties, but with options setting whether the scroll should animate smoothly or jump. Note thatscrollTo()
is an alias forscroll()
. -
scrollIntoView():
The
scrollIntoView()
method scrolls an element's ancestor containers such that the element is visible to the user. -
navigator.share():
The
navigator.share()
method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets. -
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:
-
WEBGL_debug_shaders WebGL extension:
The
WEBGL_debug_shaders
extension for WebGL 1.0 and 2.0 contexts adds thegetTranslatedShaderSource()
method to debug shaders from privileged contexts.
New in Firefox for Android
The following features are now available in Firefox for Android:
-
WEBGL_debug_shaders WebGL extension:
The
WEBGL_debug_shaders
extension for WebGL 1.0 and 2.0 contexts adds thegetTranslatedShaderSource()
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 aMediaStream
which includes aCanvasCaptureMediaStreamTrack
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. -
DOM Geometry:
The
DOMMatrix
,DOMPoint
,DOMQuad
andDOMRect
interfaces offer a way to 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-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 asfont-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 andexport
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
anddirection
CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use thedir
global HTML attribute and<bdo>
HTML element instead. -
min-content and max-content:
The
min-content
andmax-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()
andWebAssembly.instantiateStreaming()
global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format. - 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()
, andRTCRtpReceiver.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 aMediaStream
which includes aCanvasCaptureMediaStreamTrack
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. -
DOM Geometry:
The
DOMMatrix
,DOMPoint
,DOMQuad
andDOMRect
interfaces offer a way to 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-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 asfont-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 andexport
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
anddirection
CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use thedir
global HTML attribute and<bdo>
HTML element instead. -
min-content and max-content:
The
min-content
andmax-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()
andWebAssembly.instantiateStreaming()
global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format. - 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()
, andRTCRtpReceiver.getStats()
methods return detailed information about the status, performance, network, and media for a given WebRTC connection.