What’s New and What’s Next in Web UI

What if components could respond to their container, not just the viewport? Discover container queries, the parent selector, and a new era of modular web design.

#1about 2 minutes

Understanding Baseline for cross-browser feature compatibility

The Baseline initiative helps developers identify which new web features are safely supported across all major browsers.

#2about 4 minutes

Building component-driven layouts with container queries

Container queries allow styling child elements based on a parent container's size and style properties, enabling more modular responsive components.

#3about 3 minutes

Using the CSS :has() selector for parent and sibling styling

The `:has()` pseudo-class acts as a parent selector, allowing you to style an element based on its children or subsequent siblings.

#4about 4 minutes

Improving typography and layout with modern CSS properties

New CSS properties like `text-wrap: balance`, `initial-letter`, dynamic viewport units, and wide-gamut colors offer more refined control over visual presentation.

#5about 3 minutes

Organizing stylesheets with CSS nesting and cascade layers

Native CSS nesting and cascade layers provide powerful tools to manage style specificity and organize code without pre-processors.

#6about 1 minute

Avoiding style collisions with native scoped CSS

The upcoming `@scope` rule will allow developers to natively scope styles to specific elements, preventing style leaks and naming collisions.

#7about 2 minutes

Building accessible UIs with the native Popover API

The `popover` attribute provides built-in functionality for top-layer promotion, light-dismiss behavior, and accessibility, reducing the need for JavaScript.

#8about 2 minutes

Creating scroll-driven and discrete property animations

Animate previously non-animatable properties with discrete animations and create dynamic effects tied to scroll position using scroll-driven animations.

#9about 1 minute