 Bramus [X](https://twitter.com/bramus) [GitHub](https://github.com/bramus) [Mastodon](https://front-end.social/@bramus) [Bluesky](https://bsky.app/profile/bram.us) [Homepage](https://www.bram.us/)  Una Kravets [X](https://twitter.com/una) [Mastodon](https://front-end.social/@una) [Homepage](https://una.im)
Published: July 1, 2026
At Google I/O 2026, we shared a whirlwind of updates landing in the Web UI platform. From respecting user preferences to implementing natural interactions, guiding navigation, reducing clutter, and adapting to various form factors, the modern web offers developers incredibly powerful tools to build high-quality, tactile user experiences.
[Video](https://www.youtube.com/watch?v=uT7MVcCQ4rw)
Here is a comprehensive round-up of all the features mentioned in the "What's new in web UI" session, structured by our core set of UX principles.
## Part 1: Respect user preferences
Personalization is fundamental for web usability. Modern web APIs make it easier to adapt to user system-level choices automatically. Even though these concepts feel elemental and we've been talking about them for years, there are actually a few new APIs and patterns that make this dynamic personalization easier to build for.
### 1. `contrast-color()`
The [`contrast-color()`](https://developer.mozilla.org/docs/Web/CSS/contrast-color) CSS function takes an input color and automatically returns either `black` or `white`, depending on which has the higher contrast against the input color based on the WCAG AA minimum contrast algorithm. This ensures legibility without manually maintaining text-background color pairs.
[Learn more about `contrast-color()`](https://goo.gle/contrast-color)
### 2. `light-dark()`
The [`light-dark()`](https://developer.mozilla.org/docs/Web/CSS/light-dark) CSS function lets you specify two different values (colors or images) for a property, one for light mode and one for dark mode, within a single declaration. The browser automatically selects the correct contrast color based on the active `color-scheme` (which must be set to `light`, `dark`, or `light dark` on `:root` or a parent).
New to `light-dark()` is that it is no longer limited to just color values. Starting with Chrome 150, it now also accepts two image values.
- [Learn more about `light-dark()`](https://goo.gle/light-dark)
- [Learn more about `light-dark()` with images](https://goo.gle/light-dark-images)
### 3. CSS custom functions (`@function`)
The [`@function`](https://developer.mozilla.org/docs/Web/CSS/@function) at-rule lets you define custom, reusable functions directly within native CSS. It can accept locally-scoped custom properties as arguments, perform calculations, and return values using the `result` descriptor, reducing the need for preprocessors.
Combined with [container style queries](https://developer.chrome.com/blog/new-in-web-ui-io26.md.txt#4_container_style_queries) and the [CSS `if()` function](https://developer.chrome.com/blog/new-in-web-ui-io26.md.txt#5_css_if_function), you can create a custom `--light-dark()` function that works with *any* type of value, as shown in this demo:
- [Learn more about `@function`](https://goo.gle/at-function)
- [Learn more about `--light-dark()`](https://goo.gle/custom-light-dark)
### 4. Container style queries
Part of CSS Container Queries, [style queries](https://developer.chrome.com/docs/css-ui/style-queries.md.txt) let developers apply styles to descendant elements based on the computed custom property values of a parent container, enabling dynamic components without requiring explicit size containment.
In this demo, style queries are used to set the colors based on a `--theme` custom property.
```css
@container style(--theme: primary) {
.app-card {
--bg-light: #fdf2f8;
--bg-dark: #ff91d3;
--neon-glow: #f472b6;
--btn-light: #be185d;
--btn-dark: #fbcfe8;
--text-on-light: #500732;
--text-on-dark: #fff1f2;
}
}
@container style(--theme: accent) {
.app-card {
--bg-light: #f3e8ff;
--bg-dark: #4c1d95;
--neon-glow: #d8b4fe;
--btn-light: #7e22ce;
--btn-dark: #c084fc;
--text-on-light: #2e1065;
--text-on-dark: #faf5ff;
}
}
@container style(--theme: success) {
/* ... */
}
```
[Learn more about style queries](https://goo.gle/style-queries)
### 5. CSS `if()` function
The [`if()`](https://developer.mozilla.org/docs/Web/CSS/if) CSS function brings inline conditional logic directly to CSS property values. It evaluates a series of semicolon-separated conditions (style queries, media queries, or feature queries) and lets you set different values associated with the first true condition, with an optional `else` fallback.
In the previous demo, the `if()` function is used to create a themed contrast color base on the output of the `contrast-color()` function.
```css
--contrast-color: contrast-color(var(--card-bg));
color: if(
style(--contrast-color: white): var(--text-on-dark);
else: var(--text-on-light)
);
```
### 6. `@supports at-rule()`
The CSS `at-rule()` function for use with `@supports` allows developers to feature-detect whether a browser recognizes a specific at-rule, such as `@starting-style` or `@view-transition`.
For example, to check for support for `@function`, use it as follows:
```css
@supports at-rule(@function) {
/* Code for browsers that support @function goes here */
}
```
Using `at-rule()` only allows checking for base support of the at-rule itself and cannot be used to test for specific descriptors, preludes, or full at-rule blocks. There are workarounds available to feature detect things like anchored queries or style queries.
[Learn more about `@supports at-rule`](https://goo.gle/at-rule)
### 7. ``
The [`text-scale`](https://developer.mozilla.org/docs/Web/HTML/Element/meta/name/text-scale) HTML meta tag opts the page in to having the `` root element's initial font size scale in proportion to OS and browser-level text scale settings, which is especially critical for mobile platforms.
When applied, the font-size on the `html` element is now determined by the operating system, so there is no need for you to set a base `font-size`. If you then use lengths with relative units like `em` and `rem`, the computed pixel values are based off of that base font-size.
```html
```
From the rendering tab in DevTools you can emulate the preferred font-size. Use the dropdown to change the value.
[Learn more about ``](https://goo.gle/meta-text-scale)
*** ** * ** ***
## Part 2: Implement natural interactions
Intuitive, physical motion and natural gestures are key to making web experiences feel as tactile as native applications. And modern CSS makes this easier for you to achieve.
### 8. `linear()` easing function
The [`linear()`](https://developer.mozilla.org/docs/Web/CSS/easing-function/linear) easing function lets you create complex, custom transition curves (like bounces, springs, or elastic overshoots) by interpolating linearly between an unlimited number of specified progress points.
In the following demo, `linear()` is used to give the dialog a natural easing as it gets shown or hidden.
[Learn more about `linear()`](https://goo.gle/css-linear-function)
### 9. `@starting-style`
The [`@starting-style`](https://developer.mozilla.org/docs/Web/CSS/@starting-style) CSS at-rule defines the starting values for properties on an element that you want to transition from when the element is first rendered in the DOM or when its `display` changes from `none` to a visible value, to enable smooth entry transitions.
In the previous demo this is used to animate-in the `