2023年CSS新特性大盘点

全文概览：

柳河ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

• 基础功能

• 三角函数
• 复杂的nth-*选择器
• @scope
• 嵌套
• 子网格

• 排版
• Initial-letter
• text-wrap
• 颜色
• 高级色彩空间
• color-mix 函数
• 相对颜色语法
• 响应式设计
• 容器大小查询
• 容器样式查询
• :has() 选择器
• 更新媒体查询
• 脚本媒体查询
• 交互
• 视图转换
• 线性缓动函数
• 滚动结束
• 滚动驱动动画
• timeline-scope
• 离散属性动画
• @starting-style
• overlay
• 组件
• Popover
• 选择框中的分隔线
• :user-valid 和 :user-invalid
• 独占式手风琴

基础功能

首先来了解一下核心 CSS 语言和功能的更新。

三角函数

Chrome 111 增加了对三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其适用于所有主流引擎。这些函数对于动画和布局来说非常有用。例如，现在可以更轻松地在以所选中心为中心的圆圈上布置元素。

浏览器支持：

复杂的nth-*选择器

借助:nth-child()伪类选择器，可以按索引选择 DOM 中的元素。可以使用 An+B 微语法精确控制要选择哪些元素。

默认情况下，:nth-*()伪类会考虑所有子元素。从 Chrome 111 开始，可以选择将选择器列表传递给:nth-child()和:nth-last-child()。这样就可以在 An+B 执行操作之前预先过滤子项列表。

在下面的演示中，通过使用 of .small 对小玩偶进行预过滤，3n+1 逻辑仅应用于它们。使用下拉菜单可动态更改所使用的选择器。

浏览器支持：

@scope

Chrome 118 增加了对 @scope 的支持，它可以将选择器的范围限定为文档的特定子树。借助作用域样式，可以非常具体地选择元素，而无需编写过于具体的选择器或将它们与 DOM 结构紧密耦合。

限定作用域的子树由作用域根和可选的作用域限制定义。

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

放置在作用域块内的样式规则仅针对划分出的子树中的元素。例如，以下作用域样式规则仅针对位于.card元素和由[data-component]选择器匹配的任何嵌套组件之间的元素。

@scope (.card) to ([data-component]) {
  img { … }
}

浏览器支持：

嵌套

在 CSS 原生支持嵌套之前，每个选择器都需要单独显式地声明。这会导致重复、样式表庞大和分散的作者体验。现在，选择器可以继续并将相关的样式规则分组在一起。

dl {
  /* dt */
  
  dt {
    /* dl dt */
  }

  dd {
    /* dl dd */
  }
}

dt {
  /* dt */
}

dl dt {
  /* dl dt */
}

dl dd {
  /* dl dd */
}

嵌套可以减少样式表的大小，减少重复选择器的开销，并集中组件样式。最初发布的语法有一个限制，需要在各个地方使用 &，但自那时起，随着嵌套语法的放宽更新，这一限制已经被解除。

浏览器支持：

子网格

借助 CSS subgrid 可以创建更复杂的网格，并在子布局之间实现更好的对齐。它允许内部网格采用外部网格的行和列作为自己的行和列，通过在网格行或列中使用subgrid作为值。

子网格特别适用于将兄弟元素对齐到彼此的动态内容。

浏览器支持：

排版

2023 年，网页排版取得了一些重要更新。其中一个特别好的渐进增强是text-wrap属性，该属性可以在浏览器中进行排版布局调整，而无需额外的脚本。告别尴尬的行长度，体验更具可预测性的排版！

Initial-letter

在 2023 年初的 Chrome 110 中引入的initial-letter属性是一个小而强大的CSS功能，它用于设置首字母的排版样式。可以将字母放置在下沉或抬高的状态下。该属性接受两个参数：第一个参数用于控制字母下沉到相应段落的深度，第二个参数用于将字母抬高多少，可以同时使用这两个参数。

p {
  font-size: 2rem;
  max-width: 36ch;
  color: var(--tangerine);
  background: white;

  &::first-letter {
    initial-letter: 3 2;
    font-weight: 800;
    padding-right: 1rem;
    background: linear-gradient(
      to right,
      var(--razzmatazz),
      var(--goldenyellow)
    );
    color: transparent;
    -webkit-background-clip: text;
  }
}

效果如下：

浏览器支持：

text-wrap

作为开发人员，我们可能无法确定标题或段落的最终大小、字体大小，甚至语言。浏览器提供了所有文本换行所需的变量，这些变量对于有效和美观的文本处理非常重要。由于浏览器了解所有因素，比如字体大小、语言和分配的区域，它成为处理高级和高质量文本布局的绝佳选择。

这就是两种全新的文本换行技术发挥作用的时刻，它们被命名为balance和pretty。balance值的目的是创建和谐的文本块，而pretty则致力于防止孤立的字符并确保连字符的健康使用。在过去，这两项任务通常需要手动完成，但现在可以将它们交给浏览器来处理，并使其适应任何翻译语言。

颜色

2023 年是 Web 平台的色彩革新之年。借助全新的色彩空间和功能，实现了动态色彩主题，可以为用户打造更生动、丰富的主题，并且还可以实现个性化定制！

高级色彩空间

在 2023 年，我们拥有了全新的颜色、更多的颜色、新的色彩空间、色彩函数和新的功能。

现在，CSS 和颜色可以做到以下事情：

• 检查用户屏幕硬件是否支持广色域HDR颜色。
• 检查用户的浏览器是否理解如Oklch或Display P3等颜色语法。
• 在Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ等多种格式中指定HDR颜色。
• 创建具有HDR颜色的渐变。
• 在可选颜色空间中插值渐变。
• 使用color-mix()混合颜色。
• 利用相对颜色语法创建颜色变体。

color-mix 函数

通过 color-mix 函数仅可以混合白色或黑色到一种颜色，还可以混合透明度，并且可以在选择的任何颜色空间中完成所有这些操作，它同时具有基本颜色特性和高级颜色特性。

可以将color-mix()视为渐变过程中的一个时间点，该渐变展示了从蓝色到白色的所有中间步骤，而color-mix()仅展示了其中的一个步骤。

浏览器支持：

相对颜色语法

相对颜色语法是与color-mix()相辅相成的一种方法，用于创建颜色变体。它比color-mix()更强大，但也是一种不同于传统颜色处理的策略。color-mix()可以混入白色以减轻颜色的深浅程度，而相对颜色语法则提供了对亮度通道的精确访问，并可以利用calc()函数以编程方式降低或增加亮度。

相对颜色语法允许对颜色进行相对和绝对的操作。相对变化是指使用calc()函数对饱和度或亮度的当前值进行修改。绝对变化是指将通道值替换为全新的值，例如将不透明度设置为50%。这种语法为各种主题和实时变体提供了实用的工具。

响应式设计

2023 年，响应式设计迈向了新的高度。这一具有里程碑意义的年份带来了创新的功能，颠覆了传统的构建响应式网页体验的方式，并引领了基于组件的响应式设计模型的新潮流。容器查询和:has()的完美结合，使得组件能够根据其父元素的大小以及任何子元素的存在或状态，灵活地适应并展现出相应的样式。这意味着我们现在可以将页面级的布局与组件级的布局分离开来，并且只需编写一次逻辑，便可以在任何地方重复使用组件！

容器大小查询

与使用视口的全局大小信息来应用CSS样式不同，容器查询支持在页面内查询父元素。这意味着组件可以以动态方式在多个布局和多个视图中进行样式设置。2月14日，所有现代浏览器都稳定支持了容器大小查询。

要使用此功能，首先在要查询的元素上设置容器，然后类似于媒体查询，使用@container和大小参数来应用样式。除了容器查询，还可以获得容器查询的大小。在以下示例中，容器查询大小cqi（表示内联容器的大小）用于调整卡片标题的大小。

浏览器支持：

容器样式查询

在 Chrome 111 中，样式查询以部分实现的形式出现。借助样式查询功能，可以在使用@container style()时查询父元素上自定义属性的值。例如，检查自定义属性是否存在，或者是否被设置为特定值，如@container style(--rain: true)。

尽管样式查询在某种程度上与在CSS中使用类名相似，但样式查询具有其独特的优势。首先，使用样式查询，可以在CSS中根据需要更新伪状态的值。此外，未来的版本将支持查询数值范围来确定应用的样式，例如style(60 <= --weather <= 70)，并且可以基于属性-值对设置样式，例如style(font-style: italic)。

浏览器支持：

:has() 选择器

在过去的20年里，开发者们一直期待在CSS中加入“父选择器”。随着在 Chrome 105 中引入:has()选择器，这一愿望终于得以实现。例如，使用.card:has(img.hero)将选择那些包含英雄图像子元素的.card元素。

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

由于:has()接受一个相对选择器列表作为参数，因此可以选择多个元素，不仅可以沿着DOM树向上选择，还可以进行横向选择。例如，li:has(+ li:hover)将选择当前鼠标悬停的

@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

  
    
    Close
  
  

    
Typography
    
Foundations
    
Color
    
Interactions
    
Components
    
Responsive
  

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);
}

  
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?



  
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?



  
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?