Web Updates (2016)

Building a Better Web with Lighthouse

What's new in Lighthouse. Redesign, new best practice audits, and an online report viewer.

Read more

Tags: lighthouse tools performance progressive-web-apps

URL Bar Resizing

Hiding the URL bar no longer resizes mobile pages.

Read more

Tags: chrome56 android ux

Chrome DevTools: JavaScript CPU Profiling in Chrome 57

Now that "Record JavaScript CPU Profile" has been removed from Chrome 57, here's how to profile your JS in DevTools.

Read more

Tags: devtools chrome57

API Deprecations and Removals in Chrome 56

A round up of the deprecations and removals in Chrome 56 to help you plan.

Read more

Tags: deprecations removals chrome56

position:sticky is back in Chrome

After a long time absent from Chrome, position:sticky is back.

Read more

Tags: performance css style

Take Photos and Control Camera Settings

Image Capture is an API to control camera settings and take photos.

Read more

Tags: canvas chrome56 media webrtc

Performant Parallaxing

When used judiciously paralaxing can add of depth and subtlety to a web app.

Read more

Tags: performance parallax css 3d style

New In Chrome 55

With Chrome 55, you can write promise-based code as if it were synchronous, using async and await. PointerEvents provide a unified way of handling all input events. And persistent storage graduates from it’s origin trial.

Read more

Tags: chrome55 new-in-chrome pointerevents async await persistentstorage

Get Ready for the Chrome Dev Summit 2016

Chrome Dev Summit 2016 is coming Thursday, Nov 10th and 11th. This year's summit will focus on key themes that matter to you: Progressive, to build high quality web apps; Performance, to increase user engagement; and What's Next, a look at how the Chrome team is thinking about the future of the web. Learn how you can tune in and see what's going on!

Read more

Tags: chromedevsummit news video announcement

Avoiding the Not Secure Warning in Chrome

Chrome will soon mark non-secure pages containing password and credit card input fields as Not Secure in the URL bar. This document is intended to aid Web Developers in updating their sites to avoid this warning.

Read more

Tags: chrome56 security autofill

Manage Hyphens with CSS

Chrome 55 implements the hyphens property to control when soft hyphens appear and how they behave.

Read more

Tags: chrome55 css

DevTools Digest, October 2016

New Console features, updates on the context selector bug, and the new UC Browser user agent.

Read more

Tags: devtools chrome56

Touch Action Options

Touch action is a simple way to define how a user can interact with an element.

Read more

Tags: chrome55 input

Pointing the Way Forward

Pointer events unify the pointer input model for the browser, bringing touch, pens, and mice together into a single set of events.

Read more

Tags: chrome55 input

Once Upon an Event Listener

Using {once: true}, available in Chrome 55, gives you an easy way to define "one and done" event listeners.

Read more

Tags: chrome55 events

Introducing the Web Share API

Sharing is caring. Chrome is running an Origin Trial to enable native sharing on the web called Web Share that allows websites to invoke the native sharing capabilities of the host platform.

Read more

Tags: chrome55 sharing android origintrials

Capture a MediaStream From a Canvas, Video or Audio Element

The captureStream() method makes it possible to capture a MediaStream from a canvas, video or audio element.

Read more

Tags: canvas chrome53 gif media security webrtc

API Deprecations and Removals in Chrome 55

A round up of the deprecations and removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome55

auxclick is Coming to Chrome 55

auxclick takes the place of the click event for non-primary mouse buttons, starting in Chrome 55.

Read more

Tags: chrome55 input

New In Chrome 54

With Chrome 54, you can now create your own custom HTML tag with and make re-usable web components with Custom Elements v1; it’s easier to send messages between open windows or tabs on the same origin with the BroadcastChannel API; media experience get better on Android and foreign fetch is now available as an origin trial.

Read more

Tags: chrome54 new-in-chrome media webcomponents broadcast foreignfetch fullscreen serviceworker origintrials

Updates to developers.google.com/web

We recently made some big changes to WebFundamentals, improving navigation, adding lots of new content, and making it easier for you to contribute.

Read more

ResizeObserver: It’s Like document.onresize for Elements

ResizeObserver lets you know when an element has changed its size.

Read more

Tags: chrome54

Re-rastering Composited Layers on Scale Change

Starting in Chrome 53, all content is re-rastered when its transform scale changes, if it does not have the will-change: transform CSS property. In other words, will-change: transform means "please animate it fast".

Read more

Tags: css webanimations chrome53

API Deprecations and Removals in Chrome 54

An round up of the deprecations and removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome54

Cross-origin Service Workers: Experimenting with Foreign Fetch

Third-party services can start deploying their own network request handlers.

Read more

Tags: chrome54 origintrials serviceworker cors fetch

CacheQueryOptions Arrive in Chrome 54

The full set of CacheQueryOptions are supported, making it easier to find the cached responses you're looking for.

Read more

Tags: chrome54 serviceworker cache

Options of a PushSubscription

You can now access the options used when subscribing a user to push.

Read more

Tags: webpush

DevTools Digest, September 2016: Perf Roundup

Perf tooling improvements in DevTools over the last few Chrome releases.

Read more

Tags: devtools

BroadcastChannel API: A Message Bus for the Web

The BroadcastChannel API allows same-origin scripts to send messages to other browsing contexts. It can be thought of as a simple message bus that allows pub/sub semantics between windows/tabs, iframes, web workers, and service workers.

Read more

Tags: broadcast messaging chrome54

Intervening against document.write()

Chrome is blocking some scripts that are added using document.write().

Read more

Tags: interventions chrome55

Web Animations API Hits Cross-browser Milestone

Firefox 48 joins Chrome in shipping a native implementation of the Web Animations API.

Read more

Tags: webanimations

API Deprecations and Removals in Chrome 53

A round up of the deprecations and removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome53

DevTools Digest, August 2016

What happened to the Resources panel, new features, and community activity.

Read more

Tags: devtools

Bringing Easy and Fast Checkout with Payment Request API

Payment Request is a new API for the open web that makes checkout flows easier, faster and consistent.

Read more

Tags: javascript payment

Web Push Interoperability Wins

Web push has had a few updates in recent versions of Chrome. GCM now supports the web push protocol and if you use VAPID you won't need to sign up for a Google Developer Project and you'll be given an FCM endpoint.

Read more

Tags: webpush notifications

Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and Animated GIFs!

Muted autoplay for video is supported on Android from Chrome 53. Previously, a video element required a user gesture to initiate playback.

Read more

Tags: canvas chrome53 gif media security webrtc

Offline Google Analytics Made Easy

The sw-offline-google-analytics library gives you everything you need.

Read more

Tags: serviceworker analytics offline indexeddb

Complexities of an Infinite Scroller

Infinite scrollers are a common UI pattern. Here we explore how to implement this pattern in a memory conservative way that performs at 60fps.

Read more

Tags: javascript css

Persistent Storage

With Chrome 52, we’re introducing the ability to make storage persistent. Storage for web applications is a complex topic, and persistence for data on the frequently - ephemeral web doubly so!

Read more

Tags: chrome52 chrome55 storage persistentstorage localstorage indexeddb origintrials

Introducing a proof of concept design to persist sessions using the Service Worker.

Read more

Tags: identity sessions cookie serviceworker

Service Worker Caching, PlaybackRate and Blob URLs for Audio and Video on Chrome for Android

From version 52, Android Chrome uses the same media stack as desktop Chrome, rather than relying on the underlying platform implementation. This enables service worker media caching, variable playback rates, blob URLs on Android, MediaStream passing between APIs, and easier cross-platform debugging.

Read more

Tags: audio chrome52 media recording video webrtc

Flexbox Gets New Behavior for absolute-positioned Children

A previous version of the CSS Flexible Box Layout specification set the static position of absolute-positioned children as though they were a flex item whose size is 0px by 0px. The latest version of the spec takes them fully out of flow and sets the static position based on align and justify properties.

Read more

Tags: css flexbox chrome52 absolute-positioned

ECDSA for WebRTC: Better Security, Better Privacy and Better Performance

From version 52, Chrome uses ECDSA by default — a much more efficient and secure algorithm for WebRTC certificate key generation. In addition, RTCCertificates can now be stored with IndexedDB.

Read more

Tags: chrome52 media security webrtc

CSS Containment in Chrome 52

The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work.

Read more

Tags: performance chrome52 layout paint style containment

API Deprecations and Removals in Chrome 52

An round up of the deprecations and removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome52

Performance Observer: Efficient Access to Performance Data

The W3C Performance Timeline specification defines an interface for browsers to provide programmatic access to low level timing data. This opens the door to some interesting use cases like custom performance analysis, third party tools and more.

Read more

Tags: performance events chrome52 javascript

DevTools Digest: DevTools in 2016 and Beyond

Big themes and trends for DevTools in 2016 and beyond.

Read more

Tags: devtools

Stream Your Way to Immediate Responses

Start processing your service worker responses ASAP, thanks to ReadableStreams.

Read more

Tags: performance chrome52 streams serviceworker

Improving Scroll Performance with Passive Event Listeners

New to Chrome 51, passive event listeners provide a major potential boost to scroll performance.

Read more

Tags: performance events chrome51 javascript scroll touch

Houdini: Demystifying CSS

Houdini is a collection of APIs that expose the CSS engine’s internals to developers

Read more

Tags: houdini css

Geolocation API Removed from Unsecured Origins in Chrome 50

Starting with version 50, Chrome no longer supports the HTML5 Geolocation API over non-secure connections.

Read more

Tags: geolocation removals chrome50

DevTools Digest: More Power with the New Command Menu

Read about DevTools' new command menu and its over 60 actions that enable crazy fast workflows.

Read more

Tags: devtools digest update

IntersectionObserver’s Coming into View

IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

Read more

Tags: intersectionobserver chrome51

API Deprecations and Removals in Chrome 51

An round up of the deprecations and removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome51

What’s New with KeyboardEvents? Keys and Codes!

Two new attributes bring consistent keyboard event handling to the web.

Read more

Tags: uievents input chrome51

Streamlining the Sign-in Flow Using Credential Management API

To provide a sophisticated user experience, it's important to help users authenticate themselves to your website. But creating, remembering and typing passwords tends to be cumbersome for end users, especially on mobile

Read more

Tags: credentials sign-in chrome51

Experiment Time: Scroll Anchoring

Scroll anchoring stops a web page from moving once you've started reading the content.

Read more

Tags: interventions scroll-anchoring

Access USB Devices on the Web

The WebUSB API makes USB safer and easier to use by bringing it to the Web.

Read more

Tags: news webusb iot arduino origintrials

A New Device Mode for a Mobile-First Generation

Learn all about Chrome DevTools' new, refreshed Device Mode introduced in Chrome 49.

Read more

Tags: devtools update chrome49

Creating a Web-Enabled IoT Device with Intel Edison

Internet of Things is really on everyone's lips these days, but what if you could create an IoT device which you accessed from your web browser? In this article we look at how you can do exactly that using Physical Web, Web Bluetooth as well as Node.js, running on an Intel® Edison Arduino breakout board.

Read more

Tags: news iot webbluetooth physicalweb edison

Web Animations Improvements in Chrome 50

Better specification compliance and new features coming in Chrome 50.

Read more

Tags: webanimations chrome50 chrome51

Removing Headaches from Focus Management

The 'sequential focus navigation starting point' feature defines where we start to search for focusable elements for sequential focus navigation ([Tab] or [Shift-Tab]) when there is no focused area. It's especially helpful for accessibility features like skip links and managing focus in the document.

Read more

Tags: accessibility focus chrome50

Media Source API: Automatically Ensure Seamless Playback of Media Segments in Append Order

The Media Source API enables JavaScript to construct media streams for playback. From Chrome 50, it's possible to use SourceBuffer sequence mode to ensure media segments are automatically relocated in the timeline in the order they were appended, without gaps between them.

Read more

Tags: audio chrome50 media mse recording video webrtc chrome50

FormData Methods for Inspection and Modification

In Chrome 50, you can now interact with your FormData instances before sending them on their journey.

Read more

Tags: forms formdata input chrome50

DOMTokenList Validation Added in Chrome 50

Check support for various features directly in code, coming in Chrome 50.

Read more

Tags: domtokenlist validation chrome50

Chrome Supports createImageBitmap() in Chrome 50

Support for image decoding in workers set to land in Chrome 50.

Read more

Tags: images performance workers chrome50

Canvas toBlob() Support Added in Chrome 50

Support for canvas.toBlob set to land in Chrome 50.

Read more

Tags: images performance workers chrome50

API Deprecations and Removals in Chrome 50

An round up of the deprecations and API removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome50

Web Push Payload Encryption

Web Push now supports payloads! Find out how to take advantage of this powerful new feature.

Read more

Tags: notifications webpush payload encryption chrome50

Web Notification Improvements in Chrome 50: Icons, Close Events, Renotify Preferences and Timestamps

There are lots of great new features in Chrome 50 for Notifications, here is a rundown.

Read more

Tags: notifications chrome50

Chrome 50 adds support for rel='preload', and deprecates rel='subresource'

Read more

Tags: link preload performance chrome50

Device Orientation Changes Are Coming to Chrome 50

DeviceOrientationEvent uses relative degrees, and there's a new DeviceOrientationAbsoluteEvent.

Read more

Tags: orientation chrome50

HTMLMediaElement.play() Returns a Promise

Say goodbye to automatic playback uncertainty! play() now returns a Promise.

Read more

Tags: promises play video audio chrome50

Supercharged Remote Debugging, Class Toggles and Our Own Late Night Show?!

Learn all about the revamped “Inspect Devices” UI, toggle classes easily in the now-fixed style panel and watch the pilot of DevTools Tonight.

Read more

Tags: devtools digest update chrome49

Delivering Fast and Light Applications with Save-Data

The new Save-Data client hint request header available in Chrome, Opera, and Yandex browsers enables developers to deliver fast and light applications to users who have opted-in to 'data savings' mode in their browser.

Read more

Tags: savedata clienthints chrome49

DevTools Go Dark, @keyframe Editing and Smarter Autocomplete

Learn how DevTools makes you type less with smarter Console autocomplete, how to edit @keyframe rules directly in the Styles pane, how to have fun with CSS Custom Variables and how to join the dark side.

Read more

Tags: devtools digest update chrome49

Web Audio Updates in Chrome 49

A round up of some of the latest editions to the Web Audio API in Chrome.

Read more

Tags: webaudio media chrome49

Smooth Scrolling in Chrome 49

Tired of jittery scrolling? Great, because Chrome 49 is shipping with a new smooth scroll right out of the box!

Read more

Tags: scroll chrome49

Introducing ES2015 Proxies

ES2015 Proxies (in Chrome 49 and later) provide JavaScript with an intercession API, enabling us to trap or intercept all of the operations on a target object and modify how this target operates.

Read more

Tags: javascript es2015 chrome49

API Deprecations and Removals in Chrome 49

An round up of the deprecations and API removals in Chrome to help you plan.

Read more

Tags: deprecations removals chrome49

Controlling Font Performance with font-display

The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending on how long it takes for them to load.

Read more

Tags: css fonts chrome49

CSS Variables: Why Should You Care?

CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. They can be useful for reducing repetition in CSS, and also for powerful runtime effects like theme switching and potentially extending/polyfilling future CSS features.

Read more

Tags: css chrome49

VP9 Is Now Available in WebRTC

From Chrome 48 on desktop and Android, VP9 will be an optional video codec for video calls using WebRTC.

Read more

Tags: audio codecs media news video vp9 webrtc

Record Audio and Video with MediaRecorder

The MediaRecorder API enables you to record audio and video from a web app. It's available now in Firefox and in Chrome for Android and desktop.

Read more

Tags: audio codecs media news recording video webrtc chrome49

Notification Actions in Chrome 48

Users can interact with your site without opening up the page by using Notification Action buttons

Read more

Tags: notifications

High Resolution Timestamps for Events

Find out when events occur with microsecond precision, thanks to DOMHighResTimeStamp.

Read more

Tags: events performance chrome49

Easy URL Manipulation with URLSearchParams

URLSearchParams trivial access and manipulation of the URL's query string

Read more

Tags: url chrome49

Subscribe