Keeping up with CSS: The features released in 2023

Kevin Powell

23 Nov 202331:13

Summary

TLDR本视频概述了2023年CSS领域的重大更新和新增功能，包括嵌套规则、:has伪类选择器、文本平衡包裹、color-mix()函数、LCH颜色空间、相对颜色、容器查询、层叠层、CSS三角函数、子网格、视图转换、CSS动画时间线与滚动函数、作用域CSS、用户验证和用户无效伪类、文本框修剪等。这些功能不仅增强了CSS的能力，还为开发者提供了更丰富的工具来创建动态和响应式的网页设计。

Takeaways

🌟 CSS今年新增了许多令人惊叹的功能，包括更好的浏览器支持和新特性。
📈 视频作者计划每个季度更新一次CSS的新特性，以保持内容的时效性。
🔄 CSS的嵌套（nesting）功能在今年得到了Chrome、Safari和Firefox的支持，允许在其他选择器内部嵌套选择器。
🎨 CSS的颜色混合（color mix）功能得到了所有主流浏览器的支持，提供了新的颜色操作方式。
📝 CSS的文本平衡（text wrap balance）功能帮助改善了文本在标题或短文本中的视觉效果。
📏 容器查询（container queries）接近90%的浏览器支持，允许基于容器大小而非视口大小进行样式调整。
📋 Cascade layers功能拥有超过93%的浏览器支持，允许在CSS中创建层级，有助于项目维护。
📐 CSS三角函数在今年得到了Chrome和Firefox的支持，为动画和形状创建提供了新的可能性。
🔄 Subgrid功能在Safari和Chrome中得到支持，允许子网格与父网格对齐，提供了更灵活的网格布局选项。
🌐 View transitions是一个新的功能，目前在Chrome中得到支持，允许在页面转换时创建平滑的视图过渡效果。
🔍 Scoped CSS是一个实验性功能，允许样式仅在特定的DOM范围内生效，增强了样式的作用域控制。

Q & A

2023年CSS新增了哪些令人兴奋的功能？
-2023年CSS新增了多个功能，包括嵌套(nesting)、:has伪类、文本平衡(text wrap balance)、颜色混合(color mix)、LCH颜色空间、相对颜色(relative colors)、容器查询(container queries)、级联层(cascade layers)、CSS三角函数(trigonometric functions)、子网格(subgrid)、视图转换(view transitions)、CSS动画时间线与滚动(scroll-linked animations)、作用域CSS(scoped CSS)等。
CSS嵌套(nesting)功能是什么时候获得浏览器支持的？
-CSS嵌套功能在2023年4月首次获得Chrome支持，随后Safari和Firefox也相继支持。
:has伪类的支持情况如何？
-:has伪类的支持率接近90%，Firefox在版本121中开始支持。
文本平衡(text wrap balance)功能主要用于解决什么问题？
-文本平衡功能主要用于防止文本中的'孤行'问题，即在标题或短文本中使行的长度更加均衡。
颜色混合(color mix)功能在CSS中如何使用？
-颜色混合功能允许混合两种颜色，通过选择不同的颜色模式，可以改变混合的结果。
LCH颜色空间相较于HSL有什么优势？
-LCH颜色空间（代表亮度、色度和色调）更符合人类的视觉感知，可以提供更一致的颜色变化结果，并且能够访问比HSL和RGB更多的颜色。
容器查询(container queries)的主要作用是什么？
-容器查询允许样式基于容器的大小而非视口进行调整，使得布局能够更灵活地响应其容器尺寸的变化。
级联层(cascade layers)在CSS中有什么作用？
-级联层允许在CSS中创建不同的样式层，有助于更好地组织和管理样式，提高项目的可维护性。
CSS三角函数可以用于哪些场景？
-CSS三角函数可以用于创建复杂的动画效果，如围绕圆形的动画，以及实现之前需要JavaScript完成的动画效果。
子网格(subgrid)功能解决了什么问题？
-子网格功能允许子网格与父网格共享列和行轨道，解决了在父网格中创建额外行的问题，使得布局更加灵活。
视图转换(view transitions)在Chrome中是如何实现的？
-视图转换在Chrome中通过一个简单的API实现，可以轻松地在DOM更新时进行状态转换，甚至在多页面站点中实现单页面应用(SPA)的过渡效果。
CSS动画时间线与滚动(scroll-linked animations)如何实现视差效果？
-通过将动画时间线与滚动事件关联，可以实现不同元素在滚动时以不同速度移动的视差效果，而无需使用JavaScript。
作用域CSS(scoped CSS)的主要优势是什么？
-作用域CSS允许样式仅在特定的父元素范围内生效，可以更精确地控制样式的作用域，避免全局样式污染。
用户验证(user valid)和用户无效(user invalid)伪类与标准的valid和invalid伪类有什么区别？
-用户验证(user valid)和用户无效(user invalid)伪类在用户与表单元素交互后才会决定元素的有效性，而标准的valid和invalid伪类则是基于表单元素的当前状态。
文本框修剪(textbox trim)功能的目的是什么？
-文本框修剪功能旨在消除文本选中时顶部和底部的额外空间，使得文本的垂直对齐更加精确，改善用户的阅读体验。