📃 March 2018 release notes

Widely available

The following features are now widely available:

Animations (CSS): The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.
Channel messaging: Channel messaging communicates one-to-one between browsing contexts on the same origin, such as between <iframe> elements or two documents using a shared worker.
CSS object model: The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.
Flexbox: Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.
HTTP/2: The HTTP/2 protocol is a major revision of the HTTP network protocol, providing improved performance and efficiency by using a single TCP connection to send multiple streams of data at once.
Performance: The performance global object and the Performance API provide access to performance-related information for the current execution context.
String codePointAt() and fromCodePoint(): The codePointAt() method returns the numeric value of the UTF-16 code point at an index of the string. The fromCodePoint() method returns a string created from one or more code points.
String includes(): The includes() method of strings returns whether a search string appears within the string.
String raw(): The String.raw() static method interpolates template literal substitutions, but ignores escape sequences. It is the tag function for template literals.
String repeat(): The repeat() method of strings returns the original string repeated a number of times.
String startsWith() and endsWith(): The startsWith() and endsWith() methods of strings returns whether a search string appears at the beginning or end of the provided string.
@supports: The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
Symbol: A Symbol value is a unique, non-enumerable primitive value used for encapsulation or information hiding. For example, a symbol can be a key of an object that can never collide with any other key.
2D transforms: The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
Transitions (CSS): The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.
Unicode point escapes: Unicode point escapes (\\u{}) represent Unicode characters within strings.
WeakSet: A WeakSet object stores unique values of any type without creating strong references to the values, such that membership in the set does not prevent garbage collection of the value.
word-break: The word-break CSS property sets how lines break within words.

New in Chrome

The following features are now available in Chrome:

Device memory: The navigator.deviceMemory property returns the approximate amount of device memory, in gigabytes.
HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
Link selectors: The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.
paint(): The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.
RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.
Save-Data: Browsers send the Save-Data HTTP request header when the user turns on a data-saving mode. It is a hint to reduce data sent to the browser. Servers should respond with alternative content, such as smaller images and videos, or different markup and styling.
Server timing: The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests.

New in Chrome Android

The following features are now available in Chrome Android:

Device memory: The navigator.deviceMemory property returns the approximate amount of device memory, in gigabytes.
HSL: The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
Link selectors: The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.
paint(): The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.
RGB: The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.
Save-Data: Browsers send the Save-Data HTTP request header when the user turns on a data-saving mode. It is a hint to reduce data sent to the browser. Servers should respond with alternative content, such as smaller images and videos, or different markup and styling.
Server timing: The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests.

New in Firefox

The following features are now available in Firefox:

overscroll-behavior: The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.
Pointer Events: Pointer events, such as pointerdown, and the PointerEvent API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the pointer-events CSS property.
Sticky positioning: The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.
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 Firefox for Android

The following features are now available in Firefox for Android:

overscroll-behavior: The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.
Sticky positioning: The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.
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:

Beacons: The navigator.sendBeacon() method asynchronously sends an HTTP POST request with a limited amount of data, typically for app state, events, and analytics data. The one-way beacon is guaranteed to be initiated before the browser unloads the page, but the sender does not get to handle the response.
caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input.
COLRv0: COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.
Destructuring: The destructuring assignment syntax is a JavaScript expression that unpacks values from arrays, or properties from objects, into distinct variables.
document.elementFromPoint() and document.elementsFromPoint(): The document.elementFromPoint() and document.elementsFromPoint() methods find the top-most element at a given point in the viewport, or all elements at a given point in the viewport, respectively.
font-display: The font-display CSS descriptor sets whether to show a substitute font or nothing while a font face loads. The property manages what's known as a flash of unstyled text or flash of invisible text.
<link rel="preconnect">: The rel="preconnect" attribute for the <link> HTML element is a hint to the browser that the page or user is likely to request resources from another origin, so the browser should preemptively start a connection to the href value's origin.
<link rel="preload">: The rel="preload" attribute for the <link> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.
Optional catch binding: Omit the the binding parameter of a catch clause when you don't need information about the exception in a try ... catch statement.
Payment request: The PaymentRequest API prompts the user to make a payment through the browser's user interface.
Promise finally(): The promise finally() method executes a function when the promise settles (resolves or rejects).
Safe area inset environment variables: The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.
Service workers: The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.
speak-as: The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules.
Spread syntax: The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.
Storage access: The document.requestStorageAccess() method allows content in iframes to request storing and reading cookies and other site data, while the document.hasStorageAccess() method checks if such access is granted.