#优质博文 #前端 #css #新特性
摘自 New Front-End Features For Designers In 2025 方便检索

1. CSS scroll snap 让用户可以精确地左右滑动并捕捉到容器中的特定项目，无需 JavaScript。 （这个之前用到过，挺丝滑的）
2. Introduction to the CSS Anchor Positioning API（CSS 锚点定位 API 的介绍） CSS 锚点定位 API 使我们能够相对于其他元素定位元素。
3. 相对颜色语法 (RCS) 可以根据给定颜色创建新颜色。要导出和计算新颜色，我们可以使用颜色函数（ color() 、 hsl() 、 oklch()等）的from关键字来修改输入 color 的值。 Adam Argyle 分享了一些实践中的代码片段，或者查看规范以获取更多详细信息。
4. 有了:user-valid和:user-invalid ，我们现在有了一个可以自动处理所有这些的原生 CSS 解决方案。与:valid和:invalid相反， :user-valid和:user-invalid伪类仅在用户更改输入后才向用户提供有关错误的反馈。 :user-valid和:user-invalid适用于输入、选择和文本区域控件。
5. :focus-visible旨在帮助我们为这两个用户组创造最佳体验：它为键盘用户显示焦点样式，为鼠标用户隐藏焦点样式。MDN Web Docs 重点介绍了:focus和:focus-visible之间的差异、您需要在可访问性方面考虑什么，以及如何为不支持:focus-visible旧浏览器版本提供后备。
6. 现在，可以使用媒体查询来提供响应式 HTML 视频。根据浏览器的视口调整视频和音频文件可以减少页面负载。