New in CSS and UI: I/O 2023 Edition

All the new CSS and UI, collected in one place, with code examples and illustrations: Lead Web Developer Noveo Ekaterina translated a review from the Google I/O team for our readers. It remains only to put these tricks into practice!

This is a translation of the original article.

The last few months have been the beginning of a golden era for web page user interfaces. All popular browsers have successfully implemented new platform tools to support more web page customization functionality and features than ever before.

Below are 20 of the most exciting and impressive features that have arrived recently or are coming soon.

Responsive web-design (Responsive web design)

1. Container Queries
2. Style Queries
3. :has()
4. nth-of syntax
5. text wrap: balance
6. initial letter
7. dynamic viewport units
8. Wide-gamut color spaces
9. color-mix()

CSS Foundations

1. CSS Nesting
2. Cascade layers
3. Styles with limited scope (scoped styles)
4. Trigonometric functions
5. Individual transform properties

Custom Components

1. popover
2. Anchor positioning
3. <selectmenu>
4. Discrete property transitions. ( Discrete property transitions)
5. Interactions

Scroll-driven animations

1. View transitions
2. Conclusion

Responsive web-design (Responsive web design)

Let's start with the possibilities of responsive design. New platform features allow you to create logical interfaces with components that own their responsive style information, build interfaces that take advantage of the system's capabilities to create more native UIs, and put the user in the design process with user preference queries for complete customization.

1. Container Queries

Browser support: Chrome 105; Firefox 110; Edge 105; Safari 16.

At the moment, Container Queries can be used in all modern browsers. They allow you to get the size and style of a parent element to determine the styles to apply to any of its child elements. Media expressions can only access and use information from within the viewport, which means they can only operate on the macro view of the page layout. And container query is a more precise tool that can support any number of layouts and layouts within layouts.

In the following example, the main Inbox and the Favorites sidebar are containers. The emails inside them adjust the grid layout and show or hide the email timestamp based on the available space. It's the exact same component on the page, just rendered in different views.

Thanks to the container query, the styles of these components are dynamic. If you change the page size and layout, the components react to their individually allocated space. The sidebar becomes a top bar with more space and we can see the layout is more like the main mailbox. When space gets smaller, they both show up in a compressed .

2 Style Queries

Browser support: Chrome 111, Firefox Not supported, Edge 111, Safari Not supported.

The container query specification also allows you to query the parent container's style values. This is now partially implemented in Chrome 111, where you can use custom CSS properties to apply container styles.

The example below uses the weather characteristics stored in custom property values such as rain, sunny, and cloudy to style the map background and indicator icon.

@containerstyle(--sunny: true) 

?.weather-card {

??background: linear-gradient(-30deg, yellow, orange);

?}




?.weather-card:after {

??content: url(<data-uri-for-demo-brevity>);

??background: gold

?}

}        

This is just the beginning for Style Queries. In the future, we will have boolean queries to determine if a custom property value exists and reduce code repetition, and range queries are currently being discussed to apply styles based on a range of values. This will apply the styles shown here using the percentage chance of rain or cloud cover.

3. :has()

Browser support: Chrome 105, Firefox Behind a flag, Edge 105, Safari 15.4.

In terms of powerful and dynamic features, the :has() selector is one of the most powerful new CSS features coming to modern browsers. With :has() you can apply styles by checking for specific child elements in the parent element or their state. This means that we now actually have a parent element selector.

Extending the container query example, you can use :has() to make components even more dynamic. Here, a gray background is applied to the element with the star element, and a blue background is applied to the element with the checkbox checked.

But this API feature is not limited to just parent selection. You can also apply styles to any child elements within a parent element. For example, the title becomes bold when the element has a star component. This is achieved with .item:has(.star) .title . Using the :has() selector gives you access to parent, child, and even neighbor elements, making this API very flexible, with new use cases popping up every day.

Life hack: in order not to slow down display performance in large DOM trees, it is recommended to limit the scope of this selector as much as possible. For example, :has() for matching on the root html element will be slower than matching on a navbar or card element with a smaller tree.

4.nth-of-syntax

Browser support: Chrome 111, Firefox 113, Edge 111, Safari 9.

The web platform now has a more expanded choice of nth-child. The extended nth-child syntax provides a new keyword ("of") that allows you to use the existing An+B microsyntax with a more specific subset for searching.

If you use a normal nth-child selector such as :nth-child(2) for a custom class, the browser will choose