在寻找最灵活的前端工作流程和工具包时，我们很容易忘记如今一些基础的网络技术已经变得多么强大。本文将带您领略新的前端特性及其功能。组件特定样式、基于子元素的父元素样式、相对颜色——网络平台正经历激动人心的时刻，许多过去需要JavaScript实现的功能，如今只需一行简单的HTML和CSS即可完成。
2025年了，现在是时候重新审视一些现代浏览器广泛支持的新技术了。让我们深入探索它们如何简化您的日常工作，并帮助您构建现代UI组件。
目录
-
锚点定位
-
自动字段大小调整
-
容器查询
-
<dialog>元素 -
独占式手风琴
-
:focus-visible伪类 -
:has伪类 -
hidden=until-found属性 -
高清晰度颜色
-
<select>中的<hr>元素 -
inputmode属性
-
min(), max(), clamp()函数
-
相对颜色
-
响应式视频
-
滚动行为
-
滚动捕捉
-
text-wrap: balance属性
-
:user-valid 和:user-invalid 伪类
-
视图过渡API
CSS容器查询和样式查询
组件特定样式？对于任何开发者来说，这听起来像是一个梦想，正慢慢变为现实。感谢容器查询，我们现在可以查询组件所在容器的宽度和样式。
样式查询为我们提供了CSS中样式的更多逻辑控制，这目前仅适用于CSS自定义属性值，但已经有一些实际用例显示出样式查询的优势：当您有一个具有多个变体的可重用组件，或者当您无法控制所有样式但需要在某些情况下应用更改时，它们特别有用。
如果您想深入了解容器样式查询的可能性以及我们未来可能期待的功能，可以参考以下文章学习：
developer.chrome.com/docs/css-ui…
不再有排版孤行和寡行
我们都知道那些标题，最后一个单词换行并单独站在新行上，破坏了视觉效果，看起来很奇怪。当然，有老式的
手动换行或将内容分成不同部分。但您听说过text-wrap: balance吗？
通过应用text-wrap: balance属性，浏览器将自动计算单词数并将它们平均分配到两行——非常适合页面标题、卡片标题、工具提示、模态框和FAQ等。
在处理大段文本（如段落）时，您可能需要查看text-wrap: pretty以防止最后一行出现孤行。
参考文章：
blog.csdn.net/qq_37247349…
表单的自动字段大小调整
为输入字段找到合适的大小通常涉及大量猜测——或使用JavaScript——来计算字符数并随着用户输入文本增加字段的高度或宽度。CSS field-sizing旨在改变这一点。通过field-sizing，我们可以自动增长输入和文本区域，也可以自动缩小短选择菜单，使表单始终完美适应内容大小。我们只需要一行CSS即可实现。
以下文章总结了您需要了解的有关field-sizing的所有内容，详细探讨了field-sizing如何影响不同的<form>元素。为了防止您的输入字段变得太小或太大，插入一些额外的样式以保持它们的形状也是一个好主意。同时分享了一个您可以立即复制粘贴的代码片段。
developer.chrome.com/docs/css-ui…
使隐藏内容可搜索
手风琴是一种流行的UI模式，但它们有一个缺点：折叠部分内的内容无法通过页面内搜索进行搜索。通过使用hidden=until-found属性和beforematch事件，我们可以解决这个问题，甚至使内容对搜索引擎可访问。
正如文章<developer.chrome.com/docs/css-ui… 中介绍，在他的使折叠内容可搜索指南中解释的那样，您可以用hidden=until-found属性替换隐藏部分的样式。如果您的页面还有另一个状态需要与您的部分是否显示保持同步，他建议添加一个beforematch事件监听器。它将在浏览器显示hidden=until-found元素之前触发。>
在<select>菜单中样式化组
这是<select>元素的一个小升级，但非常强大：我们现在可以在选择选项列表中添加<hr>，它们将显示为分隔符，以帮助视觉上分解列表中的选项。
如果您想进一步细化，请务必查看<optgroup>。HTML元素允许您通过为每个组添加子标题来在<select>元素内分组选项。
简化可滚动容器的捕捉
有时，您需要一种快速简便的方法来使元素成为可滚动容器。CSS scroll snap使之成为可能。CSS功能使我们能够创建一种良好控制的滚动体验，让用户可以精确地左右滑动并捕捉到容器中的特定项目。无需JavaScript。
以下该文章（中译），逐步引导您设置带有scroll snap的容器。您可以使用它来创建图像库、头像列表或其他组件，在这些组件中，您希望用户滚动并捕捉内容，无论是水平还是垂直。
juejin.cn/post/684490…
工具提示和弹出框的锚点定位
无论您将其用于脚注、工具提示、连接线、视觉交叉引用还是图表中的动态标签，CSS锚点定位API使我们能够相对于其他元素（称为锚点）本地定位元素。
文章（<developer.chrome.com/blog/anchor… 在CSS锚点定位API介绍中详细总结了锚点定位的工作原理。深入探讨了锚点定位背后的机制，如何与一个和多个锚点绑定，以及如何根据锚点的大小调整和定位锚点定位元素。浏览器支持仍然有限，因此您可能希望在使用API时采取一些预防措施。>
使用OKLCH和OKLAB的高清晰度颜色
随着高清晰度颜色的出现，RGB/HSL的时代可能很快就会结束。为了让您熟悉新的颜色空间。
OKLCH和OKLAB都基于人类感知，可以指定人眼可见的任何颜色。虽然OKLAB最适合丰富的渐变，但OKLCH非常适合设计系统中的调色板。OKLCH/OKLAB颜色在Chrome、Edge、Safari、Firefox和Opera中得到完全支持。Figma尚不支持它们。 参考文章： developer.mozilla.org/zh-CN/docs/…
CSS中的相对颜色
假设您有一个背景颜色，并希望将其亮度降低25%，或者您想使用互补色而不必自己计算。相对颜色语法（RCS）使得基于给定颜色创建新颜色成为可能。
为了派生和计算新颜色，我们可以使用from关键字用于颜色函数（color()、hsl()、oklch()等）来修改输入颜色的值。Adam Argyle文章分享了一些代码片段，展示了这在实践中的样子，或查看规范以获取更多详细信息。
smashing-freiburg-2024.netlify.app/24-relative…
使用视图过渡API实现平滑过渡
在许多用例中，平滑的视觉过渡可以使用户体验更加引人入胜。例如，当产品列表页面上的缩略图过渡到产品详情页面上的全尺寸图像时，或者当您有一个固定的导航栏在页面之间导航时保持原位。视图过渡API帮助我们创建网站不同视图之间的无缝视觉过渡。
视图过渡不仅可以在单个文档上触发，还可以在两个不同文档之间触发。两者都依赖于相同的原则：浏览器拍摄旧状态和新状态的快照，在抑制渲染的同时更新DOM，并通过CSS动画驱动过渡。唯一的区别在于如何触发它们，正如Bramus Van Damme在他的视图过渡API指南中解释的那样。这是单页应用程序的一个很好的替代方案，单页应用程序通常依赖于繁重的JavaScript框架。 developer.chrome.com/docs/web-pl…
独占式手风琴
“独占式手风琴”是手风琴组件的一个变体。它只允许同时打开一个披露小部件，因此当用户打开一个新的时，已经打开的将自动关闭以节省空间。感谢CSS，我们现在可以无需一行JavaScript即可创建效果。
要构建独占式手风琴，我们需要向<details>元素添加name属性。当使用此属性时，所有具有相同name值的<details>元素形成一个语义组，并表现为独占式手风琴。Bramus Van Damme详细总结了它的工作原理。
developer.chrome.com/docs/css-ui…
实时和延迟验证
当我们使用:valid 和:invalid 根据用户输入应用样式时，有一个缺点：一个必填且为空的表单控件将匹配:invalid 即使用户尚未开始与之交互。为了防止这种情况发生，我们通常必须编写有状态代码来跟踪用户更改的输入。但现在不再需要了。
通过:user-valid 和:user-invalid ，我们现在有一个本地CSS解决方案，可以自动处理所有这些。与:valid 和:invalid 相反，:user-valid 和:user-invalid 伪类仅在用户更改输入后提供有关错误的反馈。:user-valid 和:user-invalid 适用于input、select和textarea控件。
web.dev/articles/us…
平滑滚动行为
想象一下，您有一个滚动框和一系列链接，这些链接指向框内的锚定位置。当用户点击其中一个链接时，它将带他们到滚动框内的内容部分——但会有一个相当突然的跳跃。scroll-behavior属性使滚动过渡更加平滑，仅使用CSS。
当将scroll-behavior值设置为smooth时，滚动框将以平滑的方式滚动，使用用户代理定义的缓动函数在用户代理定义的时间段内滚动。当然，您也可以使用scroll-behavior: auto，滚动框将立即滚动。
使焦点可见
焦点样式对于帮助键盘用户导航页面至关重要。然而，对于鼠标用户来说，当焦点环在点击按钮或链接时出现时，可能会感到恼火。:focus-visible 在这里帮助我们为两个用户群体创造最佳体验：它为键盘用户显示焦点样式，并为鼠标用户隐藏它们。
:focus-visible 在元素匹配:focus 伪类且用户代理通过启发式方法确定应在元素上显示焦点时应用。好奇它在实践中如何工作？MDN Web Docs强调了:focus 和:focus-visible 之间的区别，您需要考虑的可访问性方面，以及如何为不支持:focus-visible 的旧浏览器版本提供回退。
developer.mozilla.org/zh-CN/docs/…
基于子元素的父元素样式
历史上，CSS选择器以自上而下的方式工作，允许我们根据父元素样式化子元素。新的CSS伪类:has 则相反：我们现在可以根据子元素样式化父元素。但这还不是全部。这篇（<www.joshwcomeau.com/css/has/） 关于:has> 的精彩介绍，探讨了显示伪类功能的实际用例。
:has 不仅限于父子关系或直接兄弟关系。相反，它让我们可以根据完全不同的容器中任何其他元素的属性或状态样式化一个元素。正如文章所示，它可以用作一种全局事件监听器——例如，在模态框打开时禁用页面滚动，或创建无JavaScript的暗模式切换。
在类型和间距之间插值
CSS比较函数min()、max()和clamp()如今在所有主要浏览器中都得到支持，为我们提供了一种有效的方法来创建具有流体类型比例、网格和间距系统的动态布局。
为了让您立即在项目中使用这些函数，这里有篇综合指南（<ishadeed.com/article/css… 解释了您需要了解的有关min()、max()和clamp()的所有内容，包括实际示例和用例，以及您可能遇到的所有混淆点。>
如果您正在寻找一种快速简便的方法来创建流体比例，Utopia的流体类型比例计算器（<utopia.fyi/type/calcul… 可以满足您的需求。您只需要定义最小和最大视口宽度以及比例步数，计算器将为您提供比例的响应式预览和CSS代码片段。>
可靠的对话框和弹出框
如果您正在寻找一种快速创建模态框或弹出窗口的方法，<dialog> HTML元素最终提供了一个本地（且可访问的！）解决方案来帮助您完成任务。它表示一个模态或非模态对话框或其他交互组件，例如确认提示或用于输入数据的子窗口。
虽然模态对话框中断与页面的交互，但非模态对话框允许在对话框打开时与页面交互。Adam Argyle发布了一些代码片段(smashing-freiburg-2024.netlify.app/27-dialog/)…
`如何开箱即用地阻止弹出窗口和非阻塞菜单的弹出框。响应式HTML视频和音频
2014年，HTML视频源的媒体属性支持从HTML标准中删除。去年，它又回来了，这意味着我们可以使用媒体查询来提供响应式HTML视频。
这篇文章（<scottjehl.com/posts/using… 总结了响应式HTML视频——甚至音频——的工作原理，编写标记时需要考虑的事项，以及可以与HTML视频结合使用的其他类型的媒体查询。>
移动设备上的正确虚拟键盘
这是一个小细节，但有助于考虑周全的用户体验：显示最舒适的触摸屏键盘，帮助用户输入信息，而无需来回切换以插入数字、标点符号或特殊字符（如@符号）。
为了显示正确的键盘布局，我们可以使用inputmode(<css-tricks.com/everything-… 它指示浏览器显示哪个键盘，并支持数字、电话、十进制、电子邮件、URL和搜索键盘的值。为了进一步改善用户体验，我们可以添加enterkeyhint属性：它调整Enter键上的文本。如果未使用enterkeyhint，用户代理可能会使用inputmode属性的上下文信息。>
总结
当我们开始在项目中采用所有这些闪亮的新前端功能时，网络平台当然在不断演变——已经有一些令人兴奋的事情在酝酿中！例如，我们即将获得砌体布局、完全可定制的<selectmenu>下拉菜单以及用于调整字体以完美对齐网格的文本框修剪。向所有不懈努力推动网络发展的人们致敬！👏
展望2025
刚刚开工，一年的轮回又开始，2025年注定也是充满挑战与变数的一年，作为平凡打工人，仍需抱以平常心积极乐观去面对，如同哪吒电影的一句金句“真正的英雄，不是没有软肋，而是敢于直面软肋”，逃避没用只能直面，同时大家也要保持健康生活方式（合理饮食、充足睡眠、适度运动），学会放松与享受（多巴胺充电、接触大自然），工作是场长跑，只有健康才能持久，自己新的一年也会多多阅读学习，分享技术文章，挖掘副业，增加收入。欢迎关注我！祝大家开工大吉，蛇年大赚！
