CSS @when / @else Conditions
Conditional logic inside CSS without media queries or JS
- State-driven styles
- Declarative theming
- Hydration-free UI logic
- Conditional component modes
web-platform22 min read
Modern HTML & CSS Features Powering the Next Generation of Resumable UI Frameworks
This article explores the new wave of browser-native features introduced between 2023–2025. These capabilities fundamentally change how UI frameworks can be built: enabling resumability, zero-JS controls, native state handling, accessible components, and server-rendered shadow DOM without hydration. This is the first comprehensive map of modern CSS and HTML features intended specifically for framework authors, design system teams, and engineers building next-generation UI kits.
By Engineering Architecture Team
Summary
Over the last two years, browsers have gained an unprecedented set of native capabilities: CSS conditions, @scope, anchor positioning, declarative shadow DOM, customizable select controls, the popover API, and more. These features dramatically reduce the need for JavaScript-driven UI, unlock server-rendered component trees without hydration, and provide primitives that previously required full frameworks. For teams building resumable architectures or buildless UI frameworks, these native features shift fundamental assumptions: many “framework responsibilities” now belong to the browser itself.
A New Baseline: What Modern HTML & CSS Now Provide
CSS @scope
True component-scoped styling without Shadow DOM
- Avoid selector conflicts
- Local override rules
- Framework-style encapsulation
CSS Anchor Positioning
Attach UI elements to triggers without manual coordinates
- Tooltips
- Menus
- Popovers
- Zero-JS positioning
CSS :has() Parent Selector
Conditional styling based on child state
- Form validation UI
- Navigation highlights
- Interactive lists
CSS Nesting
Native nested selectors
- Cleaner tokens
- Component-scoped structure
- Sass-like ergonomics
CSS Cascade Layers
Explicit ordering of reset/theme/component layers
- Stable design systems
- Predictable overrides
- Conflict-free theming
Layout & Interaction: The Features That Replace JavaScript
Popover API
Native popover lifecycle with escape handling, focus management, and animations
- Dropdowns
- Context menus
- Command palettes
- Accessible by default
Dialog Element (Modern)
Fully accessible modal behavior built into HTML
- Trap focus
- Backdrops
- Inert page disabling
- Server-friendly
Inert Attribute
Disable entire regions of the DOM without JS logic
- Modal states
- Side panels
- Content locking
Customizable Select (Open UI)
Selectable UI with complete styling control
- No fake selects
- Accessible listboxes
- Declarative popovers
Subgrid + Masonry (emerging)
Next-generation layout primitives
- Dashboard layouts
- Fluid grids
- Component alignment
View Transitions
Browser-native DOM transitions
- Route animations
- UI state transitions
- Declarative motion
Declarative Shadow DOM: The Breakthrough for SSR & Resumability
Declarative Shadow DOM (DSD) introduces server-rendered shadow roots directly in HTML. Combined with `` and static stylesheets, this unlocks fully styled, encapsulated UI components rendered at the edge without client bootstrapping or hydration. For resumable frameworks, this eliminates the need to reconstruct component trees on the client. State resumes only where needed.
A New Foundation for Design Systems
Modern CSS introduces primitives that completely reshape how design tokens, themes, and component states are implemented. With `@property`, `color-mix()`, `relative-color()`, and new color spaces like OKLCH, theme systems can be mathematically defined instead of manually curated.
CSS @property
Typed custom properties enabling safer animations and theme variables
- Predictable tokens
- Reduced runtime JS
- Smooth transitions
OKLCH Colors
Perceptually uniform color math
- Dynamic palettes
- Accessible contrast
- Algorithmic theming
accent-color
Native theming for form controls
- Checkboxes
- Radios
- Ranges
- Progress bars
color-contrast()
Automatic WCAG-aware color selection
- Accessible themes
- Responsive palette generation
Impact on Framework Architecture
With these platform primitives, a modern UI framework can eliminate substantial hydration, client-side rendering, and JS-heavy interaction handling. The browser now covers popovers, dialogs, position logic, scoped styling, color systems, and even conditional state logic. The architectural result is a framework that focuses on: • partial serialization of state • resumable fine-grained interaction • server-rendered component structure • minimal client-side activation
| Old Responsibility | Implemented In | Replaced By |
|---|---|---|
| Dropdown logic | React/Vue/Svelte | Popover API + Anchor Positioning |
| Modal accessibility | Framework components | HTML Dialog + inert |
| Parent/child state styling | JS event/state | :has() + @when |
| Component style scoping | CSS-in-JS | @scope + Cascade Layers |
| Custom select widgets | JS UI libraries | Selectlist + Popover |
| Client state hydration | Framework runtime | Declarative Shadow DOM |
Conclusion
The HTML and CSS platform of 2025 provides the strongest foundation ever for building a resumable, server-native UI framework. With declarative shadow DOM, anchor positioning, CSS conditions, scoped styling, and native popover/dialog controls, many responsibilities once handled by heavyweight frameworks are now built directly into the browser. The next generation of UI frameworks will not compete with the platform—they will build on it. This shift makes room for architectures that are simpler, faster, and fundamentally aligned with how the browser naturally works.
Prerequisites
- Working knowledge of modern HTML and CSS
- Understanding of SSR and hydration in existing frameworks
- Familiarity with Web Components and design systems
- Awareness of browser rendering pipelines and performance considerations
Related Articles
When Startups Need External Technical Guidance
Clear triggers, models, and ROI for bringing in external guidance—augmented responsibly with AI
Read more →Technology Stack Evaluation: Framework for Decisions
A clear criteria-and-evidence framework to choose and evolve your stack—now with AI readiness and TCO modeling
Read more →Technology Risk Assessment for Investment Decisions
Make risks quantifiable and investable—evidence, scoring, mitigations, and decision gates
Read more →Technical SEO Priorities for New Websites
Ship the technical essentials that actually move SEO for new sites
Read more →Modern Web Rendering Models: An Investor-Focused Overview
Understanding CSR, SSR, SSG, hydration, resumability, and PWAs—and why resumability represents the next efficiency breakthrough
Read more →