2024 年，Web UI 迎来黄金时代，全新互动体验等你来探索

2024年，WebUI正迎来其前所未有的黄金时代，浏览器中涌现出诸多革新的Web功能，它们正原先所未有的速率塑造我们建立Web应用的方法，推动着全新的Web体验浪潮。接出来，本文将深入探求那些令人瞩目的新功能。

全新互动体验滚动驱动动漫

滚动驱动动漫是一种CSS动漫，它将动漫的进度与滚动风波相关联，致使动漫疗效可以依据用户滚动页面的行为来触发和控制。这些动漫类型借助了CSS中的-属性，它可以创建与滚动进度或视图变化相关的自定义时间线。

比如：

滚动驱动动漫的类型包括：

比如，有一个图片画廊，希望当用户滚动到图片时，图片就能逐步淡入显示：

  

    
  div>
  

    
  div>
  
  
div> 
div>

为.-image类设置-属性为()，这将创建一个匿名的滚动进度时间线，当用户滚动画廊时，图片会依据其在滚动容器中的进度渐渐淡入，透明度从0变为1，即完全可见。

.gallery {
  position: relative;
  height: 500px; /* 固定高度以产生滚动条 */
  overflow-y: scroll;
}

.image-wrapper {
  height: 300px; /* 图片容器高度 */
  position: relative;
}

.gallery-image {
  width: 100%;
  height: auto;
  opacity: 0; /* 初始透明度为0，即完全透明 */
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards; /* 动画完成后保持最终状态 */
  /* 指定滚动时间线，这里使用匿名时间线 */
  animation-timeline: scroll();
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scroll-stretcher {
  height: 2000px; /* 强制内容超出容器高度，产生滚动条 */
}

浏览器支持：

视图过渡

视图过渡是一个全新WebAPI，它提供了一种更简便的方式来在DOM状态之间创建动漫疗效，甚至可以在页面加载之间实现动漫疗效。在126中提供了多页面应用的跨文档视图过渡支持。

比如：

假定有一个网页，其中包含多个元素，希望当用户滚动页面时，这种元素就能以不同的动漫疗效步入和退出图层。

Section 1 Contentsection>
Section 2 Contentsection>

所有元素定义一个共同的view--name，这样它们就可以参与到相同的视图转换中。使用@定义两个动漫疗效：和，分别用于元素步入和退出图层时的动漫。通过-name将步入图层的动漫疗效应用到.view-类上。当用户滚动页面，致使元素步入或退出图层时，相应的动漫疗效将被触发。

.view-transition {
  /* 定义视图转换名称 */
  view-transition-name: section-transition;
  /* 其他样式... */
}

/* 定义进入视口时的动画效果 */
@keyframes enterViewport {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 定义退出视口时的动画效果 */
@keyframes exitViewport {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* 应用动画到视图转换 */
.view-transition {
  animation-name: enterViewport;
  animation-fill-mode: both;
  animation-duration: 1s;
}

浏览器支持：

全新UI组件API

API是一种新的WebAPI，借以简化创建和管理弹出式交互的复杂性，用于在网页上创建和管理浮动内容（亦称为弹出框、弹出窗口或气泡提示）的插口或技术。

在HTML中可以使用属性将一个元素标记为弹出框，并为其设置一个id：

  
  前端充电宝
div>

可以使用一个按键来控制这个弹出框，使用属性指向弹出框的id即可完成绑定：

打开弹出框button>

还可以通过控制属性的值来控制的行为：hide（隐藏）、show（显示）或默认的（切换）。

里面反例的疗效如下，我们可以自己定义弹出框的款式和行为：

浏览器支持：

锚点定位

CSS锚点定位API容许原生地将元素相对于其他元素（称为锚点）进行定位。锚点定位提供了一种强悍的工具，用于建立复杂的用户界面，如菜单、子菜单、工具提示、弹出框（）、对话框（）、卡片等，这种元素须要相对于页面上的其他元素进行精确放置。

比如，让对话框仍然置于点击按键的正下方：

假定有一个按键（锚点），当用户点击该按键时，想要在页面上显示一个消息框（作为定位元素），但是该消息框应当出现在按键的正下方。首先，须要给按键元素添加一个-name属性，为其指定一个惟一的标示符。

点击我button>

之后，在CSS中，可以使用-属性或()函数将消息框与锚点关联上去，并指定其位置。

.anchored-message {  
  position-anchor: my-anchor; /* 隐式锚点 */  
  position: absolute;  
  top: 100%; /* 相对于锚点的底部 */  
  left: 0; /* 相对于锚点的左侧 */  
  /* 其他样式... */  
}

或则，使用()函数进行更复杂的定位：

.anchored-message {  
    position: absolute;  
    top: anchor(bottom) + 10px; /* 相对于锚点底部下方 10px */  
    left: anchor(left); /* 相对于锚点左侧 */  
    /* 其他样式... */  
}

浏览器支持：

独占式吉他

实现吉他组件时须要将几个元素组合在一起，通过视觉分组来表明它们之间的联系。在120中，引入了一项新功能，即在元素上支持name属性。使用这个属性时，具有相同名称值的多个元素会产生一个语义组合。该组合中最多只能打开一个元素：当打开该组合中的一个元素时，之前打开的一个将手动关掉，这些吉他称为独占式钢琴。

"my-accordion">
  Summary 1
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?


"my-accordion" open>
  Summary 2
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?


"my-accordion">
  Summary 3
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?

作为独占式吉他的一部份的元素不一定须要是兄弟元素，它们可以编造在文档任意位置。

浏览器支持：

:user-valid和:user-

:user-valid和:user-伪类的行为类似于:valid和:，但只有在用户与输入进行了重要交互以后，才匹配表单控件。虽然用户仍未开始与页面进行交互，必填并且空的表单控件将匹配:。只有当用户修改输入并将其保留在无效状态时，该控件才能匹配:user-。有了这两个伪类，就不再须要编撰有状态的代码来跟踪用户已修改的输入。

input:user-valid,
select:user-valid,
textarea:user-valid {
  --state-color: green;
  --bg: linear-gradient(45deg in oklch, lime, #02c3ff);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  --state-color: red;
  --bg: linear-gradient(15deg in oklch, #ea00ff, #ffb472);
}

浏览器支持：

field-:

field-用于控制表单输入元素（如输入框input和文本域）的规格调整方法，当为输入框或文本域设置field-:;时，这种元素的大小会依据用户输入的内容手动调整。

textarea {  
    field-sizing: content;  
    width: 200px; /* 可以设置一个固定的宽度 */  
    min-height: 40px; /* 可以设置一个最小高度，以防止元素过小 */  
}

浏览器支持：

在下拉菜单中添加分隔线

在元素中使用是一项小而实用的特点，用于在选择列表中清晰分隔内容。

"major-select">Please select a major: 


"majors" id="major-select">  "">Select a major    "arth">Art History  "finearts">Fine Arts  "gdes">Graphic Design  "lit">Literature  "music">Music    "aeroeng">Aerospace Engineering  "biochemeng">Biochemical Engineering  "civileng">Civil Engineering  "compeng">Computer Engineering  "eleng">Electrical Engineering  "mecheng">Mechanical Engineering

疗效如下：

其他特点原生CSS嵌套

目前所有主流浏览器都支持原生CSS嵌套。使用CSS嵌套，可以编撰更少的代码，但是代码更便于阅读和维护。

在没有CSS嵌套时，只能这样输入完整的选择器路径：

.parent1 .child1,
.parent2 .child1 {
  color: red;
}

.parent1 .child2,
.parent2 .child2 {
  color: green;
}

.parent1 .child2:hover,
.parent2 .child2:hover {
  color: blue;
}

使用新的原生嵌套句型，可以将子选择器嵌套在父选择器中：

.parent1, .parent2 {

  .child1 {
    color: red;
  }

  .child2 {
    color: green;

    &:hover {
      color: blue;
    }
  }
}

浏览器支持：

text-wrap：|

在开发时，我们难以预知文本的款式和厚度。但浏览器外置了文本换行的智能处理机制，如text-wrap：和text-wrap：，它们能手动优化文本布局，确保文本块的和谐和美观，同时防止孤立字符和不当的连字符使用。这种功能无需自动干预，且适应各类语言和文本内容。

p {
  text-wrap: balance;
}

浏览器支持：

light-dark()

light-dark()函数就能按照当前颜色方案手动选择两种颜色中的一种进行输出，进而实现颜色的自适应显示。该函数接受两个颜色值作为其参数。依据正在使用的颜色方案，它将输出第一个或第二个颜色参数。

light-dark(, );

依据规范，假如使用的颜色方案是light或未知，则该函数估算为第一种颜色的估算值；假如使用的颜色方案是dark，则估算为第二种颜色的估算值。

使用的颜色方案除了是用户选择的亮暗模式，还须要依照color-属性的值确定使用的颜色方案。color-属性可以指示元素使用哪种颜色方案进行渲染，这个方案会与用户的偏好进行协商，最终确定使用的颜色方案。为此，在使用light-dark()函数时，还须要在CSS中包含对应的color-申明，以确保函数就能正确工作。

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc); 
}

对于前面的代码，在蓝色模式下返回第一个值，在红色模式下返回第二个值。

注意：light-dark()函数的设计本意是为了提供一个简单的中间解决方案，仅支持粉色和蓝色的切换，并仅适用于颜色值。

浏览器支持：

:has()选择器

在过去的20年里，开发者们仍然期盼在CSS中加入“父选择器”。随着在105中引入:has()选择器，这一心愿总算得以实现。

比如，可以使用.card:has(img.hero)选择这些包含英雄图象子元素的.card元素。

.card:has(.card__media) {
  grid-template-areas:
    "title"
    "blurb"
    "author"
    "media";
  padding-bottom: 0;
}

浏览器支持：

容器查询

容器查询可以依据元素的父元素或先祖元素的大小来设置元素的式样。这与传统的媒体查询有所不同，媒体查询是基于整个浏览器图层的大小来设置款式的。

要想设置容器查询，须要给被查询的元素设置-type属性来指定容器的类型。句型如下：

container-type: inline-size; 

比如：

.card-layout {
  container-type: inline-size;
}
 
@container (min-width: 768px) {
  .card {
    display: grid;
    font-size: 3rem;
    color: blue;
  }
}

这样，当容器card-的长度小于768px时，其子元素card就使用grid布局。

浏览器支持：