> Markdown version of [/videos/956-what-s-new-and-what-s-next-in-web-ui?t=1299](https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui?t=1299). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # What’s New and What’s Next in Web UI Are you still writing JavaScript for responsive components and popovers? Welcome to the golden era of native CSS where container queries and declarative APIs handle the heavy lifting. - **Speakers:** [Cleyra Uzcategui](https://www.wearedevelopers.com/@cleyra-uzcategui) - **Event:** World Congress 2024 - **Published:** August 20, 2024 - **Duration:** 22:46 - **URL:** https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui ## Summary The web UI platform has entered a golden era of natively supported features that dramatically reduce the need for JavaScript while offering richer customization. By consulting 'Baseline' compatibility badges, developers can easily track whether a feature is widely or newly available across modern browsers. The overarching theme of these capabilities is a shift toward 'less scripting, more customization and more declarative APIs,' empowering engineers to build complex, highly interactive interfaces seamlessly. Responsive design is evolving well beyond the viewport. Container queries allow developers to style elements based on a parent’s size or local style states, paving the way for truly modular and reusable UI components. Paired with the `:has()` selector—effectively functioning as a parent and logical operator—teams can build complex architectural rules, such as quantity queries, without writing extra scripts. Everyday styling frustrations are also heavily mitigated: `text-wrap: balance` elegantly proportions multi-line headings, `initial-letter` simplifies drop caps, and dynamic viewport units natively account for unpredictable mobile browser toolbars to prevent unwanted overflow scrolling. Modern CSS architecture is also receiving major developer experience upgrades to maintain complex style sheets safely. Native CSS nesting eliminates the reliance on external preprocessors, keeping stylesheets clean and intuitive. Meanwhile, CSS cascade layers guarantee source order consistency against aggressive module bundlers, and upcoming native scoped styles will prevent file collision without requiring arbitrary naming conventions. Interactivity and state management are similarly moving back to the browser layer. The newly standardized `popover` attribute provides built-in top layer promotion—meaning developers no longer have to fight with z-index positioning—while simultaneously managing focus, accessibility, and light-dismiss behaviors out of the box. Enhancing these UI elements are discrete animations that finally allow transitions to and from `display: none` natively. Furthermore, declarative scroll-driven animations replace rigid timer-based scripting, allowing dynamic visual narrative effects to be powered entirely by modern CSS. **Keywords:** baseline feature browser compatibility, CSS container style queries, CSS :has() parent selector logic, text-wrap balance typography formatting, dynamic viewport responsive units, wide gamut display P3 colors, native CSS code nesting, CSS cascade layer source ordering, native CSS scoped styles, HTML popover top layer attribute, z-index positioning alternatives, discrete HTML state animations, declarative scroll-driven animations, modular component web UI design ## Chapters 1. **Understanding Baseline badges for browser compatibility** (01:54) — How Baseline badges identify which web features work consistently across multiple target browsers. 1. **Building responsive layouts with container and style queries** (04:19) — How container queries enable developers to create modular components based on parent size and styles. 1. **Applying dynamic styling with the CSS has selector** (08:15) — How the has selector enables developers to construct logical styles based on varied child states. 1. **Enhancing typography with text wrap balance and initial letter** (10:45) — How new typography properties resolve headings weight issues and allow granular drop cap styling. 1. **Managing screen space with dynamic viewport units** (12:29) — How new dynamic viewport concepts automatically account for mobile UI elements to prevent unwanted scrolling. 1. **Accessing vivid aesthetics with wide gamut colors** (13:34) — How integrating wide gamut arrays like Display P3 creates visually richer user experience interfaces. 1. **Improving developer experience with CSS nesting and cascade layers** (14:23) — How native CSS nesting and cascade layers eliminate source ordering headaches and improve project architecture. 1. **Preventing style collisions natively with CSS scoped styles** (17:10) — How using native scoped mechanisms safely isolates component aesthetics without over-relying on strict naming frameworks. 1. **Simplifying UI overlays using the native popover API** (18:01) — How integrating native popover attributes offloads complex top layer accessibility and logic directly to browsers. 1. **Smoothing element transitions via discrete animations** (20:01) — How animating hidden elements prevents abrupt interface jumps to maintain uninterrupted graphical experiences. 1. **Building declarative visual effects with scroll-driven animations** (20:56) — How routing CSS animations dynamically through scroll actions avoids clunky custom JavaScript scroll listeners. 1. **Tracking upcoming web capabilities and industry resources** (21:39) — How to leverage official developer documentation channels to seamlessly integrate newly standardized browser platform capabilities. ## Related Moments - [Understanding Interop 2025 and new CSS capabilities](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw") - [Introduction to modern CSS capabilities for designers](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?") - [Anticipating missing CSS features and upcoming standardizations](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?") - [Evaluating the future utility of CSS Houdini web standards](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?") - [Replacing JavaScript interactions with native CSS features](https://www.wearedevelopers.com/videos/1819-wearedevelopers-live-yes-css-can-do-that) (from "WeAreDevelopers LIVE - Yes, CSS Can Do That!") - [Building robust applications with standard web platforms](https://www.wearedevelopers.com/videos/568-blazing-accessibility-basics) (from "Blazing Accessibility Basics") ## Related Articles - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) - [The State of HTML 2024: What can we learn from it?](https://www.wearedevelopers.com/magazine/506-the-state-of-html-2024-what-can-we-learn-from-it) ## Related Jobs - [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia** - [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**