If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for border-radius to feel like we were living in the future. We are currently living in a moment where the platform is handing us tools that don’t just tweak the visual layer, but fundamentally redefine how we architect interfaces. I thought the number of features announced in 2024 couldn’t be topped. I’ve never been so happily wrong.

The Chrome team’s “CSS Wrapped 2025” is not just a list of features; it is a manifesto for a dynamic, native web. As someone who has spent a couple of years documenting these evolutions — from defining “CSS5” eras to the intricacies of modern layout utilities — I find myself looking at this year’s wrap-up with a huge sense of excitement. We are seeing a shift towards “Optimized Ergonomics” and “Next-gen interactions” that allow us to stop fighting the code and start sculpting interfaces in their natural state.

In this article, you can find a comprehensive look at the standout features from Chrome’s report, viewed through the lens of my recent experiments and hopes for the future of the platform.

For years, we have relied on heavy JavaScript libraries to style dropdowns, a “decades-old problem” that the platform has finally solved. As I detailed in my deep dive into the history of the customizable select (and related articles), this has been a long road involving Open UI, bikeshedding names like <selectmenu> and <selectlist>, and finally landing on a solution that re-uses the existing <select> element.

The introduction of appearance: base-select is a strong foundation. It allows us to fully customize the <select> element — including the button and the dropdown list (via ::picker(select)) — using standard CSS. Crucially, this is built with progressive enhancement in mind. By wrapping our styles in a feature query, we ensure a seamless experience across all browsers.

We can opt in to this new behavior without breaking older browsers:

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

The fantastic addition to allow rich content inside options, such as images or flags, is a lot of fun. We can create all sorts of selects nowadays:

• Demo: I created a Poké-adventure demo showing how the new <selectedcontent> element can clone rich content (like a Pokéball icon) from an option directly into the button.

See the Pen A customizable select with images inside of the options and the selectedcontent [forked] by utilitybend.

• Demo: A comprehensive look at styling the select with only pseudo-elements.

See the Pen A customizable select with only pseudo-elements [forked] by utilitybend.

• Demo: Or you can kick it up a notch with this Menu selection demo using optgroups.

See the Pen An actual Select Menu with optgroups [forked] by utilitybend.

This feature alone signals a massive shift in how we will build forms, reducing dependencies and technical debt.

Creating carousels has historically been a friction point between developers and clients. Clients love them, developers dread the JavaScript required to make them accessible and performant. The arrival of ::scroll-marker and ::scroll-button() pseudo-elements changes this dynamic entirely.

These features allow us to create navigation dots and scroll buttons purely with CSS, linked natively to the scroll container. As I wrote on my blog, this was Love at first slide. The ability to create a fully functional, accessible slider without a single line of JavaScript is not just convenient; it is a triumph for performance. There were some accessibility concerns around this feature, and even though these were really valid, I’m sure it’s up to us developers to make it work. The good thing is, all these UI changes are making it a lot easier than custom DOM manipulation and dragging around aria tags, but I digress…

We can now group markers automatically using scroll-marker-group and style the buttons using anchor positioning to place them exactly where we want.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

• Demo: My experiment creating a carousel purely out of HTML and CSS, using anchor positioning to place the buttons.

See the Pen Carousel Pure HTML and CSS [forked] by utilitybend.

• Demo: A Webshop slick slider remake using attr() to pull background images dynamically into the markers.

See the Pen Webshop slick slider remake in CSS [forked] by utilitybend.

For a long time, we have lacked the ability to know if a “sticky thing is stuck” or if a “snappy item is snapped” without relying on IntersectionObserver hacks. Chrome 133 introduced scroll-state queries, allowing us to query these states declaratively.

By setting container-type: scroll-state, we can now style children based on whether they are stuck, snapped, or overflowing. This is a massive “quality of life” improvement that I have been eagerly waiting for since CSS Day 2023. It has even evolved a lot since we can also see the direction of the scroll, lovely!

For a simple example: we can finally apply a shadow to a header only when it is actually sticking to the top of the viewport:

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

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}

• Demo: A sticky header that only applies a shadow when it is actually stuck.

See the Pen Sticky headers with scroll-state query, checking if the sticky element is stuck [forked] by utilitybend.

• Demo: A Pokémon-themed list that uses scroll-state queries combined with anchor positioning to move a frame over the currently snapped character.

See the Pen Scroll-state query to check which item is snapped with CSS, Pokemon version [forked] by utilitybend.

The “Optimized Ergonomics” section of CSS Wrapped highlights features that make our workflows more intuitive. Three features stand out as transformative for how we write logic:

1. if() Statements
   We are finally getting conditionals in CSS. The if() function acts like a ternary operator for stylesheets, allowing us to apply values based on media, support, or style queries inline. This reduces the need for verbose @media blocks for single property changes.
2. @function functions
   We can finally move some logic to a different place, resulting in some cleaner files, a real quality of life feature.
3. sibling-index() and sibling-count()
   These tree-counting functions solve the issue of staggering animations or styling items based on list size. As I explored in Styling siblings with CSS has never been easier, this eliminates the need to hard-code custom properties (like --index: 1) in our HTML.

Example: Calculating Layouts

We can now write concise mathematical formulas. For example, staggering an animation for cards entering the screen becomes trivial:

.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}

I even experimented with using these functions along with trigonometry to place items in a perfect circle without any JavaScript.

• Demo: Staggering card animations dynamically.

See the Pen Stagger cards using sibling-index() [forked] by utilitybend.

• Demo: Placing items in a perfect circle using sibling-index, sibling-count, and the new CSS @function feature.

See the Pen The circle using sibling-index, sibling-count and functions [forked] by utilitybend.

While I have been busy sculpting selects and transitions, the “CSS Wrapped 2025” report is packed with other goodies that I haven’t had the chance to fire up in CodePen yet. These are high on my list for my next experiments:

Anchored Container Queries

I used CSS Anchor Positioning for the buttons in my carousel demo, but “CSS Wrapped” highlights an evolution of this: Anchored Container Queries. This solves a problem we’ve all had with tooltips: if the browser flips the tooltip from top to bottom because of space constraints, the “arrow” often stays pointing the wrong way. With anchored container queries (@container anchored(fallback: flip-block)), we can style the element based on which fallback position the browser actually chose.

Nested View Transition Groups

View Transitions have been a revolution, but they came with a specific trade-off: they flattened the element tree, which often broke 3D transforms or overflow: clip. I always had a feeling that it was missing something, and this might just be the answer. By using view-transition-group: nearest, we can finally nest transition groups within each other.

This allows us to maintain clipping effects or 3D rotations during a transition — something that was previously impossible because the elements were hoisted up to the top level.

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

Typography and Shapes

Finally, the ergonomist in me is itching to try Text Box Trim, which promises to remove that annoying extra whitespace above and below text content (the leading) to finally achieve perfect vertical alignment. And for the creative side, corner-shape and the shape() function are opening up non-rectangular layouts, allowing for “squaricles” and complex paths that respond to CSS variables. That being said, I can’t wait to have a design full of squircles!

We are witnessing a world where CSS is becoming capable of handling logic, state, and complex interactions that previously belonged to JavaScript. Features like moveBefore (preserving DOM state for iframes/videos) and attr() (using types beyond strings for colors and grids) further cement this reality.

While some of these features are currently experimental or specific to Chrome, the momentum is undeniable. We must hope for continued support across all browsers through initiatives like Interop to ensure these capabilities become the baseline. That being said, having browser engines is just as important as having all these awesome features in “Chrome first”. These new features need to be discussed, tinkered with, and tested before ever landing in browsers.

It is a fantastic moment to get into CSS. We are no longer just styling documents; we are crafting dynamic, ergonomic, and robust applications with a native toolkit that is more powerful than ever.

Let’s get going with this new era and spread the word.

This is CSS Wrapped!

As he called the House Judiciary Committee into session on a cold and snowy February day in Washington, DC, Chairman Jim Jordan was ready to take a victory lap. American free speech had been critically threatened, and now it was saved - in large part thanks to him and his committee.

"What a difference a few years make," the Republican congressman for Ohio's 4th district told those present. "Four years ago, President Trump was banned from all platforms: Twitter, Facebook, YouTube. Today, he has his own platform. He's back on all the others. And of course, he's president of the United States."

Donald Trump was expelled from the major social …

Read the full story at The Verge.

Hyperskill is introducing its own free dedicated plugin inside JetBrains IDEs. This new plugin is built specifically for the Hyperskill learning experience and replaces the previous integration inside the JetBrains Academy plugin. Starting December 11, Hyperskill courses will be available exclusively through the new Hyperskill Academy plugin. 

The new Hyperskill Academy plugin provides a more focused and consistent learning environment with all features, tasks, and settings conveniently located in one place. It is designed and maintained directly by the Hyperskill team.

What you’ll get with the new plugin:

• A unified environment aligned with the Hyperskill platform.
• Faster updates, improvements, and fixes.
• Simpler navigation in a single dedicated plugin.

This makes learning smoother and more intuitive, especially for long-term projects.

If you’re currently using Hyperskill courses through the JetBrains Academy plugin, here’s what you need to know and what to do next.

What changes

• You’ll need to install the new free Hyperskill Academy plugin from the Marketplace tab in IDE, available after December 11.
• The JetBrains Academy plugin will remain available for JetBrains Academy learning courses and Coursera, but it will no longer include Hyperskill courses and projects after the upcoming update. 
• Your existing Hyperskill projects will still work. No manual migration is needed – your progress and projects will stay safely on Hyperskill and appear automatically once you sign in.

How to continue using Hyperskill courses

The new Hyperskill Academy plugin will be available after December 11, and you’ll be able to install it in your IDE:

• Update the JetBrains Academy plugin to the latest version.
• Install the new Hyperskill Academy plugin from the Marketplace tab in IDE.
• Sign in with your Hyperskill account via Settings/Preferences | Tools | Hyperskill.
• Open your projects and continue learning right where you left off.

No manual migration is needed – your progress and projects will stay safely on Hyperskill and appear automatically once you sign in.

We understand that you might have questions regarding this change, so we’ve prepared an FAQ list to address the most common topics.

What will happen to the JetBrains Academy plugin?

The JetBrains Academy plugin will continue to support JetBrains Academy learning courses, but Hyperskill projects will no longer be part of it. For Hyperskill courses and projects, use the new Hyperskill Academy plugin. We recommend updating the JetBrains Academy plugin as usual. This will allow both plugins to work without issues.

When will the Hyperskill plugin be available?

You’ll be able to install the new Hyperskill plugin starting December 11, 2025. Make sure to switch to the Hyperskill Academy plugin right away, as Hyperskill courses won’t be supported in the JetBrains Academy plugin after this date.

How will I be notified when the Hypserkill Academy plugin is live?

On the Hyperskill platform: You’ll see a banner with a direct install button on the Study plan page.

Inside the JetBrains Academy plugin: After updating the plugin, you’ll see in‑plugin messages with guidance once the release is live.

Will this affect my IDE settings?

No. Your IDE preferences (themes, fonts, keymaps, and third‑party plugins) won’t change. Our plugin works on top of your current setup.

Will my existing projects on Hyperskill still work after installing the Hyperskill Academy plugin? 

Yes. You can open and continue working on your existing Hyperskill projects after installing the new plugin – no migration required.

Who should I contact if I have questions about the new Hyperskill Academy plugin?
Please reach out to Hyperskill Support, or send an email to hello@hyperskill.org. 

We’re sure this update will elevate your learning experience and make working with Hyperskill even more seamless and efficient.

Happy learning!

The JetBrains Academy team

Quantum computing (QC) and AI have one thing in common: They make mistakes.

There are two keys to handling mistakes in QC: We’ve made tremendous progress in error correction in the last year. And QC focuses on problems where generating a solution is extremely difficult, but verifying it is easy. Think about factoring 2048-bit prime numbers (around 600 decimal digits). That’s a problem that would take years on a classical computer, but a quantum computer can solve it quickly—with a significant chance of an incorrect answer. So you have to test the result by multiplying the factors to see if you get the original number. Multiply two 1024-bit numbers? Easy, very easy for a modern classical computer. And if the answer’s wrong, the quantum computer tries again.

One of the problems with AI is that we often shoehorn it into applications where verification is difficult. Tim Bray recently read his AI-generated biography on Grokipedia. There were some big errors, but there were also many subtle errors that no one but him would detect. We’ve all done the same, with one chat service or another, and all had similar results. Worse, some of the sources referenced in the biography purporting to verify claims actually “entirely fail to support the text,”—a well-known problem with LLMs.

Andrej Karpathy recently proposed a definition for Software 2.0 (AI) that places verification at the center. He writes: “In this new programming paradigm then, the new most predictive feature to look at is verifiability. If a task/job is verifiable, then it is optimizable directly or via reinforcement learning, and a neural net can be trained to work extremely well.”  This formulation is conceptually similar to quantum computing, though in most cases verification for AI will be much more difficult than verification for quantum computers. The minor facts of Tim Bray’s life are verifiable, but what does that mean?  That a verification system has to contact Tim to verify the details before authorizing a bio?  Or does it mean that this kind of work should not be done by AI?  Although the European Union’s AI Act has laid a foundation for what AI applications should and shouldn’t do, we’ve never had anything that’s easily, well, “computable.”  Furthermore: in quantum computing it’s clear that, if a machine fails to produce correct output, it’s OK to try again.  The same will be true for AI; we already know that all interesting models produce different output if you ask the question again. We shouldn’t under-estimate the difficulty of verification, which might prove to be more difficult than training LLMs.

Regardless of the difficulty of verification, Karpathy’s focus on verifiability is a huge step forward.  Again from Karpathy:  “The more a task/job is verifiable, the more amenable it is to automation … This is what’s driving the “jagged” frontier of progress in LLMs.”

 What differentiates this from Software 1.0 is simple:

Software 1.0 easily automates what you can specify.
Software 2.0 easily automates what you can verify.

That’s the challenge Karpathy lays down for AI developers: determine what is verifiable and how to verify it. Quantum computing gets off easily because we only have a small number of algorithms that solve straightforward problems, like factoring large numbers.  Verification for AI won’t be easy, but it will be necessary as we move into the future.