What’s new in CSS and UI: I/O 2023 Edition

The past few months have ushered in a golden era for web UI. New platform capabilities have landed with tight cross-browser adoption that support more web capabilities and customization features than ever.

Here are 5 of the most exciting and impactful features that landed recently or are coming soon that I found most fascinating:

👉 Style Queries

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

The following example show us how to use style queries.

Code pen example: https://codepen.io/web-dot-dev/pen/KKxzYQx

This is just the beginning for style queries. In the future, we’ll have Boolean queries to determine if a custom property value exists and reduce code repetition, and currently in discussion are range queries to apply styles based on a range of values. This would make it possible to apply the styles shown here using a percent value for the chance of rain or cloud cover.

You can learn more and see more demos in blog post on style queries.

👉 :has()

Speaking of powerful, dynamic features, the :has() selector is one of the most powerful new CSS capabilities landing in modern browsers. With :has(), you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means, we essentially now have a parent selector.

Building on the container query example, you can use :has() to make the components even more dynamic. In it, an item with a "star" element gets a gray background applied to it, and an item with a checked checkbox a blue background.

But this API isn’t limited to parent selection. You can also style any children within the parent. For example, the title is bold when the item has the star element present. This is accomplished with .item:has(.star) .title. Using the :has() selector gives you access to parent elements, child elements, and even sibling elements, making this a really flexible API, with new use cases popping up every day.

To prevent rendering performance slowdowns in large DOM trees, we recommend that you scope this selector as closely as possible. For example, using :has() to check for matches on the root html element would be slower than checking for matches in a nav bar or in a card element with a smaller tree.

👉nth-of syntax

The web platform now has more advanced nth-child selection. The advanced nth-child syntax gives a new keyword (“of”), which lets you use the existing micro syntax of An+B, with a more specific subset within which to search.

If you use regular nth-child, such as :nth-child(2) on the special class, the browser will select the element that has the class special applied to it, and also is the second child. This is in contrast to :nth-child(2 of .special) which will first pre-filter all .special elements, and then pick the second one from that list.

Code pen example: https://codepen.io/web-dot-dev/pen/oNMRaQq

👉 Dynamic viewport units

One common problem web developers face today is accurate and consistent full-viewport sizing, especially on mobile devices. As a developer you want 100vh (100% of the viewport height) to mean “be as tall as the viewport”, but the vh unit doesn’t account for things like retracting navigation bars on mobile, so sometimes it ends up too long and causes scroll.

To resolve this issue, they now have new unit values on the web platform, including:

• Small viewport height and width (or svh and svw), which represent the smallest active viewport size.
• Large viewport height and width (lvh and lvw), which represent the largest size.
• Dynamic viewport height and width (dvh and dvw).

Dynamic viewport units change in value when the additional dynamic browser toolbars, such as the address at the top or tab bar at the bottom, are visible and when they are not.

👉 Nesting

CSS nesting, something folks love from Sass, and one of the top CSS developer requests for years, is finally landing on the web platform. Nesting allows developers to write in a more succinct, grouped format that reduces redundancy.

You can also nest Media Queries, which also means you can nest Container Queries. In the following example, a card is changed from a portrait layout to a landscape layout if there’s enough width in it’s container:

The layout adjustment to flex occurs when the container has more (or equal to) 480px of inline space available. The browser will simply apply that new display style when the conditions are met.

For more information and examples, check out our post on CSS nesting.

👉 Scoped CSS

CSS scoped styles allow developers to specify the boundaries for which specific styles apply, essentially creating native namespacing in CSS. Before, developers relied on 3rd party scripting to rename classes, or specific naming conventions to prevent style collision, but soon, you can use @scope.

Here, we’re scoping a .title element to a .card. This would prevent that title element from conflicting with any other .title elements on the page, like a blog post title or other heading.

You can see @scope with scoping limits together with @layer in this live demo: https://codepen.io/web-dot-dev/pen/MWPVGPL

😘 Conclusion

Keep up with all the latest landings in CSS and HTML right here on developer.chrome.com and check out the I/O videos for more web landings.

If you want to find more interesting contents like this from me. Please don’t hesitate to visit my Portfolio Website and GitHub link for it.

And lastly if this post helped you keep up to date with technology or at least helped you a little bit, please leave me a 👏. That means to me a lot 🥰.

Thank you very much and have a good day😍.