In 2025, CSS expanded beyond presentation into interaction, UI composition, and conditional logic. According to CSS Wrapped 2025, browsers shipped major features, including native popover hints, fully customizable select elements, scroll-generated controls, anchored container queries, scroll-state queries, CSS conditionals, and typed attribute values. Below is a practical breakdown with examples.

Popover Enhancements (popover="hint")

The Popover API now supports popover="hint" for lightweight, non-modal contextual UI without JavaScript.

{
[popover] {
  border: 1px solid #ccc;
  padding: .5rem .75rem;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

[popover]:popover-open {
  animation: fade-in .15s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
}

Customizable <select>

Using appearance: base-select, native select controls can now be styled without breaking accessibility.

{
select {
  appearance: base-select;
  border: 2px solid #444;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: #f5f5f5;
}

select::picker(select) {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}

select::picker(option) {
  padding: .5rem 1rem;
}

select::picker(option:hover) {
  background: #efefef;
}
}

Scroll Buttons & Scroll Markers

Scrollable containers can generate navigation arrows and position indicators without JavaScript.

{
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel::scroll-button(left) {
  content: "◀";
}

.carousel::scroll-button(right) {
  content: "▶";
}

.carousel::scroll-marker-group {
  display: flex;
  gap: .5rem;
}

.carousel::scroll-marker {
  width: .6rem;
  height: .6rem;
  background: #ccc;
  border-radius: 50%;
}

.carousel::scroll-marker:target-current {
  background: #000;
}
}

Anchored Container Queries

Container queries allow components to respond to their container context.

{
@container (min-width: 600px) {
  .card {
    font-size: 1.2rem;
    padding: 2rem;
  }
}
}

Scroll-State Queries

CSS can now react to scroll conditions such as snapped or stuck states.

{
@container scroll-state(snapped: block) {
  .slide {
    transform: scale(1);
    opacity: 1;
  }
}
}

Conditional Logic with if()

CSS gained conditional evaluation and tree-aware functions.

{
.card {
  color: if(style(--theme: dark), white, black);
}

li {
  animation-delay: calc(sibling-index() * .1s);
}
}

Typed attr()

The attr() function now supports typed values like colors and lengths.

{
.button {
  background-color: attr(data-bg color, #888);
  width: attr(data-width px, 200px);
}
}

Typography & Shape Controls

New layout precision tools improve text trimming and corner geometry.

{
h1 {
  text-box-trim: both;
  text-box-align: center;
}

.card {
  corner-shape: superellipse(12px);
}
}

These features collectively reduce reliance on JavaScript for common UI patterns and make CSS capable of handling state, structure, and interaction natively. Core behaviors that once required JavaScript — from UI components to scroll logic and conditional styling — are increasingly available natively. Developers should experiment with these features now, progressively enhancing them while fallback strategies remain in place.

Let me know what feature excites you the most. For me it's the ability to style select elements.