Baseline features you can use today
Learn about just some of the features that are part of Baseline.
Create Baseline tools with the web-features package
Learn how to use the data in the web-features npm package to create your own Baseline tools!
Feedback wanted: The road to a better layout shift metric for long-lived pages
Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback.
Bitrate
Bitrate is the maximum number of bits used to encode one second of a stream. The more bits used to encode a second of stream, the higher the fidelity.
Bridging the gap
Making it easier to build for the web.
Broadcast updates to pages with service workers
How service workers can proactively communicate with the page to inform about certain events.
Building Chrometober!
How the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.
Build multiple Progressive Web Apps on the same domain
Explore the recommended and not recommended ways of building multiple PWAs reusing the same domain with their advantages and disadvantages.
The Cache API: A quick guide
Learn how to use the Cache API to make your application data available offline.
Control camera pan, tilt, and zoom
Pan, tilt, and zoom features on cameras are finally controllable on the web.
High DPI Canvas
Image filters with canvas
Canvas inspection using Chrome DevTools
Integrating Canvas into your Web App
No tears guide to HTML5 games
Typographic effects in canvas
Everything announced at Chrome Dev Summit 2021
A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.
Choose the right image format
Selecting the right image format is the first step in delivering optimized images on your website. This post helps you to make the right choice.
Choosing the right easing
Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!
Chrome and Firefox soon to reach major version 100
User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.
Clean and maintain your site
This post explains how to clean up your site after it has been hacked.
Click to Call
On devices with phone capabilities, make it easy for users to directly connect with you by simply tapping a phone number, more commonly known as click to call.
Clipboard patterns
A collection of common patterns for dealing with the clipboard.
Cumulative Layout Shift (CLS)
This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.
Address form best practices codelab
Learn best practices for address forms.
Art direction
In this codelab, learn how to load completely different images based on device display size.
Building resilient search experiences with Workbox
How to implement a resilient search experience with Workbox, using Background Sync and the Push API.
Use density descriptors
In this codelab, learn how to use density descriptors and srcset to load images with the right pixel density for the user's device.
Fix sneaky 404s
In this codelab, learn how to track down a sneaky 404 that may prevent your page from being properly indexed.
Make it installable
In this codelab, learn how to make a site installable using the beforeinstallprompt event.
Get started with the Notifications API
In this codelab, learn how to request user permission and send notifications.
Build a push notifications server
In this codelab, learn how to build a push notifications server.
Use a Service Worker to manage notifications
In this codelab, learn how to manage notifications with a service worker.
Payment form best practices codelab
Learn best practices for payment forms.
Same Origin Policy & Fetch requests
In this codelab, learn how the same-origin policy works when fetching resources.
Same Origin Policy & iframe
In this codelab, learn how the same-origin policy works when accessing data inside an iframe.
Creating WebP Images with the Command Line
In this codelab, learn how to serve optimized images using WebP.
Working with service workers
In this codelab, learn how to make an application reliable by registering a service worker.
Specifying multiple slot widths
In this codelab, learn how to use the sizes attribute to size images correctly depending on the user's viewport.
Google Community Guidelines and Anti-Harassment Policy for In-Person and Virtual Events
Community Guidelines
HowTo Components – Overview
HowTo Components
HowTo Components – howto-checkbox
HowTo Components – howto-tabs
HowTo Components – howto-tooltip
Using AVIF to compress images on your site
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.
Use conic gradients to create a cool border
Constructable Stylesheets
Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
Control focus with tabindex
When building custom interactive components, use tabindex to ensure that they're keyboard accessible.
Make your website "cross-origin isolated" using COOP and COEP
Learn how to set up the opt-in-based isolated environment, called cross-origin isolated, with COOP and COEP.
Creative list styling
A look at some useful and creative ways to style a list.
Critical Rendering Path
Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
Defragment cross-domain logins
Learn how to use architectural standards and solutions (such as metadata, cross-origin iframes, identity federation, and subdomain consolidation) to resolve cross-domain identity fragmentation and deliver a seamless user journey.
A guide to enable cross-origin isolation
Cross-origin isolation enables a web page to use powerful features such as SharedArrayBuffer. This article explains how to enable cross-origin isolation on your website.
Custom metrics
Custom metrics let you measure and optimize aspects of your site's experience that are unique to your site.
Working with Custom Elements
How to provide your own in-app install experience
Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.
Breaking down barriers using the DataTransfer API
The DataTransfer object holds data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.
Debug layout shifts
Learn how to identify and fix layout shifts.
Debug media playback errors on the web
Learn how to debug media playback errors on the web.
Deep dive into top web developer pain points
A collection of insights on the top pain points, collected from a number of one to one conversations with web developers.