Web platform features explorer

📃 April 2018 release notes

Newly available

The following features are newly available:

  • 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.
  • EXT_blend_minmax WebGL extension: The EXT_blend_minmax extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.
  • isSecureContext: The isSecureContext global property is a boolean for whether the current browsing context is secure. This is primarily a check that the page has been served over an HTTPS URL.
  • OES_vertex_array_object WebGL extension: The OES_vertex_array_object extension for WebGL 1.0 contexts adds vertex array objects (VAOs) which encapsulate vertex array states. These objects keep pointers to vertex data and names for different sets of vertex data.
  • 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.
  • Upgrade insecure requests: The Upgrade-Insecure-Requests HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.
  • WEBGL_lose_context WebGL extension: The WEBGL_lose_context extension for WebGL 1.0 and 2.0 contexts simulates losing and restoring a WebGLRenderingContext or WebGL2RenderingContext.

New in Chrome

The following features are now available in Chrome:

  • Abortable fetch: If you construct a fetch request with an AbortSignal, you can cancel the request.
  • AbortController and AbortSignal: The AbortController and AbortSignal APIs allow you to cancel an ongoing operation, such as a fetch() request.
  • Array iterators: Arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().
  • AudioWorklet: The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
  • autocapitalize: The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.
  • CSS typed object model: The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.
  • ImageBitmapRenderingContext: The ImageBitmapRenderingContext API is the "bitmaprenderer" rendering context for the <canvas> element. It is commonly used to transfer frames from an OffscreenCanvas to a user-visible <canvas> element.
  • inputmode: The inputmode global HTML attribute gives a hint about what type of data is to be entered into an <input> element, such as text, numeric, or email, so the browser may help the user enter data using an adapted input mechanism, such as an on-screen virtual keyboard.
  • <link rel="modulepreload">: The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
  • Numeric factory functions: The numeric factory functions, such as CSS.px() or CSS.kHz(), return a CSSUnitValue representing a CSS number value (as in 12px or 440kHz).
  • 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.
  • String trimStart() and trimEnd(): The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string.

New in Chrome Android

The following features are now available in Chrome Android:

  • Abortable fetch: If you construct a fetch request with an AbortSignal, you can cancel the request.
  • AbortController and AbortSignal: The AbortController and AbortSignal APIs allow you to cancel an ongoing operation, such as a fetch() request.
  • Array iterators: Arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().
  • AudioWorklet: The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
  • autocapitalize: The autocapitalize global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.
  • CSS typed object model: The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.
  • ImageBitmapRenderingContext: The ImageBitmapRenderingContext API is the "bitmaprenderer" rendering context for the <canvas> element. It is commonly used to transfer frames from an OffscreenCanvas to a user-visible <canvas> element.
  • inputmode: The inputmode global HTML attribute gives a hint about what type of data is to be entered into an <input> element, such as text, numeric, or email, so the browser may help the user enter data using an adapted input mechanism, such as an on-screen virtual keyboard.
  • <link rel="modulepreload">: The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
  • Numeric factory functions: The numeric factory functions, such as CSS.px() or CSS.kHz(), return a CSSUnitValue representing a CSS number value (as in 12px or 440kHz).
  • 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.
  • String trimStart() and trimEnd(): The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string.

New in Edge

The following features are now available in Edge:

  • EXT_color_buffer_half_float WebGL extension: The EXT_color_buffer_half_float extension for WebGL 1.0 and 2.0 contexts renders 16-bit floating-point color buffers.
  • font-optical-sizing: The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
  • 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.
  • ping: The ping attribute for <a> elements sets a URL to send a POST request to when the <a> is clicked. This is typically used for outbound link reporting.
  • Push messages: The Push API subscribes to and receives server-initiated messages. Subscribers receive pushed messages in the background, even after periods inactive or offline.
  • Resource size: The decodedBodySize, encodedBodySize, and transferSize properties of the PerformanceResourceTiming API reports the size of resources loaded.
  • WEBGL_color_buffer_float WebGL extension: The WEBGL_color_buffer_float extension for WebGL 1.0 contexts adds the 32-bit floating-point type RGBA32F as a color-renderable format.
  • WEBGL_draw_buffers WebGL extension: The WEBGL_draw_buffers extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.

New in Safari

The following features are now available in Safari:

  • 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.
  • Fetch upload streams: A fetch() request uploads a stream of data to the server when a request's body property is a ReadableStream object.
  • 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.
  • ImageBitmapRenderingContext: The ImageBitmapRenderingContext API is the "bitmaprenderer" rendering context for the <canvas> element. It is commonly used to transfer frames from an OffscreenCanvas to a user-visible <canvas> element.
  • <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.
  • 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.