What New Features Does Chrome 140 Bring? CSS Custom Drop-down Box Experience Guide

The new features of CSS 2025 have already begun to be implemented in browsers step by step. So, can they actually change the developer's workflow and bring about a more efficient and powerful style writing experience?

Customizable component capability innovation


...

CSS 2025 regards customizable components as one of the core categories. The most attractive thing is the complete styling capabilities of selectmenu . Developers can now use pseudo-elements like ::base-select to deeply customize the buttons, lists, and option content of the drop-down selection box. This feature has provided stable support since Chrome version 135.

Click outside to close.

For a long time, <select>普遍存在于开发过程中的痛点是元素的样式限制，这项更新能够让开发者在不致使无障碍功能受损的状况下，去创建具有统一品牌形象的表单控件，然而，在将其部署到生产环境之前，务必要借助Can I Use等网站认真核查它在不同浏览器间的兼容性，并且要保证对ARIA属性给予正确的支持。

<strong>Next generation interaction paradigm</strong>

Next-generation interaction categories designed to achieve complex interface behaviors with the help of CSS itself will reduce dependence on JavaScript. For example, the anchor-name以及anchor属性，能够实现元素相对于另一个“锚点”元素的精准定位。这给制作工具提示、上下文菜单等组件提供了声明式方案。

select {
  &::picker(select) {
    appearance: base-select;
  }
}

Another key feature is scroll-start ，它被用于操控滚动锚定行为，以此提升滚动导航的体验。与Combined ，它被用于操控滚动锚定行为，以此提升滚动导航的体验。与the @scroll-timeline规则相结合，开发者能够依据页面的滚动位置去驱动动画。这些特性让交互开发得以简化，不过开发者要留意滚动状态查询可能引发的性能开销。

.carousel::scroll-button(left) {
  content: "" / "Scroll Left";
}

<strong>Ergonomic optimization</strong>

The third major category of optimization focuses on improving development efficiency and code maintainability, which supports the extended attr()函数，比如把HTML数据属性data-count解析成数字类型并用于the content属性或者计数器，这减少了数据转换的代码量。

.carousel > li::scroll-marker {
  content: ' ';
  width: 1em;
  height: 1em;
  border: 1px solid black;
  border-radius: 50%;
}

Nested conditional rules @when以及@else ，它们给出了一种更为清晰、更为强大的媒体查询与特性查询的组合形式，它让极为复杂的响应式逻辑的表达变得简单了，然而开发者必须小心，条件嵌套倘若过深的话，是有可能致使可读性方面出现问题的，逻辑属性以及值的持续改进同样是归属于这类优化范畴的。

.toc {
  scroll-target-group: auto;
}
.toc a:target-current {
  color: red;
  font-weight: bold;
}

<strong>Declarative actions and triggers</strong>

.tooltip {
  container-type: anchored;
}
@container anchored(fallback: flip-block) {
  .tooltip::before {
    content: '';
    top: 100%;
  }
}

By combining attributes such as popover以及anchor等属性相互组合，当下能够达成不借助JavaScript的声明式UI动作，举例而言，把一个按钮的属性对准一个popover元素，如此便可达成点击开启弹窗的成效，这极大地提高了代码的可维护性。

Combined with the transition-behavior属性，能够达成hover或者focus触发状态的顺畅过渡。可是开发者务必要注意的默认值（一般是0秒）对用户感知速度所产生的影响。不合理的延迟有可能致使交互反馈看上去迟钝或者不跟手。



Product callout information here.

<strong>Scrolling and Animation Enhancements</strong>

The animation driven by scrolling has been further enhanced. scroll-timeline以及view-timeline ，能够让动画连接到滚动的容器的可见性方面，或者跟元素自身的可见性相互绑定起来，这样一来，去达成“视差滚动”这种效果，还有“元素进入视口的时候淡入”这类效果，就变得异常容易简单了。

The animation-range属性，以及the animation-timeline属性，为动画播放的范围，给出了精细的控制。这极大地提升了，动态布局以及交互的视觉流畅程度。然而，倘若处于旧版本的浏览器当中，那就需要准备恰当的回退样式，以此来确保核心功能不会受到什么影响。

.parent {
  container-type: scroll-state;
}
@container not scroll-state(snapped: x) {
  opacity: 0.25;
}

<strong>Text and graphics rendering upgrade</strong>

In the context of text rendering, the leading-trim属性具备许可去除文本行之上方以及下方的额外间距之能力，以此达成更为精确的垂直对齐效果。此情形对于诸如标题、按钮内文字这般需要在视觉层面呈现紧密排列状态的场景而言极具实用价值，然而需要留意的是，不同字体的度量标准有可能存在着差异情况。

li {
  transition-delay: calc(0.1s * (sibling-index() - 1));
}

On the graphics side, the capabilities of the conic-gradient()以及path()函数所具备的能力得以实现扩展，从而为去创建复杂的背景以及剪切路径给予了更大程度上的灵活性。 The @property` rule allows developers to customize CSS properties and define their syntax and inheritance behavior, thereby enhancing the modularity of CSS, but attention needs to be paid to the performance cost of function calls.

element.scrollIntoView({ container: 'nearest', behavior: 'smooth' });

The updates of "CSS 2025" are moving in the direction of practicality, strong interaction, and development friendliness. Faced with these new tools that are gradually becoming stable, will you be more aggressive and try to apply them to new projects, or will you adopt a conservative strategy and wait until they gain wider browser support before using them again? Welcome to share your views in the comment area. If you find this article helpful, please like it to support it.

.card {
  view-transition-name: card;
  overflow: clip;
}
.card img {
  view-transition-name: photo;
  view-transition-group: nearest;
}

Tags: