New Front-End Features For Designers In 2025 — Smashing Magazine

The Web Platform's Quiet Upgrade

Some of the most flexible workflows now come from fundamentals that have been quietly evolving. What used to require JavaScript can often be done with a single line of HTML and CSS. Container queries, style queries, relative colors, and finer-grained form controls are broadly available in modern browsers, making this a good moment to see what these features can actually do.

Component-Specific Styling With Container And Style Queries

Container queries let you style components based on the container they live in rather than the viewport.

Style queries currently work only with CSS custom property values, but that covers real use cases: reusable components with multiple variations, or situations where you don't control all styles but need targeted overrides.

Better Typography Without Orphans And Widows

The classic orphan problem — a headline's last word stranded on its own line — has a CSS-native answer. Applying text-wrap: balance lets the browser calculate word counts and distribute them more evenly across lines. It's ideal for page titles, card titles, tooltips, modals, and FAQs.

For large blocks of text, text-wrap: pretty prevents orphans on the final line of paragraphs.

Auto-Sizing Form Fields

Sizing inputs usually means guesswork or character-counting JavaScript. CSS field-sizing changes that: inputs and text areas auto-grow, and short select menus can auto-shrink so forms always match their content. It takes a single line of CSS.

To keep fields from becoming too small or too large, pair the property with additional constraints.

Searchable Hidden Content

Accordions have a known flaw: collapsed content is invisible to find-in-page search. The hidden=until-found attribute fixes that, and even makes content available to search engines. When a user's search triggers a reveal, the beforematch event fires on the element right before the browser shows it — useful for keeping other UI state in sync.

Select Menu Grouping And Separators

Small changes to the <select> element make a difference. Adding <hr> elements inside select options renders them as visual separators, breaking up long lists.

For structure beyond separators, <optgroup> groups options under a subheading.

Simplified Scroll Snapping

CSS scroll snap delivers a controlled scrolling experience — precise horizontal or vertical swipes that snap to specific items — without JavaScript. It suits image galleries, avatar lists, and similar components.

Anchor Positioning For Overlays And Tooltips

The CSS Anchor Positioning API natively positions elements relative to other elements, called anchors. Use cases include footnotes, tooltips, connector lines, visual cross-referencing, and dynamic chart labels.

You can tether to a single anchor or multiple ones, and size positioned elements based on their anchor. Because browser support is still limited, it's worth testing carefully before adopting.

High-Definition Color With OKLCH And OKLAB

The OKLCH, OKLAB, LCH, and LAB color spaces give access to roughly 50% more colors than RGB and HSL. Both OKLCH and OKLAB are perceptually based and can specify any color visible to the human eye. OKLAB works well for rich gradients, while OKLCH suits design system palettes. Support is solid across Chrome, Edge, Safari, Firefox, and Opera; Figma doesn't support them yet.

Relative Color Syntax

The relative color syntax (RCS) lets you derive new colors from existing ones without manual calculation. Want to reduce a background color's luminosity by 25% or find a complementary shade? The from keyword inside color functions like color(), hsl(), and oklch() makes it possible.

View Transitions Between And Within Pages

The View Transitions API creates smooth visual transitions when content changes. It handles cross-fades, like a thumbnail expanding to a full-size product image or a fixed navigation staying steady during navigation. The browser snapshots the old state, suppresses rendering while updating the DOM, then uses CSS animations to drive the transition. The mechanism is identical for same-document and cross-document transitions — the only difference is how you trigger them. This offers a lighter alternative to single-page apps built on heavy JavaScript frameworks.

Exclusive Accordions Without JavaScript

An exclusive accordion permits only one open disclosure at a time — opening a new section auto-closes the current one. A name attribute on <details> elements creates a semantic group with this behavior natively.

User-Aware Validation States

The :valid and :invalid pseudo-classes have a flaw: a required, empty control matches :invalid before any interaction. Previously, avoiding premature error states meant tracking input changes in JavaScript. The :user-valid and :user-invalid pseudo-classes handle it automatically, showing feedback only after the user changes the input. They work with input, select, and textarea elements.

Controlled Scrolling Behavior

Linking to an anchored position inside a scrolling box typically results in an abrupt jump. The scroll-behavior property changes that. Set it to smooth and the container scrolls with a user-agent-defined easing over a fixed duration; auto preserves the instant jump.

Focus Rings That Know Their Audience

The :focus-visible pseudo-class splits the difference between accessible keyboard navigation and clean mouse interaction. It applies focus styles only when the browser's heuristics determine the focus should be visible—typically for keyboard users—while suppressing the ring for mouse clicks.

MDN Web Docs details the practical differences between :focus and :focus-visible, including accessibility considerations and fallback strategies for browsers without support.

Parent Selectors Finally Arrive

CSS selectors have long traveled top-down, but the :has() pseudo-class reverses that flow. Beyond styling a parent based on its children, :has() can target any element based on the state of another element in a different container entirely. Josh W. Comeau's introduction explores real-world uses, from disabling page scroll while a modal is open to building dark-mode toggles without JavaScript.

Fluid Values Without the Math

CSS comparison functions min(), max(), and clamp() are supported across all major browsers, enabling fluid type scales, grids, and spacing systems. Ahmad Shadeed's comprehensive guide covers the syntax, practical examples, and the common points of confusion.

For quick results, the Utopia Fluid Type Scale Calculator takes min and max viewport widths and the number of scale steps, then generates a responsive preview and ready-to-use CSS.

Native Dialogs Worth Using

The <dialog> HTML element provides a native, accessible solution for modal and non-modal dialog boxes, confirmation prompts, and data-entry subwindows. Modal dialogs block page interaction; non-modal dialogs allow it. Adam Argyle's code snippets demonstrate blocking pop-ups and popovers with <dialog> for non-blocking menus.

Media Queries Return to Video

Media attribute support was removed from the HTML standard for video sources in 2014, but returned last year. That means responsive HTML video—and audio—can now leverage media queries directly in the markup. Scott Jehl summarizes how it works, what to watch in your markup, and which other media query types combine well with HTML video.

Better Touch Keyboards on Mobile

The inputmode attribute tells the browser which touchscreen keyboard to present, supporting values for numeric, telephone, decimal, email, URL, and search input. Pair it with enterkeyhint to customize the label on the Enter key; without enterkeyhint, the user agent may infer context from inputmode.

What's Next on the Platform

The platform keeps moving. Near-term additions include masonry layout, fully customizable drop-downs with <selectmenu>, and text-box trimming to align fonts cleanly within a grid.