Month: June 2021

Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback. Jan 25, 2021 Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a web page. The metric is called cumulative layout shift because the score of every individual shift is summed throughout the lifespan of the Read More

Supercharging your CSS with Houdini paint worklets is just a few clicks away. Dec 10, 2020 CSS Houdini is an umbrella term that describes a series of low-level browser APIs that give developers much more control and power over the styles they write. Houdini enables more semantic CSS with the Typed Object Model. Developers can Read More

An SXG is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered. Oct 14, 2020• Updated Apr 21, 2021 A signed exchange (SXG) is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered. Read More

Nov 25, 2020 This codelab teaches you how to build an experience like Instagram Stories on the web. We’ll build the component as we go, starting with HTML, then CSS, then JavaScript. Check out my blog post Building a Stories component to learn about the progressive enhancements made while building this component. This post assumes Read More

How we used code splitting, code inlining, and server-side rendering in PROXX. Sep 23, 2019• Updated May 19, 2021 At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability Read More

A foundational overview of how to build an experience similar to Instagram Stories on the web. Nov 25, 2020 In this post I want to share thinking on building a Stories component for the web that is responsive, supports keyboard navigation, and works across browsers. Demo If you would prefer a hands-on demonstration of building Read More

Show stakeholders how site speed improvements can increase revenue. Jun 13, 2019• Updated Jun 7, 2021 Appears in: Fast load times After a lot of hard work, you’ve done it. You’ve made your company’s site noticeably faster. Now it’s time for the fun part: showing stakeholders how much extra revenue your work has generated! In Read More

Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions. Oct 14, 2020 With responsive design evolving and becoming increasingly nuanced, CSS itself is constantly evolving and providing authors increased control. The min(), max(), and clamp() functions, now supported in all modern browsers, are among the latest Read More

Jun 11, 2019• Updated Jun 1, 2021 Appears in: Web Vitals|Metrics Jun 1, 2021: The implementation of CLS has changed. To learn more about the reasons behind the change, check out Evolving the CLS metric. Key Term: Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how Read More

New logical property shorthands and new inset properties for Chromium. Oct 13, 2020 Since Chromium 69 (September 3rd 2018), logical properties and values have helped developers maintain control of their international layouts through logical, rather than physical, direction and dimension styles. In Chromium 87, shorthands and offsets have shipped to make these logical properties and Read More