Hark, the Scrolls of Serenity and the Native Craft of Code

Peace be to your pixels, my friends in code.

As we settle into the fresh light of 2026, the scriptorium is buzzing—not with the scratching of quills, but with the clacking of mechanical keyboards. We have entered a new era. If you looked at the "CSS Wrapped" report from the Chrome team late last year, you know that we are no longer just painting the web; we are engineering it with a native toolkit that finally respects the architecture of our work.

For years, we relied on heavy JavaScript libraries to perform tasks that should have been native to the browser. We spent countless hours fighting the cascade rather than flowing with it. But the platform has gifted us tools that redefine interface architecture. From components that handle their own state to styling logic that lives directly in your stylesheets, the need for external dependencies is crumbling like old parchment. Let us examine how we can stop fighting the code and start sculpting interfaces in their natural state.

The Holy Grail: A Native Customizable Select

My fellow designers, we have all suffered the "decades-old problem." You know the one: a client asks for a dropdown menu that matches their brand, and you are forced to abandon the semantic <select> element for a div-soup of JavaScript accessibility nightmares. It was a heavy penance for a simple requirement.

With the arrival of appearance: base-select, that penance is paid. We can now fully customize the select element—including the button and the dropdown list—using standard CSS. This is built on the hard work of the Open UI group and allows us to style the ::picker(select) pseudo-element directly.

Crucially, we use progressive enhancement. We wrap our styles in a feature query to ensure that if a browser (bless its legacy heart) does not support it, the user still gets a functional, standard select menu.

select {
  /* The standard fallback remains here */
  font-size: 1rem;
  
  /* Opt-in for the new customizable select logic */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
      background: var(--surface-color);
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }
    
    /* We can even style the options with rich content */
    option {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 10px;
      padding: 8px;
    }
  }
}

This shift means we can include images, flags, or color swatches directly inside our options without a single line of JavaScript. It is clean, it is accessible, and it is native.

Scroll Markers: The Carousel Without Scripts

If there is one thing that has plagued the modern web, it is the JavaScript carousel. They are heavy, often inaccessible, and prone to breaking. But the browser gods have heard our prayers. With ::scroll-marker and ::scroll-button(), we can link navigation dots and buttons natively to a scroll container.

This feature allows us to create a fully functional slider where the "active" state of a dot updates automatically as the user scrolls. It improves performance drastically because the main thread is not bogged down by scroll event listeners.

Comparing Implementation Costs

To understand the magnitude of this change, look at the difference between the old ways and the new native power:

Here is how we might construct a simple gallery using anchor positioning to place the navigation buttons:

.carousel {
  overflow-x: auto;
  /* Automatically groups the markers */
  scroll-marker-group: after; 
  position-anchor: --carousel;

  /* The scroll buttons */
  &::scroll-button(inline-end) {
    position: absolute;
    right: 0;
    top: anchor(center); /* Anchor positioning! */
    content: "→";
  }

  /* The markers (dots) */
  div::scroll-marker {
    content: " ";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
  }

  /* The active state handled by the browser */
  div::scroll-marker:target-current {
    background: var(--primary-color);
  }
}

Logic in the Stylesheet: If() and State Queries

Perhaps the most exciting evolution is the introduction of genuine logic into CSS. For decades, we have used classes toggled by JavaScript to handle state. Now, we have State Queries and the if() function.

Sticky States

Previously, to drop a shadow on a header only when it was stuck, we needed an observer. Now, we simply query the container's state. It is a massive quality-of-life improvement for those of us who appreciate clean ergonomics.

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.3s ease;
    
    /* Apply shadow only when the container reports 'stuck' */
    @container scroll-state(stuck: top) {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }
}

Inline Conditionals

The if() function acts like a ternary operator right inside your property values. This reduces the verbosity of our code significantly. Instead of writing three different media queries to change a padding value, we can write it once inline. Combined with sibling-index(), we can create complex staggered animations without hard-coding "magic numbers" into our HTML.

.card {
  /* If the screen is small, use 10px, otherwise 20px */
  padding: if(media(width < 600px) ? 10px : 20px);
  
  /* Stagger animation based on DOM order automatically */
  animation-delay: calc(sibling-index() * 100ms);
}

It is almost as if the logic of the universe—or at least the logic of JavaScript—has been distilled into pure style.

Conclusion

We are witnessing the platform maturing into a true application environment. The features we have discussed—Customizable Selects, Scroll Markers, and CSS Logic—are not just "nice to haves." They represent a fundamental shift in how we build. We are moving logic from fragile scripts into the robust, native engine of the browser.

I encourage you to open your editors and experiment with these features. The browser support is growing daily, and through tools like Interop, we are seeing a consistent web emerge. Go forth, simplify your stacks, and may your layouts never break.

Further Reading

• Chrome's CSS Wrapped 2025 - The original manifesto and feature breakdown.
• Open UI - The standard body behind the customizable select element.
• Ahmad Shadeed on Container Queries - Deep dives into the logic of container styling.
• Bram.us - Excellent ongoing coverage of Scroll-Driven Animations and CSS features.