Una Kravets Online

Combine three new CSS features to build fully adaptive themed components.

Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.

Let the browser pick the most readable text color for any background with this new CSS function.

Learn about new geometry capabilities with this game-changing experimental CSS feature.

2025 in review.

Style based on scroll direction with this new scroll-state query feature.

Sculpt a more dynamic web, and learn about the new CSS and UI features that landed in Chrome in 2025.

Learn how to use the new range syntax for CSS style queries and the if() function.

Identify and style an anchored element in a fallback anchor position.

Learn how to create a dynamically re-anchored pointer element.

CSS custom functions are a gamechanger.

scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

Learn about what exactly this new popover feature does and how it relates to interest invokers.

Advanced attr() is landing in Chrome 133, and I'm really excited for this feature!

Everything that has changed since the RFC post for this feature.

2024 in review.

Learn about the new customizable select component, and try it out today.

The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.

The web platform is alive with innovation, with CSS and web UI features at the forefront of this exciting evolution.

The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.

Popover provides so many great developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more.

Annual year in review: 2023 edition.

2023 was a huge year for CSS!

The select element gets a small but mighty upgrade where you can now add (horizontal rule) elements into the list of options and they will appear as separators.

These four new features include: animating display and content-visibility on a keyframe timeline, the transition-behavior property, the @starting-style rule, and the overlay property.

Learn how to build a fluid, modern radial menu leveraging new and upcoming CSS capabilities.

Catching up on last year's year-in-review post

Popovers are everywhere on the web platform.

Popovers are everywhere on the web platform.

Build an alpha color system without splitting out channels using this one neat trick.

With style queries landing in stable Chrome, learn about how to use them in applications.

Learn about working with container queries and the polyfill.

Learn about working with container queries and the polyfill.

Leverage the responsive UI power of container queries + :has().

Exploring when and how you would use style queries in your day-to-day work.

Learn about using cascade layers to control the CSS cascade for more targetted styles.

Reviewing 2021's highs, lows, and everything in between.

Behind-the-scenes of designcember.com.

I answer the question "what is one thing you can do to make your site better?"

CSS-related techniques for optimizing Core Web Vitals.

Controlling macro and micro layout in a new era of responsive web design.

@container brings us the ability to style elements based on the size of their parent container.

Learn about using cascade layers to control the CSS cascade for more targetted styles.

The new CSS property that helps maintain spacing in responsive layouts.

Well this year absolutely sucked.

Supercharging your CSS with Houdini paint worklets is just a few clicks away.

Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.

Improve initial load time by skipping the rendering of offscreen content.

The Houdini Properties and Values API is coming to your CSS file in Chromium 85.

This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.