Una Kravets is a web platform engineer and writer focused on modern CSS and UI capabilities. Her work explores cutting-edge features like container queries, anchor positioning, scroll-driven styling, and the future of web UI architecture.
105 articles from this blog
Highlights 20 new and upcoming CSS and UI features announced at Google I/O 2023, including container queries, nesting, and scroll-driven animations.
Explains how to use the CSS color-mix() function to create semi-transparent variants of brand colors by mixing them with transparency.
A guide to using CSS style queries, a new feature for querying parent element styles and custom properties to separate data from design.
Container queries and container query units are now stable in all modern browsers, enabling responsive components based on parent element size.
A guide to using CSS container queries, a new feature for component-based responsive web design, including browser support and polyfill updates.
Explains the new CSS @container queries and :has() selector, their synergy for responsive design, and how to use them in Chromium 105.
Explains CSS style container queries, a new feature allowing child elements to adapt based on parent element styles, not just size.
Cascade layers (@layer) are arriving in major browsers, offering developers explicit control over CSS specificity to prevent style conflicts.
A technical deep dive into building the Designcember holiday calendar site, covering responsive design, CSS techniques, and development tools.
Explains how to use CSS media queries like prefers-reduced-motion and prefers-color-scheme to create accessible, personalized, and battery-friendly websites.
CSS techniques to optimize Core Web Vitals like LCP and CLS, covering layout, images, fonts, and animations for better performance.
Explores the next era of responsive web design, moving beyond viewport media queries to user preferences, container queries, and component-driven styles.
Explains the upcoming CSS @container feature for responsive element styling based on parent size, not just viewport.
Chromium updates enable automatic hardware acceleration for SVG animations, percentage-based transforms, and upcoming background-color and clip-path animations.
The new CSS aspect-ratio property is now supported in major browser engines, helping developers create responsive layouts without hacks.
A guide to using CSS Houdini's Paint API and worklets for custom, programmatic styling across browsers.
A guide to using the CSS functions min(), max(), and clamp() for responsive element sizing, spacing, and fluid typography.
Explains the CSS content-visibility property and how it improves web page rendering performance by skipping off-screen content.
Explains the CSS @property rule, part of Houdini, which adds type checking, fallbacks, and inheritance control to CSS custom properties.
A guide to ten powerful modern CSS layouts, each achievable with just a single line of CSS code.
