# Una Kravets The personal blog of Una Kravets. Web development, design, and platform news. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Modern CSS theming with light-dark(), contrast-color(), and style queries DevFeed: [Modern CSS theming with light-dark(), contrast-color(), and style queries]() Original publisher: [Read original article]() Published: 2026-06-22T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [color](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [dynamic-theming](), [media](), [scheme](), [support](), [themes]() ### AI overview This tutorial explains how to combine light-dark(), contrast-color(), style queries, custom properties, and related CSS color features to create adaptive themed components. It covers light and dark color schemes, context-sensitive palettes, automatic text contrast, and different elevation effects for each theme. ### Source excerpt Combine three new CSS features to build fully adaptive themed components. ## contrast-color() beyond black & white DevFeed: [contrast-color() beyond black & white]() Original publisher: [Read original article]() Published: 2026-03-13T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [color](), [Web platform](), [Web Development]() Tags: [color](), [css](), [demo](), [how-to](), [web-platform]() ### AI overview This tutorial presents two techniques for extending CSS contrast-color() beyond its black-or-white result: tinting a brand color with the returned value, and creating custom color palettes with style queries and custom properties. It emphasizes validating the resulting color combinations with WCAG or APCA contrast checkers. ### Source excerpt Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes. ## Automated accessible text with contrast-color() DevFeed: [Automated accessible text with contrast-color()]() Original publisher: [Read original article]() Published: 2026-03-12T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [Web Development](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [design-system]() ### AI overview The article explains how CSS contrast-color() can automatically choose the higher-contrast text color for a given background. It covers its contrast-ratio behavior, use in design-system buttons, dark mode, hover states, and algorithmically generated color palettes. ### Source excerpt Let the browser pick the most readable text color for any background with this new CSS function. ## The experimental CSS border-shape property for non-rectangular elements DevFeed: [The experimental CSS border-shape property for non-rectangular elements]() Original publisher: [Read original article]() Published: 2026-02-19T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [Web platform](), [Chrome Canary](), [browser]() Tags: [chrome-canary](), [code](), [css](), [demo](), [experimental](), [property](), [syntax](), [web-platform]() ### AI overview This article introduces the experimental CSS border-shape property, which defines custom border geometry for non-rectangular elements. It explains how backgrounds, borders, outlines, and shadows follow the new shape, compares it with border-radius, and demonstrates creating tooltips with a fallback. ### Source excerpt Learn about new geometry capabilities with this game-changing experimental CSS feature. ## 2025 in Review DevFeed: [2025 in Review]() Original publisher: [Read original article]() Author: Kate Quinn Published: 2026-01-06T00:00:00Z Content type: opinion Language: en Sources: [Una Kravets]() Topics: [Web platform](), [Google](), [Responsive Design](), [ui]() Tags: [2025](), [developer](), [google](), [google-i-o](), [keynote](), [responsive-design](), [web](), [web-platform](), [work]() ### AI overview A personal review of 2025 covering family life, travel, creative projects, reading, and career milestones. The author reflects on contributing to web platform capabilities at Google, including container queries, anchor positioning, and customizable select menus, and outlines an intention to improve the web experience in 2026. ### Source excerpt 2025 in review. ## Directional CSS with scroll-state(scrolled) DevFeed: [Directional CSS with scroll-state(scrolled)]() Original publisher: [Read original article]() Published: 2025-12-17T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS]() Tags: [css]() ### AI overview This tutorial explains how the CSS scroll-state(scrolled) query can style descendants according to the most recent scroll direction. It covers supported direction values and demonstrates hiding and revealing navigation bars with fixed or sticky positioning. ### Source excerpt Style based on scroll direction with this new scroll-state query feature. ## New CSS and UI Features in Chrome in 2025 DevFeed: [New CSS and UI Features in Chrome in 2025]() Original publisher: [Read original article]() Published: 2025-12-08T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [Chrome](), [ui](), [Web]() Tags: [2025](), [chrome](), [css](), [features](), [learn](), [ui](), [web]() ### AI overview An overview of new CSS and UI features that landed in Chrome during 2025, aimed at helping developers create more dynamic websites. ### Source excerpt 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 DevFeed: [Range Syntax for Style Queries]() Original publisher: [Read original article]() Published: 2025-11-12T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [Web Development](), [Code]() Tags: [css](), [demo](), [example](), [function](), [how-to](), [learn](), [properties](), [range](), [syntax]() ### AI overview A tutorial on using range syntax in CSS style queries and the if() function. It explains comparisons involving custom properties, literal values, and function results, with examples for responsive components, weather cards, grid placement, and styling effects. ### Source excerpt 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 DevFeed: [Detect fallback positions with anchored container queries from Chrome 143]() Original publisher: [Read original article]() Published: 2025-10-29T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [container](), [Chrome]() Tags: [chrome](), [container]() ### AI overview A tutorial on identifying and styling an anchored element in a fallback anchor position using anchored container queries from Chrome 143. ### Source excerpt Identify and style an anchored element in a fallback anchor position. ## Follow-the-leader pattern with CSS anchor positioning DevFeed: [Follow-the-leader pattern with CSS anchor positioning]() Original publisher: [Read original article]() Published: 2025-09-11T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [Web Development](), [JavaScript](), [ui]() Tags: [css](), [demo](), [how-to](), [javascript]() ### AI overview A tutorial on creating a follow-the-leader effect with CSS anchor positioning. It explains how to dynamically re-anchor a follower element during hover, focus, selection, and other state changes, using CSS transitions and JavaScript where needed. ### Source excerpt Learn how to create a dynamically re-anchored pointer element. ## 5 Useful CSS functions using the new @function rule DevFeed: [5 Useful CSS functions using the new @function rule]() Original publisher: [Read original article]() Published: 2025-08-13T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS functions](), [CSS](), [Design system](), [Font]() Tags: [code](), [css](), [css-functions](), [design](), [examples](), [fonts](), [properties](), [syntax](), [tricks](), [typography]() ### AI overview A tutorial demonstrating five practical uses for CSS custom functions introduced with the new @function rule. The examples cover negating values, creating opacity variants, fluid typography, and conditionally rounded borders, with emphasis on clearer and more organized CSS. ### Source excerpt CSS custom functions are a gamechanger. Here are 5 really useful examples. ## Creating a scroll-spy with 2 lines of CSS DevFeed: [Creating a scroll-spy with 2 lines of CSS]() Original publisher: [Read original article]() Published: 2025-07-29T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [Web Development](), [Web platform]() Tags: [blog-post](), [css](), [explainer]() ### AI overview A tutorial showing how the CSS scroll-target-group feature can create a scroll-spy table of contents with two lines of CSS and anchor links, without JavaScript. ### Source excerpt 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? DevFeed: [What is popover=hint?]() Original publisher: [Read original article]() Published: 2025-07-07T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [HTML](), [Web platform](), [web-standards](), [interactive web experiences](), [JavaScript](), [ui]() Tags: [feature](), [html](), [javascript](), [learn](), [ui](), [web]() ### AI overview This article explains the popover=hint type introduced in Chrome 133. It describes how hint popovers can appear without closing unrelated popovers, including hover-based examples such as tooltips, link previews, profile cards, and comment previews. It also discusses JavaScript event listeners and experimental interest invokers for more declarative behavior. ### Source excerpt Learn about what exactly this new popover feature does and how it relates to interest invokers. ## New capabilities for attr() DevFeed: [New capabilities for attr()]() Original publisher: [Read original article]() Published: 2025-01-21T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [Chrome](), [Front end]() Tags: [capabilities](), [chrome](), [css]() ### AI overview A tutorial on the expanded CSS attr() function arriving in Chrome 133. It explains typed attribute references, fallback values, and using attributes such as colors in front-end components. ### Source excerpt 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 DevFeed: [Updates to the customizable select API]() Original publisher: [Read original article]() Published: 2025-01-10T00:00:00Z Content type: release Language: en Sources: [Una Kravets]() Topics: [browser](), [API](), [Web platform](), [web-standards](), [Web Development]() Tags: [api](), [browser](), [customizable](), [developer](), [flexbox](), [updates]() ### AI overview An update on the customizable select API describes changes since its RFC, including renamed elements, revised pseudo-elements, a less intrusive user-agent stylesheet, flexbox-based option styling, and the opt-in usage model. ### Source excerpt Everything that has changed since the RFC post for this feature. ## 2024 in Review DevFeed: [2024 in Review]() Original publisher: [Read original article]() Author: Alison Espach Published: 2025-01-06T00:00:00Z Content type: opinion Language: en Sources: [Una Kravets]() Topics: [CSS](), [HTML](), [browser](), [devrel](), [Google]() Tags: [browser](), [css](), [devrel](), [google](), [html](), [year-in-review]() ### AI overview A personal review of 2024 covering family life, home projects, travel, conference speaking, and work leading Google's CSS and UI DevRel team. It highlights progress on native UI features such as anchor positioning and customizable select elements, along with continued developments in CSS and HTML. ### Source excerpt 2024 in review. ## CSS @property and browser support for custom properties DevFeed: [CSS @property and browser support for custom properties]() Original publisher: [Read original article]() Published: 2024-07-12T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [Web Development](), [browser]() Tags: [browser](), [css](), [development](), [property](), [variables](), [web-development]() ### AI overview This article discusses the CSS @property feature, describing it as a way to use CSS variables with broad browser support. ### Source excerpt 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 DevFeed: [The latest in CSS and web UI: I/O 2024 recap]() Original publisher: [Read original article]() Published: 2024-06-11T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [ui](), [Web platform](), [Web]() Tags: [css](), [evolution](), [features](), [innovation](), [latest](), [platform](), [recap](), [ui](), [web](), [web-platform]() ### AI overview A recap of I/O 2024 covering the latest CSS and web UI features, presented in the context of ongoing web platform innovation. ### Source excerpt 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 DevFeed: [Introducing the CSS anchor positioning API]() Original publisher: [Read original article]() Published: 2024-05-10T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [API](), [Web Development]() Tags: [api](), [css](), [web-development]() ### AI overview The article introduces the CSS Anchor Positioning API, which enables native positioning of elements in web development. ### Source excerpt The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements. ## Popover API lands in Baseline DevFeed: [Popover API lands in Baseline]() Original publisher: [Read original article]() Published: 2024-04-25T00:00:00Z Content type: release Language: en Sources: [Una Kravets]() Topics: [API](), [interfaces]() Tags: [api](), [developer](), [interfaces]() ### AI overview The article reports that the Popover API has landed in Baseline and notes its use for layered interfaces such as tooltips, menus, and teaching UIs. ### Source excerpt Popover provides so many great developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more. ## 2023 in Review DevFeed: [2023 in Review]() Original publisher: [Read original article]() Author: Hugh Howey Published: 2023-12-31T00:00:00Z Content type: opinion Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development]() Tags: [css](), [reflections](), [tech](), [year-in-review]() ### AI overview A personal review of 2023 covering stress, anxiety, depression, health challenges, travel, sewing, home ownership, career milestones, and work on CSS features. The article also reports growth for The CSS Podcast, including a redesign, a fourth season, new episodes, and audience figures. ### Source excerpt Annual year in review: 2023 edition. ## CSS and Web UI Highlights That Landed in Browsers in 2023 DevFeed: [CSS and Web UI Highlights That Landed in Browsers in 2023]() Original publisher: [Read original article]() Published: 2023-12-08T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [browsers](), [ui](), [Web]() Tags: [browsers](), [css](), [learn](), [ui](), [web]() ### AI overview An overview of CSS and Web UI highlights that landed in browsers during 2023. ### Source excerpt 2023 was a huge year for CSS! Learn about all the Web UI highlights that landed in browsers this year. ## Four new CSS features for smooth entry and exit animations DevFeed: [Four new CSS features for smooth entry and exit animations]() Original publisher: [Read original article]() Published: 2023-08-16T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [how to create smooth CSS transitions](), [Web Development]() Tags: [behavior](), [css](), [display](), [features](), [property](), [visibility]() ### AI overview The article presents four CSS features for creating smooth entry and exit animations: animating display and content-visibility in keyframe timelines, the transition-behavior property, the @starting-style rule, and the overlay property. ### Source excerpt 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 DevFeed: [Building a no-JS radial menu with CSS trigonometry, popover, and anchor positioning]() Original publisher: [Read original article]() Published: 2023-07-20T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [Web Development](), [Front end]() Tags: [accessibility](), [building](), [css](), [front-end](), [how-to](), [html](), [ui](), [web]() ### AI overview A tutorial for building a no-JavaScript radial menu with CSS trigonometric functions, the popover attribute, and anchor positioning. It explains the HTML structure, accessibility considerations, grid-pile layout, and the geometry used to calculate circular item positions. ### Source excerpt Learn how to build a fluid, modern radial menu leveraging new and upcoming CSS capabilities. [Next page]()