Modern CSS for Web Apps and UIs

Yeah, as John said, modern CSS, that has kind of become a term I have been associated with for a few years now, including the domain moderncss.dev.

But today we're going to focus a lot about the 'what' and the 'how' and a little bit  - or excuse me, the 'what' and the 'why' and a little bit less on how. So just some nuggets about that for those that are interested. And just to get ahead of what we're doing as well, most of the things that you'll see are very, very well supported. I will note when there's a couple of upcoming features, but I do encourage you to consider those as progressive enhancements. So let's get into it.

We have three areas to look at these today. The first one is visual, or those that make a visual impact, functional, where they impact architecture or behavior, and then delightful, those that are going to bring joy to the UX or DX for your projects. And just a little heads up, might want to have your camera ready. I will have some QR codes for resource links throughout. So starting with visual, let's take a look at this feature pairing of color-scheme and light-dark(). Using these two properties allows you to gracefully adapt your app and component styles to handle light and dark themes.

First, you want to define the color-scheme property with the values of light and dark. This property responds to the operating system preference for a user's device, and the order matters. So in this case, we've listed light first, which means that our app has a priority preference for a light theme, but it also will work well with a dark theme. Next, within your components, for any color related value that you're using, you can now adopt the light-dark function which accepts two values.

The first one that you provide is going to be what renders in a light theme, and the second in a dark theme.

So this enables components like this card to smoothly adapt between light and dark themes.

Developers love this feature pairing, particularly light-dark, because it has the ability to remove duplication, and possible current separation between these color theming related styles. Our next property is accent-color, which allows you to easily add color theming to native form controls, such as those seen here, which include the radio and checkbox when those are checked, the range slider, and progress meter filled portions.

And it's also very complimentary for use with color-scheme and light-dark. So in our code snippet here, we're using the light-dark function for accent-color. And this helps us ensure that we have better contrast of our preferred color within those two color schemes.

Keeping on our color theme, let's take a look at color- mix(). So color-mix() accepts two colors.

and mixes them by the provided amount. It's kind of like when you're in primary school and you were mixing two colors together, right? Figuring what that combo would be. It does require a 'colorspace', which is kind of a scary word. Stick with me.

Such as in HSL or in OKLCH.

And just as an example for this current code snippet, where we're mixing cyan and lime, where we're mixing lime in by 25%. And this expanded graphic mixes that in by increasing amounts and shows the difference between a few of the available color spaces. You can see how some are more muted and some are brighter. So put that in your notes to look up color-spaces on the web at a different time because it's too much to go into today.

Color-mix() can also be used to give color opacity.

by mixing in transparent. This is really exciting.

Might not sound exciting, but this is a feature I definitely have wanted for a long time. The color space when you're doing something like this is still required, but it's not going to be as impactful when you're mixing in transparent. So just pick one if this is your goal. You can also mix in black to darken colors and white to lighten the colors.

But just kind of be aware that these are okay in a pinch, but might not be your ideal results for which you'll possibly want an actual design editor to compute.

All right, it is time to leave color behind and consider a classic layout problem that we can resolve using 'Subgrid', a feature of CSS Grid.

Usually, subgrid is desired to fix a classic layout problem.

which is when designers want things to align visually across separate components or template areas.

Prior to subgrid being available, we had to explain to designers that this either wasn't possible or use hacks like fixed heights or truncation. But with subgrid, we can direct elements to participate in a parent's layout grid by sharing the alignment and space allotment for either rows, columns, or both.

So in this group of cards, the alignment mismatch is noticeable when that title begins to wrap. So in this case, we'd like to share row alignment across our components.

Since we're interested in that row alignment, we're going to check out the current grid layout for our card, and we can see that we have three rows for the card in this layout.

Once we have the sub-grid assignment in place, when we select the parent layout grid, we can now see how those grid rows are shared across all of our card elements. And this results in that fix for the visual alignment of those titles, even though each card is a separate component.

Another property that fixes a long-standing web design issue is 'text-wrap'. And this directs the browser to either balance lines of text to improve visual appearance or make text blocks pretty by preventing hanging words, which are sometimes called orphans.

Previously, this was only possible by inserting manual line breaks, or adjusting specific widths, and that wasn't really friendly for either responsive design or international text concerns. The difference in these values is shown through these text block examples, where the first uses 'text-wrap: balance;', and the second uses 'text-wrap: pretty;'.

Pretty is currently only available in Chrome and Edge.

However, this is one of ours that is definitely in progressive enhancement category, meaning if you apply it and it doesn't work in a user's browser, there's minimal impact and no impact to the functionality. This is just a visual improvement.

Next up, let's look at some functional features that impact CSS architecture or behavioral aspects.

This first tool is meant to improve CSS architecture.

and this is Cascade Layers or the @layer rule.

Cascade Layers gives CSS authors control over specificity of rule sets. I know, I'm getting into some scary words here. Put another way, this is the ability to direct the priority of your foundational styles versus component styles versus utilities. And a key benefit is that it enables deprioritizing third-party or framework styles in favor of your application styles without hacks around that or any headaches that can ensue. The recommended way to use @layer is to define that order in your first loaded stylesheet. And the reason for this is because layers will continue to be evaluated against that initial order. Then, throughout your style sheets that follow, you can add styles to those layers. You can do this as many times as you want.

That order does not have to match that initial order.

And the key here is that rules from later defined layers will always win over rules in earlier defined layers. And that is the superpower of cascade layers. So even classically weak specificity selectors, such as the 'focus-visible' one in the states layer I have here, will beat out styles in earlier layers, including those with more classically strong specificity, such as IDs.

One of the most exciting tools we've received to handle responsive design concerns is Container Queries. And to see why these will be helpful, here's a current card in a large and comfortable space where everything fits pretty nicely in this layout. But when it starts to squeeze, get narrower, having the action buttons in a column next to the title is at risk of causing overflow.

So we're going to employ container queries to adjust the underlying grid layout template and rearrange the action buttons and the title into a stacked layout for narrower spaces. Container Queries respond to an element's available inline space.

And these enable dynamic changes across template areas that are independent of the actual browser or device size. And that is the difference between media queries, which are responsive to the viewport size or browser width. So here's a snippet of what we'll write for the updated card styles. Based on a parent container, we'll check if the card's computed inline size is less than or equal to 35 characters. And if it is, our container query will apply and adjust the card template for the narrower view. So here's the update comparing the large card to the narrower card, where again, for the narrower card, the action buttons have been moved to stack above the title.

A few more suggestions on what container queries can do include adjusting the font size and spacing values, really anywhere.

And for those, I'd also suggest you consider using container query units, which we didn't get to look at today. So write that one down too. You can do things like flipping from an inline menu to a dropdown or changing your layout to use a background image to instead an inline image and really just any other layout mutations to help you relieve problems from overflow potential or other space-related considerations.

A selector that had folks pretty excited when it came out and was once thought by browser engineers to actually be impossible is ':has()', and we have now had it available to use since December 2023. ':has()' is also referred to as the parent selector. But that's just one of its capabilities.

It is the one demonstrated here though, which shows selecting a parent element based on the presence of some sort of selected content. So in this example, we're styling the article element if it has an image. We can also check sibling conditions.

So in this example, we're selecting the h1 only if it is followed by an h2. And we can use it with compounded selectors to select something other than the parent element, as is in this example, which looks if an h2 is followed by an h3, and if so, we're selecting the paragraphs that follow.

We can even create 'and 'conditions for identifying complex groupings. So this selector only selects the middle article because it contains an image as the first direct child and it contains an h1 followed by an h2. We honestly could spend all day looking at cool ways to use ':has()', but I hope this quick list has inspired you to check it out.

Next up is the pretty new Popover API.

This feature is cross-browser and is considered baseline newly available. But this is an HTML API.

So why am I bringing it up in a CSS talk? And to understand that, let's learn what CSS problem it helps solve.

The Popover API gives us a guaranteed way to beat any element layering order, which is by promoting its contents to a fairly new browser feature of the top layer. Promoting an element to the top layer breaks it free of any stacking context it may otherwise exist within. In other words, wherever the popover actually lives in the DOM, this top layer access guarantees it will be visible over everything else when the popover is open.

This is important because it removes the needs for hacks that were previously required to guarantee visibility of overlays, such as tooltips, dropdown menus, custom dialogs, pop-out search, teaching callouts, the list goes on.

To create a popover in the most simple HTML-only way, you first add the attribute 'popovertarget' to a button with a value that matches the ID of an element with the popover attribute.

And just like that, you have a toggleable popover.

The popover will be hidden until it is toggled open, and the default style from the browser is fixed position in the center of the viewport. So that gives us the remaining problem of positioning our popover. And to resolve that, we'll bring in Anchor Positioning, which is one of the most modernist of the CSS features.

The spec is still evolving, but partial implementations are available in Chromium and Safari technical preview, unless that changed in the last week that I pulled that.

It's also part of interop 2025, which means that browsers are actively working on either implementing or improving their implementations.

So it is coming as a guarantee. And if you're looking to use it soon, you might want to have a fallback library, but let's learn what it does.

Anchor positioned elements have their position set relative to the defined anchor element.

So in this example, the popover is anchored to the favorite button.

Anchor Positioning enables positioning any element, not just popovers, relative to another element.

And the use of anchor positioning will allow your team to remove JavaScript dependencies on heavier positioning libraries that exist on the market today. It also comes with features you expect, like repositioning based on edge detection during scroll or resize.

This demo video is from Una and it shows how directing the anchored element's position requires just this one property. There are a couple of other steps involved to create a positioning relationship, unless you're using a popover.

A more recent change is that popovers now have an implicit anchoring relationship with their trigger, so you only need this property.

Our last functionality update is for Custom Select, and it's also a work in progress. The full capabilities here are currently only in Chrome and Edge.

But Custom Select will allow you to customize the ''s appearance, including the button, selected option, picker drop down, and options.

This is very solidly a progressive enhancement because it is op in. and you do this by supplying the value of base-select to the already existing appearance property. In this code example, we're checking for support of that new property value pairing, and then we're applying it to both the base-select element and also the new subcomponent of the picker. In this diagram from utilitybend, note that the '::picker(select)' selector that we added in that snippet refers to the containing box around the list of options.

The diagram also shows the additional new CSS selectors, and you can use all of these to completely restyle any part of the select elements.

So here are some customized examples from Adam Argyle, and notice the subtle animations and the ability to add icons and multiple text styles, both for the label and the options. I'm really excited about this to be fully available. And again, you can start using this today because if the browser doesn't support it, it will simply show the older select style.

Now for our last category of 'Delightful' features or those that bring joy to the user and developer experience.

Spoiler alert, they all have something to do with animation.

Entry Animations is a category of new CSS features that finally enable us to transition an element from a hidden state. Now this is a problem that I have been fighting for so long that I remember it being the first reason I reached for jQuery after I finally accepted that Flash was not the the future.

Setup for Entry Animations involves two CSS features. The first is a new @rule for @starting-style, which defines the initial state on an element before it is rendered on the page. And starting-style is required as the starting state for elements you plan to animate in from 'display: none'.

The second feature is the 'allow-discrete' keyword for the transition-behavior property, where a starting-style provides the appearance properties to transition from.

Allow-discrete is required to allow animating from 'display: none' and 'visibility: hidden'.

Now, there are several steps and bits of nuance to put it all together.

so I want to refer you to this excellent article from Zell Liew if you're interested in these features. There is specific ordering and some other details, that if you have this handy, it will prevent you from hitting your head against your desk.

So as an example of putting it all together, we can transition any element from a hidden state, as in this example for a popover. I'm using a pretty slow transition to better emphasize, and see the effect.

Again, animating from a hidden state previously required workarounds such as swapping classes in JavaScript.

So this is truly a really powerful upgrade.

View Transitions are another API that can remove JavaScript heavy animation libraries.

Currently, there is missing support in Firefox, But again, this is part of Interop 2025, so it is actively being worked on, and we should see some level of support in Firefox by the end of year. View Transitions are a way to create browser-powered seamless transitions between element visuals or states or across page navigations. There are two types, but the process for both is similar to create the transition. First, the browser takes snapshots as in actual screenshots of the old and new states. Then, behind the scenes of those snapshots, the DOM gets updated. And finally, the transition between those snapshots is powered by CSS animations.

The first View Transition Type is for 'same-document'.

This is the type to reach for when you have in-page transitions, or they're also used for what's popularly called a SPA, such as a React app.

The other type is for cross-document transitions, a little bit newer in its support. And this means creating element transitions that occur across same origin page navigations, meaning providing some animated effect when you click on page navigation, and move to a whole new page.

The default transition animation is cross-fade.

And you can customize the animation used for elements using CSS animations and view transition pseudo elements. So those are gonna be some new selectors.

So here's an example which is gonna show the use of regular CSS keyframes. Shouldn't look any different if you've used them already. and these will result in scaling down the old snapshot and scaling in the new snapshot.

So here's a preview of this type of transition in place.

Now, I do need to note there's a tiny bit of JavaScript, as in a single function, that you're just gonna wrap your JavaScript functionality that is moving through quotes or whatever you happen to be doing.

But again, grab this link, and if you wanna dig in deeper to how the browser really accomplishes all that, 'cause it's very difficult.

It took me several hours to boil it down into those bullet points.

So if you're interested in all the details and how to accomplish it, check out Bramus's 30-minute talk, which is this link here.

Okay, our last feature is Scroll-Driven Animations.

And again, here's one that's experimental only, only in Chrome at the moment, but by and large, animations are additive, so there's still ways we can use them today. Scroll-Driven Animations provide the ability to build animations triggered by scrolling. Scrolling acts as the scrubber along the animation timeline, meaning the animation will progress, pause, or reverse based on how you scroll - up, down, left, or right. And these are performance enhanced, which means - and have a boost over JavaScript libraries because they're managed off the main thread.

Again, a keyword to look up later if you're curious.

Use of scroll-driven animations allows removing resource intensive JavaScript solutions that require a scroll listener. Again, we have two types here and they have to do with the type of timeline you are needing access to. The first is 'Scroll Progress', and this is linked to the overall scroll position, whether that be the whole document or an individual scroll container on your page. And when you're using Scroll Progress, the default animation range moves from 0% at the start of that container to 100% at the end of that container. To attach an animation to scroll progress, you use the 'animation-timeline:' property with the new scroll function.

The second type is for the View Progress timeline, and this is for tracking individual elements and is linked to their own relative position within the scroll container.

So when an element crosses into view, within the scroll container, the progress starts at zero and progresses to 100% by the time the element exits from the scroll container. To attach an animation to view progress timeline, you will use the view function with the animation-timeline property. An example of a scroll progress timeline animation would be something like a reading progress indicator. whereas an example of a view progress timeline animation would be the fading and scaling in of images in a blog or article. By the way, credit for these again goes to Bramus, and you should check out much more details and examples at their resource of 'https://scroll-driven-animations.style/'.

All right, here's a recap of those features we introduced today.

This would be the time to take a picture. give you a nice handy list.

You can look up more about these features later, take them back, share them with your teams. But yeah, thanks so much for having me. Find me later to nerd out on CSS or in the next two days.

Session Details

MODERN CSS FOR WEB APPS AND UIS

Stephanie Eckles

Senior Design Engineer
Adobe

Visual

Makes a visual impact

Visual

Makes a visual impact

Functional

Impacts architecture or behavior

Delightful

Brings joy to UX and/or DX

• Visual: Makes a visual impact
• Functional: Impacts architecture or behavior
• Delightful: Brings joy to UX and/or DX

Psst - QR codes incoming!

color-scheme && light-dark()

color-scheme and light-dark()

• Gracefully adapt app and component styles to handle light and dark themes

Illustration of a UI card component (social post) showing a coastal landscape photo, a user handle with timestamp, the title “Greatest Day Ever!!”, placeholder body text, and reaction icons. The card serves as an example component that would adapt to light and dark themes.

color-scheme and light-dark()

• Gracefully adapt app and component styles to handle light and dark themes

Primary App Styles

:root {
        color-scheme: light dark;
}

Component Styles

.card {
        background-color:
                light-dark(
                        var(--color-surface),
                        var(--color-surface-dark)
                );
}

Example UI card component showing a landscape photo, the text "@5t3ph • 4 mins ago", the title "Greatest Day Ever!!", a short paragraph of placeholder text, and small action icons. It illustrates how a component can adapt between light and dark themes.

accent-color

• Easily add color theming to native form controls
  • radio and checkbox when checked
  • range slider filled portion
  • progress meter filled portion

Interface mockup showing two side-by-side panels in light and dark themes demonstrating native form controls with an applied accent color: a radio group labeled “Radio 1–3” with “Radio 2” selected, a checked “Checkbox,” a “Range” slider partially filled, and a “Progress” bar partially filled. Shows how the accent color affects selected indicators and filled portions in both themes.

accent-color

• Easily add color theming to native form controls
  • radio and checkbox when checked
  • range slider filled portion
  • progress meter filled portion
• Very complementary to color-scheme and light-dark()

:root {
        color-scheme: light dark;

        accent-color:
                light-dark(
                        mediumvioletred,
                        violet
                );
}

Side-by-side mockup of native form controls (radio buttons, a checkbox, a range slider, and a progress bar) shown in light and dark themes to demonstrate a shared accent color. A separate code editor screenshot displays the CSS that sets color-scheme to light and dark and assigns accent-color using light-dark() with mediumvioletred and violet.

color-

color-mix()

color-mix()

• Accepts two colors and mixes them by the provided amount
• Requires a colorspace, e.g., in hsl or in oklch

color-mix(
        in hsl,
        cyan,
        lime 25%
);

color-mix()

• Accepts two colors and mixes them by the provided amount
• Requires a colorspace, e.g., in hsl or in oklch

color-mix(
        in hsl,
        cyan,
        lime 25%
);

Diagram comparing color mixing across color spaces: three horizontal sequences labeled "srgb (hex values)", "oklch", and "hsl". Each sequence transitions from "Color 1" to "Color 2" with intermediate swatches marked 25%, 50%, and 75%, illustrating how mixing the same two colors (cyan and lime) yields different results in each colorspace.

color-mix()

• Accepts two colors and mixes them by the provided amount
• Requires a colorspace, ex. in hsl or in oklch

color-mix(
        in hsl,
        cyan,
        lime 25%
);

Diagram comparing color mixing across color spaces: three horizontal rows labeled "srgb (hex values)", "oklch", and "hsl". Each row shows swatches transitioning from "Color 1" (cyan) to "Color 2" (lime) with intermediate steps labeled 25%, 50%, and 75%, illustrating how mixes differ by colorspace.

color-mix()

• Can also be used to give a color opacity by mixing in transparent
• Color space is still required, but not important for mixing in transparent

color-mix(
        in hsl,
        cyan,
        transparent 25%
);

Diagram: a horizontal swatch strip transitions from “Color 1” to “Color 2” with intermediate panels labeled 25%, 50%, and 75%, illustrating increasing transparency as a color is mixed with transparent.

color-mix()

• Mix in "black" to darken
• Mix in "white" to lighten

color-mix(
        in hsl,
        blue,
        black 25%
);

Color spaces shown

• srgb (hex values)
• oklch
• hsl

Diagram with three horizontal swatch rows labeled “srgb (hex values)”, “oklch”, and “hsl”, each showing a base blue followed by mixes with black at 25%, 50%, and 75%, ending near black—illustrating how results differ between color spaces when darkening a color using color-mix().

Subgrid

Why use subgrid?

@5t3ph • 4 mins ago

Greatest Day Ever!!

Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit.

@5t3ph • 4 mins ago

Another great day

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in hendrerit urna. Pellentesque sit.

@5t3ph • 4 mins ago

What an incredible adventure

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Row of three social-media style cards, each with a photo on top, metadata, a title, and a short text snippet. The cards vary in text length but maintain aligned rows for comparable elements, demonstrating cross-card alignment typical of a subgrid layout example.

Why use subgrid?

• Use to align content and elements visually across separate components or template areas

Three photo-card components are shown side by side as an example. Each card contains a photo, a metadata line (username and time), a post title of different length, a short paragraph, and action icons (like/bookmark/share). Because the titles and text vary, the metadata lines, titles, and icons end up at different vertical positions across cards, illustrating an alignment mismatch that subgrid can solve.

Why use subgrid?

• Use to align content and elements visually across separate components or template areas.
• Subgrid enables participating in a parent’s layout grid by sharing the alignment and space allotment for rows, columns, or both.

Illustration of three example content cards in a row, each with a photo, metadata, a title, short text, and action icons (e.g., like/save). One card’s title wraps to two lines, causing its internal elements to misalign with the others, demonstrating how subgrid can synchronize row alignment across components.

Applying subgrid

Screenshot of browser developer tools. On the left, a card component is shown with a grid overlay across an image and text area. On the right, the Elements/DOM panel displays a ui-card component with a highlighted div class="card" (grid) and child sections for media, header, actions, and content. The visual illustrates applying subgrid so the child sections share the card’s grid rows.

Applying Subgrid

Screenshot of a browser developer tools grid overlay on a card gallery. The parent layout grid labeled "div.layout-grid" shows three shared horizontal rows across all cards, marked 1, 2, and 3 along the left. Card titles visible in the second row include "Greatest Day Ever!!", "Another great day", and "What an incredible adventure." The image demonstrates how subgrid shares row tracks so titles align across separate card components.

Applying Subgrid

• Greatest Day Ever!!
• Another great day
• What an incredible adventure
• We had so much fun!
• Our beach day

Diagram of a UI showing six photo cards arranged in a 3-column by 2-row grid. Each card includes a photo, a small metadata line (username and time), a title, reaction/bookmark icons, and a short description. A dotted horizontal guide runs across the cards at the title row to demonstrate that the cards share the same grid rows via a parent layout grid (subgrid), aligning titles across separate components.

text-wrap

text-wrap

• Direct the browser to either balance lines of text to improve visual appearance, or make text blocks pretty by preventing hanging words (“orphans”).

text-wrap

• Direct the browser to either balance lines of text to improve visual appearance, or make text blocks pretty by preventing hanging words (“orphans”).

text-wrap: balance;

text-wrap: pretty;

Currently Chrome/Edge only

Two comparison mockups demonstrate the effect of the CSS property:

• Left: stacked text boxes; the top example is labeled “This text has been balanced by text-wrap,” and the bottom “This text has not been balanced by text-wrap,” illustrating more even line lengths versus uneven wrapping.
• Right: a pair of panels labeled “With text-wrap: pretty” and “Without.” The “with” example avoids a single orphaned word on the last line, while the “without” example shows an orphan word hanging on its own line.

Functional

Cascade Layers

@layer

Cascade Layers - @layer

• Give CSS authors control over the specificity of rulesets

Cascade Layers - @layer

• Give CSS authors control over the specificity of rulesets
• Ability to direct the priority of foundational styles, vs. component styles, vs. utilities

Cascade Layers - @layer

• Give CSS authors control over the specificity of rulesets
• Ability to direct the priority of foundational styles, vs. component styles, vs. utilities
• Enables deprioritizing third party or framework styles in favor of application styles without hacks or headaches

Cascade Layers - @layer

• Recommended use: define @layer order in first loaded stylesheet

@layer reset, theme, global, layout, components, utilities, states;

Annotation: Start of stylesheet.

Cascade Layers - @layer

• Recommended use: define @layer order in first loaded stylesheet
  • Initial order cannot be changed

@layer reset, theme, global, layout, components, utilities, states;

Annotation: Start of stylesheet.

Cascade Layers - @layer

• Recommended use: define @layer order in first loaded stylesheet
  • Initial order cannot be changed

Start of stylesheet

@layer reset, theme, global, layout, components, utilities, states;

Stylesheet body

@layer reset {
        * {
                box-sizing: border-box;
        }
}

@layer utilities {
        .red {
                color: red;
        }
}

@layer states {
        :focus-visible {
                outline-offset: 2px;
        }
}

Annotations: The first code line declares the layer order at the start of the stylesheet. The second block shows rules added to the reset, utilities, and states layers.

Cascade Layers - @layer

• Recommended use: define @layer order in first loaded stylesheet
  • Initial order cannot be changed
• Rules from later defined layers will always win over rules in previous layers

Start of stylesheet

@layer reset, theme, global, layout, components, utilities, states;

Stylesheet body

@layer reset {
        * {
                box-sizing: border-box;
        }
}

@layer utilities {
        .red {
                color: red;
        }
}

@layer states {
        :focus-visible {
                outline-offset: 2px;
        }
}

Two code examples illustrate CSS cascade layers: the first sets the initial layer order; the second shows rules inside reset, utilities, and states layers, including a :focus-visible rule.

Container Queries

Large card

@St3ph4 • 4 mins ago

Greatest Day Ever!!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit.

Illustration of a social-media style card component showing a photo of rocky seaside cliffs and ocean. Beneath the image are the handle and timestamp, the title “Greatest Day Ever!!,” a short lorem-ipsum snippet, and action icons including a heart (like) and a share button.

• Large card
• Current narrow

@St3ph • 4 mins ago

Greatest Day Ever!!

Lorem ipsum dolor sit amet consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit.

Diagram comparing a large card layout with a narrower version. An arrow points from the large card to the narrow card. The narrow card has a dashed callout around the header area containing the title and action icons, indicating crowding/overflow risk when the component becomes narrow.

• Large card
• Current narrow
• Ideal narrow

Diagram comparing three states of a content card component. From left to right: a spacious large version; a narrow version where the title and action icons are alongside each other and a highlighted area indicates crowding/overflow risk; and a revised narrow version where action icons are placed on their own row above the metadata and title. Arrows show progression from large to current narrow to ideal narrow. Each card mockup includes a photo, user handle and time, a title, brief text, and two action icons (heart and another action).

Container Queries

• Respond to a change in an element’s available inline space

Container Queries

• Respond to a change in an element’s available inline space
• Enable dynamic changes across template areas that are independent of the actual browser or device size

Container Queries

• Respond to a change in an element's available inline space
• Enable dynamic changes across template areas that are independent of the actual browser or device size
  • vs. media queries which respond to viewport size (browser width)

Container Queries

• Respond to a change in an element’s available inline space
• Enable dynamic changes across template areas that are independent of the actual browser or device size
  • vs. media queries which respond to viewport size (browser width)

.card {
        /* Re-order template for narrow cards to place media above header */
        @container card (inline-size <= 35ch) {
                /* Template style changes */
        }
}

• Re-order template for narrow cards to place media above header
• Template style changes

Code snippet shows a CSS container query that applies style changes to a card component when its inline size is 35 characters or less.

Large card

• Greatest Day Ever!!
• Another great day
• What an incredible adventure

Narrow card

• Greatest Day Ever!!
• Another great day
• What an incredible adventure

Comparison mockups of three social-media style cards shown in two states: a Large card row and a Narrow card row. Each card has a square photo, metadata (“@St3ph • 4 mins ago”), a title, and a short snippet. In the Large card version, the action icons (like, comment, share) sit on the same lower area as the content. In the Narrow card version, those action icons are moved to a separate row stacked above the title, illustrating how the card layout changes in a tighter container. The photos depict: a coastal cliff scene, an ocean view, and a person standing on a beach at sunset.

Container Query Suggestions

Container Query Suggestions

• Adjust font-size and spacing values

Container Query Suggestions

• Adjust font-size and spacing values
  • Also consider using container query units
• Flip from an inline menu to a dropdown
• Change from use of a background image to an inline image
• Any other layout mutations to prevent overflow and accommodate a wide range of space possibilities

:has()

:has() — aka the "parent" selector

• Allows selecting a parent element based on presence of selected contents

article:has(img)

Diagram illustrating the CSS selector article:has(img): three article cards are shown; the two cards that contain an image are indicated as selected, while the card without an image is not selected. This demonstrates styling a parent article element only when it contains an img child.

:has() — aka the parent selector

• Select parent based on sibling conditions

h1:has(+ h2) {
        /* style an h1 only when it is immediately followed by an h2 */
        ...
}

Diagram comparing two content blocks: in the first, an h1 is followed by an h2 and is highlighted to show it matches the selector h1:has(+ h2); in the second, the h1 is not followed by an h2 and is not highlighted, indicating no match.

:has() as a compound selector

• Can be used with compounded selectors

h2:has(+ h3) ~ p

Diagram illustrating how the selector "h2:has(+ h3) ~ p" works. Two example content blocks are shown: - Left block has an h2 followed by paragraphs; because there is no h3 immediately after the h2, none of the paragraphs are selected. - Right block has an h2 immediately followed by an h3; the subsequent paragraph siblings are selected. Elements are labeled h2, h3, and p to show the relationships.

:has() as a compound selector

• Create “and” conditions for identifying complex groupings

article:has(> img:first-child):has(h1 + h2)

Diagram comparing three article cards to illustrate the selector logic.

• Left card: lacks an image as the first child, so it does not match.
• Middle card: has an image as the first direct child and an h1 followed by an h2; this is the only match.
• Right card: has an image first but lacks an h1 immediately followed by an h2, so it does not match.

Popover API

top layer

Diagram showing multiple stacked planes; the uppermost plane is labeled "top layer," illustrating a concept where an element is promoted above all other layers/stacking contexts.

top layer

Diagram of stacked, semi-transparent diamond-shaped layers receding into the background, with a prominent topmost layer floating above the rest and containing a smaller inner diamond. The image illustrates the idea of a “top layer” sitting above all other layers.

Popover API

• Access to top layer guarantees an open popover will be visible over everything else

Popover API

• Access to the top layer guarantees an open popover will be visible over everything else.
• Removes need for hacks previously required to guarantee visibility of overlays such as:
  • tooltips
  • dropdown menus
  • custom dialogs
  • pop-out search
  • teaching callouts

Illustration of common UI overlays: a tooltip above a popover card next to a dropdown menu with list items, depicting examples of components that benefit from top-layer visibility.

Creating a Popover

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>Popover</div>

Creating a Popover

<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>Popover</div>

Annotation 1: Callout marker pointing to the first line of code.

Creating a Popover

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>Popover</div>

1. Highlights the popovertarget attribute on the button.
2. Highlights the matching target value/id my-popover.
3. Highlights the popover element: a <div> with id="my-popover" and the popover attribute.

Slide shows a two-line HTML example with three numbered callouts pointing to the button’s popovertarget attribute, the matching id value, and the popover element.

Creating a Popover

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>Popover</div>

Annotated code diagram showing an HTML snippet for a toggleable popover. Four numbered callouts indicate: 1) the popovertarget="my-popover" attribute on the button, 2) the button element that toggles the popover, 3) the id="my-popover" on the popover container, and 4) the popover attribute on that container.

Anchor Positioning

Anchor Positioning

Compatibility visuals show CSS anchor positioning status: a browser version grid labeled Chrome, Edge, Safari, and Firefox with earlier versions in red and newer versions in green; Safari includes a "TP" (Technical Preview) entry. Below it, an Interop dashboard row titled "Active Focus Areas" highlights "CSS anchor positioning" with displayed metrics 99.1%, 92.9%, 14.7%, 68.9%, and an INTEROP value of 13.8%.

Diagram illustrating anchor positioning: a circular button with a heart icon serving as the anchor, with a rectangular popover positioned adjacent to it, demonstrating how one element can be positioned relative to another within a larger panel.

Simplified UI diagram: a rounded rectangular panel contains a horizontal field and, at its right edge, a small circular button with a heart icon, suggesting a “favorite” control that other elements could be positioned relative to.

Anchor Positioning

• Enables positioning any element — not just popovers — relative to another

Anchor Positioning

• Enables positioning any element — not just popovers — relative to another
• Removes JavaScript dependencies on heavier positioning libraries
• Includes repositioning based on edge detection during scroll or resize

Anchor Positioning

anchor-tool.com by Una Kravets

position-area: bottom span-left;

Screenshot of the anchor-tool.com interactive demo illustrating CSS anchor positioning: a grid of anchor targets, a callout bubble reading "Hello, I am the positioned element!" anchored near one target, and a small code panel showing the rule "position-area: bottom span-left;".

Anchor Positioning

anchor-tool.com by Una Kravets

Screenshot of an interactive web demo for CSS anchor positioning. A grid of possible anchor regions is shown, along with a blue callout that says, "Hello, I am the positioned element!" A code hint displays: "position-area: top span-left;".

Anchor Positioning

anchor-tool.com by Una Kravets

Screenshot of the Anchor Tool demo showing a grid of anchor positions. A tooltip labeled “Hello, I am the positioned element!” is anchored to a small “?” trigger. A code panel at the bottom displays the CSS declaration “position-area: right center;”.

Anchor Positioning

anchor-tool.com by Una Kravets

Screenshot of the Anchor Tool web demo for CSS anchor positioning, showing a grid of possible anchor points with colored markers. A blue callout says "Hello, I am the positioned element!" and a code panel displays "position-area: top left;".

Custom Select

Custom Select

• Customize the <select> element's appearance, including the button, selected option, picker dropdown, and options

Custom Select

• Customize the <select> element's appearance, including the button, selected option, picker dropdown, and options
• An opt-in progressive enhancement using appearance: base-select

@supports (appearance: base-select) {
        select,
        select::picker(select) {
                appearance: base-select;
        }
}

Custom Select

• Customize the <select> element's appearance, including the button, selected option, picker dropdown, and options
• An opt-in progressive enhancement using appearance: base-select

@supports (appearance: base-select) {
        select,
        select::picker(select) {
                appearance: base-select;
        }
}

Diagram illustrating a custom-styled HTML select control. It labels the container as ::picker(select), the dropdown icon as ::picker-icon, highlights the selected option via option:checked with an accompanying ::checkmark, and shows a list of options ("first option", "second option", "third option").

Custom Select

Adam Argyle • https://codepen.io/argyleink/pen/wvYrZEV

• On
• Una Kravets
• Color Space: oklch
• Published

Screenshot of a CodePen demo showing custom-styled select components: a status select labeled “On” with a small status dot icon; a person select set to “Una Kravets”; a select with a sublabel “Color Space” and value “oklch”; and another select set to “Published”.

Custom Select

Adam Argyle • https://codepen.io/argyleink/pen/wvYrZEV

Screenshot of a UI demo showing four custom select components: a Disable control; a person selector with a circular avatar and focus state; a Color Space selector with value “oklch”; and a Published status selector. The selects include leading icons and dropdown indicators.

Custom Select

Adam Argyle • https://codepen.io/argyleink/pen/wvYrZEV

Screenshot of a CodePen demo showing a custom-styled select dropdown for color-space options, with the menu open and items such as display-p3, a98-rgb, lab, lch, oklch, and oklab.

Custom Select

Adam Argyle • https://codepen.io/argyleink/pen/wvYrZEV

Screenshot of a CodePen demo showing a custom select component. The dropdown is open with options that include icons and multi-line descriptions: “Published” (with a checkmark) — “Live on the web, available to anyone with the link.” and “Draft” — “Not available on the web, no public access.” A second select below shows the value “Published.”

Delightful

Entry Animations

Involves two CSS features:

Entry Animations

Involves two CSS features:

• @starting-style
  • defines the initial styles on an element before it's rendered on the page

Entry Animations

Involves two CSS features:

• @starting-style
  • defines the initial styles on an element before it's rendered on the page
  • required "starting state" for elements that animate in from display: none

Entry Animations

Involves two CSS features:

• @starting-style
  • defines the initial styles on an element before it's rendered on the page
  • required "starting state" for elements that animate in from display: none
• transition-behavior: allow-discrete

Entry Animations

Involves two CSS features:

• @starting-style
  • defines the initial styles on an element before it's rendered on the page
  • required “starting state” for elements that animate in from display: none
• transition-behavior: allow-discrete
  • allows animating from display: none and visibility: hidden

Entry Animations

• Several steps and bits of nuance to put it all together

Entry Animations

• Several steps and bits of nuance to put it all together
• For implementation details, refer this excellent article from Zell Liew
• https://zellwk.com/blog/making-sense-of-starting-style/

QR code providing a scannable link to the referenced article.

Entry Animations

Using @starting-style and transition-behavior: allow-discrete

• Demo button label: Open

UI demo panel showing a centered rounded button labeled "Open".

Entry Animations

Using @starting-style and transition-behavior: allow-discrete

Demonstration panel showing a UI example: a button labeled "Open" with a popover-like element reading "Hello World," illustrating an entry animation from a hidden state.

View Transitions

View Transitions

Active Focus Areas: View Transition API

Small screenshot of a browser interoperability dashboard showing support percentages for the View Transition API across major browsers.

View Transitions

• Create browser-powered seamless transitions between element visuals/states or across page navigations

View Transitions

• Create browser-powered seamless transitions between element visuals/states or across page navigations
• Two types, similar process to create the transition:

View Transitions

• Create browser-powered seamless transitions between element visuals/states or across page navigations
• Two types, similar process to create the transition:
  • The browser takes snapshots of the old and new states

View Transitions

• Create browser-powered seamless transitions between element visuals/states or across page navigations
• Two types, similar process to create the transition:
  • The browser takes snapshots of the old and new states
  • The DOM gets updated behind the snapshots

View Transitions

• Create browser-powered seamless transitions between element visuals/states or across page navigations
• Two types, similar process to create the transition:
  • The browser takes snapshots of the old and new states
  • The DOM gets updated behind the snapshots
  • The transitions between snapshots are powered by CSS animations

View Transition Types

View Transition Types

Same-Document

1. in-page, change in element visuals
2. within a SPA (single-page application)

View Transition Types

Same-Document

1. in-page, change in element visuals
2. within a SPA (single-page application)

Cross-Document

transition across same origin page navigations

View Transitions

View Transitions

• Default transition: cross-fade

View Transitions

• Default transition: cross-fade
• Customize the animation used for elements using CSS animations and view transition pseudo elements

View Transitions

• Default transition: cross-fade
• Customize the animation used for elements using CSS animations and view transition pseudo elements

@keyframes scale-down {
        to { scale: 0; }
}

@keyframes scale-up {
        from { scale: 0; }
}

::view-transition-old(*) {
        animation: 600ms scale-down ease-out;
}

::view-transition-new(*) {
        animation: 600ms scale-up ease-in;
}

View Transitions

• Default transition: cross-fade
• Customize the animation used for elements using CSS animations and view transition pseudo elements

@keyframes scale-down {
        to { scale: 0; }
}

@keyframes scale-up {
        from { scale: 0; }
}

::view-transition-old(*) {
        animation: 600ms scale-down ease-out;
}

::view-transition-new(*) {
        animation: 600ms scale-up ease-in;
}

Demo panel showing a button labeled "Hello Code Leaders," used to illustrate the view transition animation.

View Transitions

• Default transition: cross-fade
• Customize the animation used for elements using CSS animations and view transition pseudo-elements

Note: also requires a tiny bit of JS to initiate

@keyframes scale-down {
        to { scale: 0; }
}

@keyframes scale-up {
        from { scale: 0; }
}

::view-transition-old(*) {
        animation: 600ms scale-down ease-out;
}

::view-transition-new(*) {
        animation: 600ms scale-up ease-in;
}

UI mockup showing a button labeled "Hello Code Leaders," illustrating an element that would undergo the demonstrated transition.

View Transitions

Dig in deeper to how these work from Bramus: https://youtu.be/pMaAHpKFEAo

QR code linking to the referenced YouTube video on View Transitions.

Scroll-Driven Animations

Scroll-Driven Animations

• Ability to build animations triggered by scrolling

Scroll-Driven Animations

• Ability to build animations triggered by scrolling
• Scrolling acts as the “scrubber” along the animation timeline

Scroll-Driven Animations

• Ability to build animations triggered by scrolling
• Scrolling acts as the “scrubber” along the animation timeline
  • Animations progress, pause, or reverse as you scroll up, down, left, and right

Scroll-Driven Animations

• Ability to build animations triggered by scrolling
• Scrolling acts as the “scrubber” along the animation timeline
  • Animations progress, pause, or reverse as you scroll up, down, left, and right
• Performance-enhanced animations since they are managed “off the main thread”

Scroll-Driven Animations

• Ability to build animations triggered by scrolling
• Scrolling acts as the “scrubber” along the animation timeline
  • Animations progress, pause, or reverse as you scroll up, down, left, and right
• Performance-enhanced animations since they are managed “off the main thread”
• Allows removing resource‑intensive JS solutions that require a scroll listener

Scroll-Driven Animation Timelines

Scroll-Driven Animation Timelines

Scroll Progress

• timeline is linked to scroll position

Scroll-Driven Animation Timelines

Scroll Progress

timeline is linked to scroll position

• Start of scroll container = 0%
• End of scroll container = 100%

Scroll-Driven Animation Timelines

Scroll Progress

Timeline is linked to scroll position.

• Start of scroll container = 0%
• End of scroll container = 100%

animation-timeline: scroll();

Scroll-Driven Animation Timelines

Scroll Progress

Timeline is linked to scroll position.

• Start of scroll container = 0%
• End of scroll container = 100%

animation-timeline: scroll();

View Progress

Timeline is linked to the relative position of an element in its scroll container.

Scroll-Driven Animation Timelines

Scroll Progress

timeline is linked to scroll position

• Start of scroll container = 0%
• End of scroll container = 100%

animation-timeline: scroll();

View Progress

timeline is linked to the relative position of an element in its scroll container

• Element enters scroll view = 0%
• Element exits scroll view = 100%

Scroll-Driven Animation Timelines

Scroll Progress

Timeline is linked to scroll position.

• Start of scroll container = 0%
• End of scroll container = 100%

animation-timeline: scroll();

View Progress

Timeline is linked to the relative position of an element in its scroll container.

• Element enters scroll view = 0%
• Element exits scroll view = 100%

animation-timeline: view();

Scroll-Driven Animation Examples

Scroll Progress

View Progress

Mockup showing a long article block with a thin progress bar at the top partially filled, illustrating a scroll-driven reading progress indicator.

Scroll-Driven Animation Examples

• Scroll Progress
• View Progress

Two side-by-side screenshots of a Wikipedia article about the polar bear. The left screenshot, labeled "Scroll Progress," shows the article header and introductory text. The right screenshot, labeled "View Progress," shows a later section of the article with a large photo of a polar bear next to text. These images illustrate two categories of scroll-driven animations.

Scroll-Driven Animations

Learn more and check out demos from Bramus:

https://scroll-driven-animations.style/

A QR code is shown for quick access to the linked resource.

Visual

• color-scheme
• light-dark()
• accent-color
• color-mix()
• subgrid
• text-wrap

Functional

• cascade layers
• container queries
• :has()
• popover
• anchor positioning
• custom select

Delightful

• entry animations
• view transitions
• scroll-driven animations

• Details

CSS has undergone a radical transformation in recent years, in response to its vital place in architecting complex web applications and interfaces.
From Cascade Layers, to new, more powerful, selectors, and sophisticated layout capabilities, catch up on what’s changed about CSS and how it’s the foundation for modern Web UIs.

You may also be interested in

Practical Uses For Container Queries

Stephanie Eckles

John Allsopp in conversation with Stephanie Eckles and Fershad Irani

John Allsopp

Once More with Feeling

Tim Kadlec

CSS Grid Layout

Rachel Andrew

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

Does Your Web App Speak Schadenfreude?

Greg Rewis

CSS: Code Smell Sanitation

Fiona Chan

More presentations from Code Leaders 2025

The making of a decision

Andrea Magnorsky



One does not simply rebuild a product

Prakriti Mateti



AI in Software Delivery beyond Copilot: reimagining software delivery

Sarah Taraporewalla



The future belongs to people who can just do things

Geoffrey Huntley



Maximising Impact: The Strategic Role of Tech Leaders in Leading Accessibility Efforts

Maia Miller



The state (of the art) of Observability: Using telemetry to create insights into user experiences and business outcomes

Erwin van der Koogh



Building a grid-aware web

Fershad Irani



John Allsopp in conversation with Stephanie Eckles and Fershad Irani

John Allsopp