Introduction: The Modern CSS Revolution
CSS has been advancing at an unprecedented pace, with features that seemed like distant dreams now available in every modern browser. From native nesting to container queries, these advances mean less JavaScript, better performance, and more maintainable codebases.
Our web development team leverages these modern capabilities to build faster, more efficient websites for clients across North America and beyond.
In this guide, we explore five cutting-edge CSS features that are ready for production use today.
1. Container Queries: Component-Based Responsive Design
Container queries enable styling based on parent container size, not viewport. This represents a paradigm shift from traditional responsive design, allowing truly reusable components that adapt to their container regardless of where they're placed on the page.
For frontend developers building modern web applications with frameworks like Next.js, container queries enable true component-based design patterns. Rather than designing for viewport breakpoints, you design components that know their context and respond accordingly.
When implementing container queries, pairing them with efficient CSS handling tools like Stylelint helps maintain code quality across large codebases.
1/* Define a container */2.card-grid {3 container-type: inline-size;4 container-name: card-grid;5}6 7/* Shorthand syntax */8.card-grid {9 container: card-grid / inline-size;10}11 12/* Use @container for responsive breakpoints */13@container (min-width: 400px) {14 .card {15 display: grid;16 grid-template-columns: 200px 1fr;17 gap: 1rem;18 }19}Container Query Units
Container queries introduce new relative units that are relative to the container's dimensions:
- cqw: 1% of container's width
- cqh: 1% of container's height
- cqi: 1% of container's inline size
- cqmin: Smaller of cqi or cqb
- cqmax: Larger of cqi or cqb
.card-title {
font-size: clamp(1rem, 5cqi, 2rem);
}
Best Practices
- Use descriptive container names for clarity in debugging
- Containers create containment contexts which can improve rendering performance
- Browser DevTools now support visualizing container boundaries
- Use @supports to provide fallbacks for older browsers
2. The Customizable Select: End of the Drop-in Replacement
For decades, the HTML select element resisted all attempts at customization. Now, with appearance: base-select, you can style every part of the select element, including the button, dropdown list, and individual options.
This breakthrough enables brand-customized form controls that match your design system without relying on custom dropdown components that often have accessibility issues.
1/* Enable customizable styling */2select {3 appearance: base-select;4}5 6/* Style the dropdown button */7select::picker(select) {8 border: 2px solid #e5e7eb;9 border-radius: 8px;10 padding: 0.5rem 1rem;11}12 13/* Focus state */14select::picker(select):is(:open, :focus) {15 border-color: #2563eb;16 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);17}1<select>2 <option value="us">3 <img src="us-flag.svg" alt=""> United States4 </option>5 <option value="ca">6 <img src="ca-flag.svg" alt=""> Canada7 </option>8 <option value="uk">9 <img src="uk-flag.svg" alt=""> United Kingdom10 </option>11</select>3. Native CSS Carousels: ::scroll-marker and ::scroll-button
CSS now provides native pseudo-elements for creating accessible carousels without JavaScript. The ::scroll-button() creates scroll buttons, while ::scroll-marker() creates dot navigation that reflects the current scroll position.
This eliminates the need for JavaScript carousel libraries, reducing bundle size and improving performance. The native implementation also provides better accessibility with built-in keyboard navigation.
1.carousel {2 scroll-marker-group: after;3}4 5.carousel::scroll-button(left) {6 content: "←" / "Scroll Left";7}8 9.carousel::scroll-button(right) {10 content: "→" / "Scroll Right";11}12 13/* Scroll markers */14.carousel > li::scroll-marker {15 content: ' ';16 width: 1em;17 height: 1em;18 border: 1px solid black;19 border-radius: 50%;20}21 22.carousel > li::scroll-marker:target-current {23 background: black;24}Scroll-Target-Group for Navigation
Transform anchor links into scroll-markers for table-of-contents patterns:
.toc {
scroll-target-group: auto;
}
.toc a:target-current {
color: red;
font-weight: bold;
}
This feature enables table-of-contents patterns where the active section is highlighted as users scroll through content, creating engaging interactive navigation experiences. Pairing these CSS-native interactions with clean JavaScript array methods for data handling creates powerful user experiences without heavy dependencies.
4. popover=hint: Ephemeral UI Without JavaScript
The new popover="hint" attribute creates ephemeral UI elements that don't close other popovers. Combined with interestfor, you can create tooltips and hover cards without any JavaScript.
Use cases include tooltips, hover cards, product quick views, contextual help, and multi-layer UI scenarios. The light dismiss behavior ensures users can easily close popovers by clicking outside.
These native UI patterns reduce the need for JavaScript frameworks, aligning well with AI-powered automation workflows that benefit from lightweight, performant frontend code.
1<button popovertarget="tooltip-1">Hover me</button>2 3<div id="tooltip-1" popover="hint">4 Helpful tooltip information5</div>1<button interestfor="callout-1">Show Callout</button>2 3<div id="callout-1" popover="hint">4 Product callout information here.5</div>1[interestfor] {2 interest-delay: 0.2s;3}5. Anchor Positioning with Anchored Container Queries
CSS anchor positioning allows elements to position relative to other elements. With anchored container queries, you can style elements based on which fallback position was used, enabling smart tooltips that automatically adjust their arrows.
This game-changing feature eliminates the complex JavaScript calculations previously required for smart positioning. GPU acceleration in modern browsers ensures smooth performance.
For developers working with reactive UI patterns, understanding how CSS anchor positioning compares to signals and hooks reactivity models helps inform architecture decisions.
1/* Basic anchor positioning */2.anchor {3 anchor-name: --my-anchor;4}5 6.tooltip {7 position-anchor: --my-anchor;8 position-area: bottom;9 position-try-fallbacks: flip-block;10}1/* Style based on which fallback was used */2.tooltip {3 container-type: anchored;4}5 6@container anchored(fallback: flip-block) {7 .tooltip::before {8 content: '▼';9 }10}11 12@container anchored(fallback: none) {13 .tooltip::before {14 content: '▲';15 }16}| Feature | Chrome | Firefox | Safari |
|---|---|---|---|
| Container Queries | 105+ | 110+ | 16+ |
| Customizable Select | ~119+ | ~121+ | ~17+ |
| ::scroll-marker/button | ~125+ | In development | In development |
| popover=hint | ~120+ | ~128+ | ~17+ |
| Anchor Positioning | ~116+ | ~130+ | ~17+ |
Frequently Asked Questions
Sources
- Chrome Dev: CSS Wrapped 2025 - Official Chrome team documentation with code examples and demos
- CSS-Tricks: CSS Wrapped 2025 - Developer community coverage of new CSS features
- MDN Web Docs: Container Size and Style Queries - Official documentation for container queries
- MDN Web Docs: Customizable Select - Documentation on styling select elements with appearance: base-select
- MDN Web Docs: ::scroll-button - Official documentation for native CSS carousel pseudo-elements