浏览器和 CSS的激动人心的时刻

上个月，我为 Smashing Magazine 写了一些令人兴奋的新 CSS 功能，您可以期待在 2022 年在您附近的浏览器中看到这些功能。现在在网络上工作无疑是一个激动人心的时刻，浏览器对新功能的支持正以闪电般的速度发展！本月，Safari 发布了一个新版本，其中包括对大量新内容的支持，包括:has()（也称为“父选择器”）accent-color、和Cascade Layers（所有这些都在我的 Smashing 文章中介绍），以及一些额外的宝石：

三角函数

在浏览 Safari 发布公告时，我几乎错过了这一行，但是是的，Webkit 已经提供了对 CSS三角函数的支持！我对这将为创意 CSS 开辟的可能性感到难以置信的兴奋，其中一些在我去年为 Codrops 编写的CSS 和 JS 中的三角函数系列中进行了介绍。

网站建设

新视口单位

视口单位（vh、vw和）非常棒vmin，max除非它们不是。您是否曾经vh发现它在移动设备上无法按预期工作？这是因为，视口高度通常不是固定的，并且会在用户滚动并且设备菜单栏移出视图时发生变化。新的视口单元是该问题的解决方案，允许我们指定最大、最小或动态的视口单元。Webkit 还添加了对逻辑属性样式视口单元（vi、vb和动态变化）的支持，允许我们在行内或块维度中指定视口单元，而不是宽度和高度。

:focus-visible

此版本使 Safari 在支持:focus-visible伪类方面与其他浏览器保持同步，这对于提供可访问的焦点样式非常方便，从而减少了对 polyfill 的需求。这篇 CSS Tricks 文章解释了它的有用之处。

很酷的字体东西

我不得不承认，这完全不在我的视线范围内：font-palette并@font-palette-values为开发人员提供了一种引用预着色字体和定义字体自定义调色板的方法。我还没有深入研究这个，但它看起来是网页排版的一个非常令人兴奋的步骤！

滚动行为

scroll-behavior允许我们指定用户在被操作触发时滚动到网页元素的方式（例如，通过单击页内锚链接）。以前页面会跳转到指定点，但我们可以指示它平滑滚动。大多数浏览器已经支持这个功能一段时间了，但 Safari 一直在阻止我们。现在我们可以流畅地滚动到任何地方——无论是使用scroll-behavior: smooth属性，还是在 JS 中使用scrollTo选项：

window.scrollTo({
  top: 1000,
  left: 0,
  behavior: 'smooth',
})

HTML 和 Javascript

除了一些非常棒的 CSS 功能外，我们还有一些 HTML 和 JS 好东西。只有几个突出的是：

延迟加载图像

元素上的loading="lazy"属性<img>允许延迟图像加载，直到滚动到视图中，这是一个很好的性能提升。同样，到目前为止，Safari 在这方面一直落后于其他浏览器。

<对话框> 元素

这<dialog>使我们能够创建一个包含所有可访问性内容的模式，而不必费心解决变通办法。万岁！Una在这里有一个漂亮的演示。

Array.prototype.at()

这个厚颜无耻的小数组方法让我们传入一个负整数，从数组末尾选择一个项目。告别做事的日子someArray[someArray.length - 1]。

互操作 2022

本月还见证了所有主要浏览器引擎的联合声明，它们承诺共同努力以可互操作的方式实现主要的新 CSS 功能——这意味着它们在每个浏览器中都以相同的方式实现。优先功能列表包括一些非常受欢迎的东西，例如容器查询，并且应该希望意味着 CSS 功能开发继续加快步伐！访问仪表板以查看浏览器的运行情况。

看到 Safari 在其中许多功能的排名上一路飙升，这真是令人难以置信，这表明团队明确承诺在以前被广泛指责阻碍 CSS 的浏览器中推动事情向前发展。愿它继续下去！

不甘示弱，Nicole Sullivan通过 Twitter证实，Chrome 团队也在努力实现几乎所有最常被要求的功能。对于 CSS 来说，这无疑是一个激动人心的时刻。