CSS color-scheme-dependent colors with light-dark()
description: Define colors that react to the used color-scheme with the light-dark() function.
Loading WebAssembly modules efficiently
When working with WebAssembly, you often want to download a module, compile it, instantiate it, and then use whatever it exports in JavaScript. This post explains our recommended approach for optimal efficiency.
Are long JavaScript tasks delaying your Time to Interactive?
Learn to diagnose costly, work-preventing user interaction.
Media Source Extensions
Media Source Extensions (MSE) is a JavaScript API that lets you build streams for playback from segments of audio or video.
CSS min(), max(), and clamp()
Min, max, and clamp provide powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.
The <model-viewer> web component
The <model-viewer> web component lets you use 3D models on a web page declaratively.
Preload modules
Module preload offers a way of declaratively loading JavaScript modules ahead of time.
Monitor and analyze the app
What tools to use to keep track of and analyze the webpack bundle
The new responsive: Web design in a component-driven world
User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us to usehr in a new era of responsive web design.
Use web workers to run JavaScript off the browser's main thread
The browser's main thread is incredibly overworked. By using web workers to shift code off the main thread, you can significantly improve your app's reliability and user experience.
Ten modern layouts in one line of CSS
This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
Optimize CSS background images with media queries
Use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images.
JavaScript Start-up Optimization
Keep your network transmission and parse/compile cost for JavaScript low to ensure pages get interactive quickly.
Precaching in Create React App with Workbox
Workbox is built into Create React App with a default configuration that precaches all static assets in your application with every build.
Precaching with the Angular service worker
Learn how to use the Angular service worker to precache the static assets in your app.
prefers-reduced-motion: Sometimes less movement is more
The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often prefer animations to be kept to a minimum.
Pre-render routes with react-snap
react-snap is a third-party library that pre-renders pages on your site into static HTML files. This can improve First Paint times in your application.
JavaScript Promises: an introduction
Promises simplify deferred and asynchronous computations. A promise represents an operation that hasn't completed yet.
Photoshop's journey to the web
Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a publi
Read files in JavaScript
How to select files, read file metadata and content, and monitor read progress.
Reduce JavaScript payloads with tree shaking
Knowing where to begin optimizing your application's JavaScript can be daunting. If you're taking advantage of modern tooling such as webpack, however, tree shaking might be a good place to start!
Registering a web-based payment app
Learn how to register a web-based payment app to a customers' browser. You'll also learn how to debug them.
Remove unused code
Analyze your JavaScript bundle to detect and remove unused code.
ResizeObserver: it's like document.onresize for elements
`ResizeObserver` notifies you when an element's content rectangle changes size so that you can react accordingly.
Route-level code splitting in Angular
Learn how to make your initial app bundle smaller by using route-level code splitting.
Route prefetching in Next.js
Same-origin policy
A browser can load and display resources from multiple sites. If there is no restriction on interactions between those resources, and if a script is compromised by an attacker, the script could expose everything on a user's browser.
Safe DOM manipulation with the Sanitizer API
The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page.
Script evaluation and long tasks
When loading scripts, it takes time for the browser to evaluate them prior to execution, which can cause long tasks. Learn how script evaluation works, and what you can do to keep it from causing long tasks during page load.
Semantics and screen readers
Assistive technologies rely on developers using semantic HTML. But what are semantics, and how do screen readers use them?
Introduction to ARIA
Introduction to ARIA and non-native HTML semantics
Service workers and the Cache Storage API
The browser's HTTP cache is your first line of defense. It's not necessarily the most powerful or flexible approach, and you have limited control over the lifetime of cached responses. But there are several rules of thumb that give you a sensible caching implementation without much work, so you should always try to follow them.
Shadow DOM 101
Shadow DOM 201
Shadow DOM 301
Shadow DOM v1 - Self-Contained Web Components
Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components
Getting Started with CSS Shapes
Sign-in form best practices
Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
Towards an animation smoothness metric
Learn about measuring animations, how to think about animation frames, and overall page smoothness.
Static memory javascript with Object Pools
Speedy CSS Tip! Animated Gradient Text
Speedy CSS Tip! Animated Loader
Storage for the web
There are many different options for storing data in the browser. Which one is best for your needs?
Screensharing a browser tab in HTML5?
Streams — The definitive guide
The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired.
Deep-copying in JavaScript using structuredClone
For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with `structuredClone()`, a built-in function for deep-copying.
Boldly link where no one has linked before: Text Fragments
Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and/or bring it to the user's attention.
The amazing powers of CSS
Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
Introducing Trusted Types: a browser API to prevent DOM-based cross-site scripting in modern web applications.
The UI fund
Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.
Understanding CSS filter effects
Make use of long-term caching
How webpack helps with asset caching
Introduction to variable fonts on the web
How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.
Virtualize large lists with the Angular CDK
Learn how to make large lists more responsive by implementing virtual scrolling with the Angular Component Dev Kit.
Virtualize large lists with react-window
react-window is a library that allows large lists to be rendered efficiently.
Virtual reality comes to the web
Virtual reality came to the web in Chrome 79. Based on the WebXR Devicer API, this launch is the foundation for both augmented and virtual reality. This article is the first in a series, exploring basic concepts and describing how to enter an XR session. Other browsers will soon be supporting the WebXR Device API, including Firefox Reality, Oculus Browser, Edge and Magic Leap's Helio browser, amon
Virtual reality comes to the web, part II
Virtual reality came to the web in Chrome 79. Based on the WebXR Device API, this launch is the foundation for both augmented and virtual reality. This article is the second in a series, focusing on the frame loop, the part of an XR session where images are shown to a viewer. Other browsers will soon be supporting the WebXR Device API, including Firefox Reality, Oculus Browser, Edge and Magic Leap
Extending the browser with WebAssembly
WebAssembly lets us extend the browser with new features. This article shows how to port the AV1 video decoder and play AV1 video in any modern browser.
Web Components v1 - the next generation
Web Components are gaining cross-browser support, the community is growing in leaps and bounds, and there’s a brand-new Web Component catalog to find exactly the component you need.
