Building a Better Web with Lighthouse
What's new in Lighthouse. Redesign, new best practice audits, and an online report viewer.
lighthouse
tools
performance
progressive-web-apps
URL Bar Resizing
Hiding the URL bar no longer resizes mobile pages.
Chrome DevTools: JavaScript CPU Profiling in Chrome 58
"Record JavaScript CPU Profile" has been changed in Chrome 58.
API Deprecations and Removals in Chrome 56
A round up of the deprecations and removals in Chrome 56 to help you plan.
deprecations
removals
chrome56
position:sticky is back in Chrome
After a long time absent from Chrome, position:sticky is back.
Take Photos and Control Camera Settings
Image Capture is an API to control camera settings and take photos.
canvas
chrome56
chrome61
media
webrtc
Performant Parallaxing
When used judiciously paralaxing can add of depth and subtlety to a web app.
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.
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!
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.
DevTools Digest, October 2016
New Console features, updates on the context selector bug, and the new UC Browser user agent.
Manage Hyphens with CSS
Chrome 55 implements the hyphens property to control when soft hyphens appear and how they behave.
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.
API Deprecations and Removals in Chrome 55
A round up of the deprecations and removals in Chrome to help you plan.
deprecations
removals
chrome55
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.
canvas
chrome53
gif
media
security
webrtc
Once Upon an Event Listener
Using {once: true}
, available in Chrome 55, gives you an easy way to define "one and done" event listeners.
Touch Action Options
Touch action is a simple way to define how a user can interact with an element.
auxclick is Coming to Chrome 55
auxclick
takes the place of the click
event for non-primary mouse buttons, starting in Chrome 55.
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.
chrome54
new-in-chrome
media
webcomponents
broadcast
foreignfetch
fullscreen
serviceworker
origintrials
ResizeObserver: It’s Like document.onresize for Elements
ResizeObserver lets you know when an element has changed its size.
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.
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".
API Deprecations and Removals in Chrome 54
An round up of the deprecations and removals in Chrome to help you plan.
deprecations
removals
chrome54
Cross-origin Service Workers: Experimenting with Foreign Fetch
Third-party services can start deploying their own network request handlers.
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.
DevTools Digest, September 2016: Perf Roundup
Perf tooling improvements in DevTools over the last few Chrome releases.
Options of a PushSubscription
You can now access the options used when subscribing a user to push.
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.
Intervening against document.write()
Chrome is blocking some scripts that are added using document.write()
.
Web Animations API Hits Cross-browser Milestone
Firefox 48 joins Chrome in shipping a native implementation of the Web Animations API.
API Deprecations and Removals in Chrome 53
A round up of the deprecations and removals in Chrome to help you plan.
deprecations
removals
chrome53
DevTools Digest, August 2016
What happened to the Resources panel, new features, and community activity.
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.
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.
canvas
chrome53
gif
media
security
webrtc
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.
Offline Google Analytics Made Easy
The sw-offline-google-analytics library gives you everything you need.
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.
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!
chrome52
chrome55
storage
persistentstorage
localstorage
indexeddb
origintrials
Goodbye Short Sessions: A Proposal for Using Service Workers to Improve Cookie Management on the Web
Introducing a proof of concept design to persist sessions using the Service Worker.
identity
sessions
cookie
serviceworker
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.
chrome52
media
security
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.
css
flexbox
chrome52
absolute-positioned
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.
audio
chrome52
media
recording
video
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.
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.
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.
performance
events
chrome52
javascript
DevTools Digest: DevTools in 2016 and Beyond
Big themes and trends for DevTools in 2016 and beyond.
Improving Scroll Performance with Passive Event Listeners
New to Chrome 51, passive event listeners provide a major potential boost to scroll performance.
performance
events
chrome51
javascript
scroll
touch
Stream Your Way to Immediate Responses
Start processing your service worker responses ASAP, thanks to ReadableStreams.
performance
chrome52
streams
serviceworker
Houdini: Demystifying CSS
Houdini is a collection of APIs that expose the CSS engine’s internals to developers
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.
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.
IntersectionObserver’s Coming into View
IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
API Deprecations and Removals in Chrome 51
An round up of the deprecations and removals in Chrome to help you plan.
deprecations
removals
chrome51
What’s New with KeyboardEvents? Keys and Codes!
Two new attributes bring consistent keyboard event handling to the web.
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
Experiment Time: Scroll Anchoring
Scroll anchoring stops a web page from moving once you've started reading the content.
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.
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.
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.
news
iot
webbluetooth
physicalweb
edison
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.
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.
audio
chrome50
media
mse
recording
video
webrtc
chrome50
API Deprecations and Removals in Chrome 50
An round up of the deprecations and API removals in Chrome to help you plan.
deprecations
removals
chrome50
Web Animations Improvements in Chrome 50
Better specification compliance and new features coming in Chrome 50.
webanimations
chrome50
chrome51
Canvas toBlob() Support Added in Chrome 50
Support for canvas.toBlob set to land in Chrome 50.
images
performance
workers
chrome50
Chrome Supports createImageBitmap() in Chrome 50
Support for image decoding in workers set to land in Chrome 50.
images
performance
workers
chrome50
DOMTokenList Validation Added in Chrome 50
Check support for various features directly in code, coming in Chrome 50.
domtokenlist
validation
chrome50
FormData Methods for Inspection and Modification
In Chrome 50, you can now interact with your FormData instances before sending them on their journey.
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.
Web Push Payload Encryption
Web Push now supports payloads! Find out how to take advantage of this powerful new feature.
notifications
webpush
payload
encryption
chrome50
Device Orientation Changes Are Coming to Chrome 50
DeviceOrientationEvent uses relative degrees, and there's a new DeviceOrientationAbsoluteEvent.
Prioritizing Your Resources with link rel='preload'
Chrome 50 adds support for rel='preload'
, and deprecates rel='subresource'
link
preload
performance
chrome50
HTMLMediaElement.play() Returns a Promise
Say goodbye to automatic playback uncertainty! play()
now returns a Promise.
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.
devtools
digest
update
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.
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.
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!
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.
API Deprecations and Removals in Chrome 49
An round up of the deprecations and API removals in Chrome to help you plan.
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.
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.
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.
audio
codecs
media
news
recording
video
webrtc
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.
audio
codecs
media
news
video
vp9
webrtc
Notification Actions in Chrome 48
Users can interact with your site without opening up the page by using Notification Action buttons
High Resolution Timestamps for Events
Find out when events occur with microsecond precision, thanks to DOMHighResTimeStamp.
Easy URL Manipulation with URLSearchParams
URLSearchParams trivial access and manipulation of the URL's query string