Discover 10 game-changing CSS features that just landed in browsers
Date Published
## The Evolution of CSS: Powerful New Features You Need to Know
CSS has long been the backbone of web design, enabling developers to style and layout web pages with ease. While it may seem like CSS hasn’t changed much—after all, code written decades ago still works today—the reality is that CSS is evolving at a rapid pace. In the past year alone, a host of new features and techniques have emerged, making it easier than ever to create dynamic, interactive, and visually stunning web experiences—all without a single line of JavaScript.
In this article, we’ll explore some of the most exciting new CSS features, from popovers and entry animations to content-sized input fields and advanced positioning. Whether you’re a seasoned developer or just starting out, these tools will help you modernize your workflow and create more engaging user interfaces.
---
## Popovers with Pure HTML and CSS
### The Simplicity of Popovers
Popovers are a common UI pattern, often used for tooltips, notifications, or contextual menus. Traditionally, implementing a popover required JavaScript to handle toggling, positioning, and closing behavior. Now, with recent updates to HTML and CSS, you can create fully functional popovers using just markup and styles.
To create a popover, you need two elements:
- A **button** (or any trigger element) with the `popover-target` attribute, pointing to the ID of the popover.
- A **div** (or any container) with the `popover` attribute and a matching ID.
When the button is clicked, the popover appears. It also supports closing via the Escape key or clicking outside the popover, all natively.
### Animating Popovers: The `@starting-style` Rule
One challenge with popovers is animating their entry and exit. Previously, you could use CSS transitions for exit animations, but entry animations were tricky because the element would jump to its final state immediately.
Enter the new `@starting-style` rule. This allows you to define the initial style of an element before it receives its first style update. For example, you can set a popover to start off-screen and then slide into view when opened, all without JavaScript.
**Key points:**
- Place the `@starting-style` rule after the original rule in your CSS to avoid being overridden.
- Use it to create smooth entry effects for popovers and other elements that appear dynamically.
---
## Enhanced Details and Accordion Components
### The Power of the `<details>` Element
The `<details>` and `<summary>` elements have made it easy to create accordions and disclosure widgets without JavaScript. Recent CSS updates have made these components even more powerful and flexible.
#### Horizontal Accordions
Previously, styling a horizontal accordion was limited because you couldn’t apply flex properties directly to the `<details>` element. Now, you can set `display: flex` and `flex-direction: row` on `<details>`, allowing for more sophisticated layouts where the summary and content can be arranged side by side.
#### The `::details-content` Pseudo-Element
A new pseudo-element, `::details-content`, lets you target the expandable part of the details disclosure. All children of `<details>` except `<summary>` are slotted into this pseudo-element, making it easy to apply transitions and animations.
For example, you can animate the height of the content as it expands and collapses, creating a smooth sliding effect.
---
## Animating to Intrinsic Sizes: `interpolate-size`
### The Challenge of Animating to `auto`
One of the most requested CSS features has been the ability to animate between a height (or width) of `0` and `auto`. Previously, this was impossible—transitions required numeric values, and animating to or from `auto` would result in a jump rather than a smooth animation.
### The Solution: `interpolate-size`
With the new `interpolate-size` property, you can now animate between numeric values and intrinsic sizing keywords like `auto`, `min-content`, `max-content`, and `fit-content`. To enable this, set `interpolate-size: allow-keywords` on the root or the specific element.
**Use cases:**
- Smoothly expanding and collapsing accordions.
- Animating the width of elements to fit their content.
- Creating dynamic layouts that respond to user interaction.
This feature eliminates the need for JavaScript workarounds and opens up a new world of animation possibilities.
---
## Content-Sized Input Fields
### The Problem with Fixed-Size Inputs
Input fields, textareas, and selects have traditionally had fixed sizes, requiring developers to guess the appropriate width and height or use JavaScript to adjust them dynamically. This often led to awkward layouts and poor user experiences.
### The Solution: `field-sizing: content`
Now, with a single line of CSS, you can make input fields automatically size themselves based on their content or placeholder. By setting `field-sizing: content` on your input, textarea, or select elements, they will grow or shrink to fit what the user types or selects.
**Benefits:**
- No more guessing input sizes.
- Improved accessibility and usability.
- Still allows for `max-width` and `max-height` constraints to prevent runaway growth.
This is especially useful for textareas, where users may enter varying amounts of text.
---
## Advanced Paint Order Control
### The Issue with Strokes and Fills
When styling text with both stroke and fill, the order in which they are painted can affect the final appearance. By default, the fill is drawn before the stroke, which can lead to overlapping and visual artifacts, especially when characters are close together.
### The Solution: `paint-order`
With the new `paint-order` property, you can control the sequence in which fill, stroke, and markers are rendered. For example, setting `paint-order: stroke fill` ensures that the stroke is drawn first, resulting in cleaner, more visually appealing text effects.
This simple one-liner gives you precise control over complex text styling scenarios.
---
## Effortless Light and Dark Mode with `light-dark()`
### The Challenge of Theming
Supporting both light and dark themes has traditionally required complex CSS variables, media queries, or JavaScript to toggle classes and redefine colors.
### The Solution: The `light-dark()` Function
The new `light-dark()` CSS function allows you to specify two colors: one for light mode and one for dark mode. The browser automatically selects the appropriate color based on the user’s system preference or the page’s color scheme.
**Example:**
```css
color: light-dark(hotpink, lime);
background: light-dark(white, black);
```
This dramatically simplifies theming and ensures your site looks great in any mode, with minimal effort.
---
## Powerful New Positioning: Anchored Positioning
### The Old Way: Manual Positioning
Positioning elements relative to others—like tooltips or dropdowns—used to require complex calculations, JavaScript, or awkward CSS hacks.
### The New Way: CSS Anchors
With the new anchored positioning feature, you can position an element relative to another using just CSS. Here’s how it works:
- Assign an `anchor-name` to the reference element.
- On the positioned element, set `position: fixed` and use `position-anchor` to reference the anchor name.
- Adjust the position using keywords like `top right`, `bottom left`, or `center`.
This approach is more intuitive and flexible, making it easy to create tooltips, popovers, and other UI elements that need to be anchored to a specific part of the page.
---
## The Easiest Way to Vertically Center a Div
### The Classic Challenge
Vertically centering a div has long been a pain point in CSS. Developers have used everything from table layouts to flexbox and grid, often with verbose or unintuitive code.
### The Modern Solution: `align-content: center` on Block Elements
Now, you can simply use `align-content: center` on a block container to vertically center its child elements. This works seamlessly, even without flex or grid, and can be combined with `margin: 0 auto` for horizontal centering.
**Example:**
```css
.container {
align-content: center;
}
```
This one-liner makes vertical centering effortless and readable.
---
## Other Noteworthy Features
While the features above are some of the most impactful, CSS continues to evolve with even more capabilities, including:
- **Custom scrollbars:** Style scrollbars to match your site’s design.
- **Backdrop inheritance:** Control how backdrops inherit styles.
- **Ruby line support:** Improved support for East Asian typography.
The pace of innovation in CSS is accelerating, and staying up to date with these features will help you build better, more modern websites.
---
## Embracing the Future of CSS
The new CSS features highlighted in this article represent a significant leap forward in what’s possible with pure HTML and CSS. From interactive popovers and animated accordions to content-aware input fields and advanced theming, these tools empower developers to create richer, more dynamic user experiences—without relying on JavaScript for basic UI patterns.
As browser support continues to improve, now is the perfect time to start experimenting with these features in your projects. Not only will they streamline your code and reduce dependencies, but they’ll also help you deliver faster, more accessible, and more visually engaging websites.
Stay curious, keep learning, and embrace the ever-evolving world of CSS. The future of web design is brighter—and more powerful—than ever.