Modern CSS theming with light-dark(), contrast-color(), and style queries
Combine three new CSS features to build fully adaptive themed components.
Una Kravets Online
The personal blog of Una Kravets. Web development, design, and platform news.
Latest posts
contrast-color() beyond black & white
Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.
Automated accessible text with contrast-color()
Let the browser pick the most readable text color for any background with this new CSS function.
border-shape: the future of the non-rectangular web
Learn about new geometry capabilities with this game-changing experimental CSS feature.
2025 in Review
2025 in review.
Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
CSS Wrapped: 2025!
Sculpt a more dynamic web, and learn about the new CSS and UI features that landed in Chrome in 2025.
Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
Detect fallback positions with anchored container queries from Chrome 143
Identify and style an anchored element in a fallback anchor position.
Follow-the-leader pattern with CSS anchor positioning
Learn how to create a dynamically re-anchored pointer element.
5 Useful CSS functions using the new @function rule
CSS custom functions are a gamechanger. Here are 5 really useful examples.
Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
What is popover=hint?
Learn about what exactly this new popover feature does and how it relates to interest invokers.
New capabilities for attr()
Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
Updates to the customizable select API
Everything that has changed since the RFC post for this feature.
2024 in Review
2024 in review.
Customizable select: request for developer feedback
Learn about the new customizable select component, and try it out today.
@property: Next-gen CSS variables now with universal browser support
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.
The latest in CSS and web UI: I/O 2024 recap
The web platform is alive with innovation, with CSS and web UI features at the forefront of this exciting evolution.
Introducing the CSS anchor positioning API
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.
Popover API lands in Baseline
Popover provides so many great developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more.
2023 in Review
Annual year in review: 2023 edition.
CSS Wrapped: 2023!
2023 was a huge year for CSS! Learn about all the Web UI highlights that landed in browsers this year.
Select element: now with horizontal rules
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.
Four new CSS features for smooth entry and exit animations
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.
Building a no-JS radial menu with CSS trigonometry, popover, and anchor positioning
Learn how to build a fluid, modern radial menu leveraging new and upcoming CSS capabilities.
2022.5 in Review
Catching up on last year's year-in-review post
Introducing the popover API
Popovers are everywhere on the web platform. Learn how to use the new web platform primitives to take advantage of them today.
What's new in CSS and UI: I/O 2023 Edition
Popovers are everywhere on the web platform. Learn how to use the new web platform primitives to take advantage of them today.
Using color-mix() to create opacity variants
Build an alpha color system without splitting out channels using this one neat trick.
Getting started with style queries
With style queries landing in stable Chrome, learn about how to use them in applications.
Container queries land in stable browsers
Learn about working with container queries and the polyfill.
Working with container queries today
Learn about working with container queries and the polyfill.
@container and :has(): two powerful new responsive APIs
Leverage the responsive UI power of container queries + :has().
Style Queries
Exploring when and how you would use style queries in your day-to-day work.
Cascade layers are coming to your browser
Learn about using cascade layers to control the CSS cascade for more targetted styles.
2021 in Review
Reviewing 2021's highs, lows, and everything in between.
How we Built Designcember
Behind-the-scenes of designcember.com.
Personalize It!
I answer the question "what is one thing you can do to make your site better?"
CSS for Web Vitals
CSS-related techniques for optimizing Core Web Vitals.
The new responsive: Web design in a component-driven world
Controlling macro and micro layout in a new era of responsive web design.
Next Gen CSS: @container
@container brings us the ability to style elements based on the size of their parent container.
Updates in hardware-accelerated animation capabilities
Learn about using cascade layers to control the CSS cascade for more targetted styles.
New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly
The new CSS property that helps maintain spacing in responsive layouts.
2020 in Review
Well this year absolutely sucked. But I'll try to take a look at the positive.
Cross-browser paint worklets and Houdini.how
Supercharging your CSS with Houdini paint worklets is just a few clicks away.
min(), max(), and clamp(): Three Logical CSS Functions to Use Today
Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.
content-visibility: the New CSS Property that Boosts your Rendering Performance
Improve initial load time by skipping the rendering of offscreen content.
@property: giving superpowers to CSS variables
The Houdini Properties and Values API is coming to your CSS file in Chromium 85.
Ten Modern Layouts in One Line of CSS
This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.