Google Chrome application icon on Apple
Chris Grant (he/him) March 09, 2023 A 3 minute read

Chrome 111: What’s new and what it means for web developers

Google Chrome has released its latest version, Chrome 111, bringing new features and enhancements for web developers. In this post, we’ll take a closer look at the most important updates in Chrome 111 and how they can improve the web development experience.

  1. CSS subgrid support

One of the most significant changes in Chrome 111 is the support for CSS subgrid. This new feature allows developers to create nested grids within existing grid containers, providing a more flexible and powerful grid layout system.

With CSS subgrid, developers can now create complex grid layouts that were not previously possible, such as a card-based layout with varying heights and widths. This feature also simplifies the code required to create such layouts, making it easier to maintain and update the code.

  1. Declarative Shadow DOM

Chrome 111 also introduces declarative Shadow DOM, which simplifies the creation and management of Shadow DOM trees. Shadow DOM allows developers to encapsulate their code and styles, ensuring that they don’t interfere with other parts of the page.

With declarative Shadow DOM, developers can define Shadow DOM trees using HTML-like syntax, making it easier to read and understand the code. This feature also allows for better tooling and editor support, improving the development workflow.

  1. Resize Observer

The Resize Observer API is a new feature in Chrome 111 that allows developers to detect changes to an element’s size and position. This can be useful for implementing responsive designs and dynamic layouts, where the content of the page changes based on the size of the viewport or the device orientation.

With Resize Observer, developers can observe changes to the size of an element and trigger actions based on those changes. This feature is particularly useful for responsive images, where different sizes of an image can be loaded based on the available space on the page.

  1. New Web Vitals API

Web Vitals are a set of metrics that measure the performance and user experience of a web page. Chrome 111 introduces a new Web Vitals API, which makes it easier for developers to collect and report on these metrics.

With the new Web Vitals API, developers can track key metrics such as page load time, interactivity, and visual stability. This can help identify performance issues and improve the user experience of a web page.

  1. Other updates

Chrome 111 also includes several other updates and improvements, including:

  • New CSS line clamp property for truncating text.
  • The color-scheme CSS property now supports “light” and “dark” values.
  • The Intl.DateTimeFormat API now supports the “nu” option for selecting number systems.
  • The Reporting API now supports the “enforce” mode for enforcing policies on third-party resources.

Conclusion

Chrome 111 brings several exciting updates and features for web developers, including CSS subgrid support, declarative Shadow DOM, Resize Observer, and the new Web Vitals API. These updates make it easier to create complex layouts, manage Shadow DOM trees, implement responsive designs, and track the performance and user experience of a web page. As always, we encourage developers to keep up-to-date with the latest web technologies and continue to push the boundaries of what’s possible on the web.