translate、rotate 和 scale 的动画在合成器上运行的方式与 transform 的动画相同，因此它们有利于提升动画性能，与 transform 相同

在本文中，我们将深入介绍网络上可供我们使用的不同 HTML 列表类型以及何时使用这些列表类型，包括一些您可能不熟悉的属性。我们还将学习使用 CSS 设置样式的一些实用且富有创意的方式。

CSS 中的媒体查询(media query)可让你根据屏幕尺寸或设备类型等特定条件更改样式。它使用媒体类型（如屏幕或打印）和一些规则来决定何时应用样式。

说到 CSS，有时边框 border 并不是真正的边框 border。

在本集中，我们将介绍以下两者之间的区别：border，outline，box-shadow。我们还将讨论在什么情况下可以使用其中一种而不是另一种。

随着 Chrome 浏览器 125 中引入 CSS 锚点位置 API，将一个元素相对于另一个元素进行定位变得前所未有的简单。这是管理弹出窗口和工具提示等复杂定位用例的绝佳方法。

em 是一种很好的测量方法，因为它是圆形的。最终，浏览器会选择字体大小，这意味着如果你在字体大小中从不使用像素，那么你的排版在任何浏览器中都能很好地运行。

我们使用限定范围的自定义属性和背景剪辑来制作动画渐变文本效果

:user-valid 和 :user-invalid 伪类选择器仅在用户更改输入后才提供有关错误的反馈，从而帮助改善输入验证的用户体验。有了这些新的选择器，您就不再需要编写有状态代码来跟踪用户已更改的输入。

借助 subgrid，可以与嵌套网格共享轨道大小、模板和名称。本文介绍了相关工作原理。

CSS 中的新长度单位层出不穷，你知道多少呢？在这个 Codepen 中测试一下你的技能，或者只是探索一下，看看自从你上次查看以来有什么变化。

我认为每个前端开发者都应该知道，:has() 不仅仅是一个“父级选择器”，subgrid 如何和为何、如何使用内置 CSS 语法进行嵌套、如何让浏览器在标题文本换行之间取得平衡，以及如何使用容器查询单元。

我认为每个前端开发者都应该知道如何使用容器查询、打造快速滚动体验、避免使用网格执行 position: absolute、快速敲出圆形、使用级联层，以及通过逻辑属性以更少的费用实现更多覆盖范围。

在 CSS 网格中，您可以使用 grid-template-columns 和 grid-template-rows 属性分别定义线条名称，并跟踪网格列和行的大小。

light-dark() 是接受两个参数的函数，且这两个参数都必须为 。系统会根据使用的配色方案选择其中一种。

这些功能包括能够轻松为进入和退出动画添加动画效果，以及针对可关闭的元素（例如对话框和弹出式窗口）顺畅地从顶层添加动画效果。

滚动驱动的动画是一种向您的网站或 Web 应用添加互动和视觉吸引力的方式，由用户的滚动位置触发。这是一种非常棒的方法，可以持续吸引用户，并让您的网站在视觉上更具吸引力。

CSS 变量在 50% 存储了不透明度值，该值随后与 HSL 一起使用，以创建半透明的蓝色背景。嵌套媒体查询会检查用户对降低透明度的偏好，如果为 true，则将不透明度变量调整为 95%（一个近乎不透明的值）。

多年来，我们一直构想一个“父级选择器”。现在终于来了！采用 :has() 伪选择器的形状。您可以想到哪些有趣的 :has() 用例？这里最吸引人的就是打破你的心智模式。这会让人想到“我可以换种方式处理这些风格吗？”。

由于 CSS 一直以来都不允许动画调整为 height: auto;，因此我们不得不使用 JavaScript 来测量内容的高度，并根据该像素值调整动画。当calc-size() 函数功能在浏览器中出现时，我们就可以这样实现了

向选择选项列表添加 <hr>（水平线）元素，这些元素将显示为分隔符，从视觉上分解各个选项，以便提供更好的用户体验。

排版孤立词和孤立词是指段落或文本块末尾独立的单个字词。孤子是指单独显示在文本块顶部的字词，而孤立字符则位于文本块末尾。它们会妨碍我们的眼睛浏览文字，导致内容难以阅读

某些东亚语言（如中文或日语）不使用空格来分隔字词，并且行可以在任何字符处换行，即使它位于单词中间也是如此。这是这些语言的正常换行行为，但在标题或诗歌等短文本中，最好在自然短语边界处换行

表单控件元素的垂直写入模式意味着这些元素可以以垂直写入模式显示。

css 锚点定位简化了许多界面功能（例如菜单和子菜单、提示、选择、标签、卡片、设置对话框等）的复杂布局要求。借助内置于浏览器中的锚点定位，您将能够构建分层界面，而无需依赖第三方库，开启了一个充满创意的世界。

只是因为这些东西都相当新，而且我感觉很多人都不知道这些东西。或者说，即使他们知道，也不甚了解，他们可能需要一个通俗易懂的解释，说明这是什么，为什么他们应该关心，以及一些参考代码。也许你就是这样的人。

让我们一步步来亲身体验一下，网络开发人员可以利用这个渴求已久的工具做些什么。事实证明，:has() 伪类不仅仅是一个 “父选择器”。在经历了几十年的死胡同之后，这个选择器能做的事情远不止这些。

CSS 文本框修剪是一种 CSS 属性，可用于去除文本块的前导空白。这对于去除文本顶部与容器顶部之间的空白非常有用。

我经常目睹即兴音乐家在演出的高潮时，满头大汗地试图在狭小的手机屏幕上捏缩一张 A4 PDF 文件。我们需要流畅、反应灵敏的 web 乐谱呈现！

在着色器程序和其他各种程序中，使用时间来制作动画非常常见。CSS 无法像 JavaScript 那样启动计时器，但现在可以通过 CSS Houdini API 定义一个自定义变量，以毫秒为单位跟踪时间。

CSS 动画背景不仅仅是华而不实的技巧。它们是网站心脏的律动，是隐藏在一行行代码中的创意低语。

CSS grid 网格布局模块附带了一个新的 CSS 单位，名为 fr 。fr 是 “分数(fraction) “一词的缩写，简单明了。有了这个新单尾，我们就可以快速将网格按比例分割成不同的列或行

为了给 flex 元素提供更合理的默认最小尺寸，本规范引入了一个新的 auto 值，作为 CSS 2.1 中定义的 min-width 和 min-height 属性的初始值。

探查 CSS 搜索框的编写的各种方法，探索各种代码示例，并在自己的项目中定制它们。

如果你要支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以使用 srcset 结合 x 语法——一种更简单的语法——而不用 sizes，来让浏览器选择合适分辨率的图片。

CSS 网格布局模型（CSS Grid Layout Model）可以沿水平和垂直两条轴线创建和更新布局，同时影响元素的宽度和高度。