我们有一些新的 CSS 功能！

我们有一些新的 CSS 功能！

CSS 最近发展了很多，部分原因是越来越多的公司正在为新功能和属性的开发做出贡献。微软在这方面发挥了重要作用，因为现在他们的 Edge 浏览器是基于 Chromium 的，所以他们是 最后 优先考虑最新的网络标准。

最近，许多新功能已被确认完全兼容最常用浏览器（Edge、Chrome、Safari、Firefox 和 Opera）的最新版本，这对 Web 开发人员来说当然是个好消息，因为他们赢得了不必执行魔术来使它们的样式与一些不那么频繁更新的浏览器兼容。

不久前还在工作的功能终于跨越了兼容性的障碍。我们知道 Safari 如何成为 Web 开发社区的新 Internet Explorer。好吧，这一次苹果决定表态，加入其他现代浏览器，这意味着即使 Safari 也支持这些新功能。

一些即将支持的功能包括：

• @容器
• 强调色
• 子网格
• 促进（）
• 颜色混合（）

@container（容器查询）

使用此属性的元素无需适应视口，而是能够根据它们周围的可用空间来调整它们的大小。这对于复杂布局非常有用，其中每个单独组件的大小优先于整个布局的大小。遗憾的是，这还不是任何浏览器的稳定版本，但您可以使用您首选浏览器的开发版本进行尝试。

了解有关容器查询的更多信息。

强调色

该物业 强调色 将允许 Web 开发人员为表单等元素选择他们喜欢的强调色。浏览器将确保强调色和其他元素的视觉标识之间有足够好的对比度。这是所有主流浏览器的稳定版本，所以你现在可以去看看！

了解更多关于强调色的信息。

子网格

Firefox 支持 Subgrid 已经有一段时间了，但它的支持终于被带到了其他浏览器。它使网格线易于用于子元素和孙子元素。它仍然仅在其余浏览器的开发版本中受支持。

了解有关子网格的更多信息。

hwb()（色相、白度、黑度）

hwb() 是一种更以人为本的颜色思考方式。它的工作方式类似于 CSS 中的其他颜色值，例如：

提升（200 100% 80%）

这意味着色调为 200，白度为 100%，黑度为 80%。

目前仅在 Firefox 和 Safari 上可用。

了解有关 hwb() 的更多信息。

颜色混合（）

color-mix() 将允许您混合您选择的任何两种颜色。例如：

:root { --gray: 颜色混合（黑色，白色）； }

但您也可以更具体地使用百分比：

:root { --dark-blue: 颜色混合（蓝色 40%，黑色 60%）； }

目前仅在 Firefox 和 Safari 的开发版中可用。

了解有关颜色混合（）的更多信息。

这些并不是今年 CSS 引入的唯一新属性/功能。还有很多：

• 视口单位
• 排版
• @层
• 表格兼容性
• 甚至更多！

找到对这些的更深入的解释 CSS 2022 现状 .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/35174/22121400