Safari 技术预览版中的 CSS 单独转换属性

WebKit 博客详细介绍了 如何在 Safari 技术预览版的最新版本中使用单独的 CSS Transform 属性。这使得浏览器与 CSS Transforms 模块级别 2 规范 保持一致，该规范将 translate()、rotate() 和 scale() 函数从 transform 属性中分解成它们自己的单独属性：translate、scale 和 rotate。

因此，与其在 transform 属性上链接这三个函数

.some-element {
  transform: translate(50px 50px) rotate(15deg) scale(1.2);
}

…我们可以将它们分别写成自己的属性

.some-element {
  translate: 50px 50px;
  rotate: 15deg;
  scale: 1.2;
}

如果您像我一样，您的脑海中会立即想到“我们为什么要编写更多代码？”。我的意思是，我们习惯于看到单个属性成为简写属性的子属性，而不是相反，就像我们在 background、border、font、margin、padding、place-items 等中看到的那样。

但 WebKit 团队概述了一些我们为什么要这样做的充分理由

• 当只需要一个函数时，编写单个属性更简单，例如 scale: 2; 而不是 transform: scale(2);。
• 当它们链接在一起时，无需担心意外覆盖其他 transform 属性。
• 更改单个属性上的关键帧动画要比在将它们与 transform 链接时必须“预计算”和“重新计算”中间值简单得多。
• 我们可以更精确地控制单个属性的时间和关键帧。

该帖子还指出了一些有用的提示。例如，新的单独转换属性首先应用——translate、rotate 和 scale，按此顺序——然后是 transform 属性中的函数。

哦，我们不能忽视浏览器支持！在撰写本文时，它非常有限……基本上仅限于 Safari 技术预览版 117 和 Firefox 72 及更高版本，全球支持率高达 3.9%

• translate
• rotate
• scale

该帖子建议如果您想开始使用这些属性，请使用 @supports

@supports (translate: 0) {
  /* Individual transform properties are supported */
  div {
    translate: 100px 100px;
  }
}

@supports not (translate: 0) {
  /* Individual transform properties are NOT supported */
  div {
    transform: translate(100px, 100px);
  }
}

这是从帖子中直接提取的代码示例。修改此代码可以帮助我们避免使用 not 运算符。我不确定这是否是代码的改进，但这样做感觉更像是渐进增强

div {
  transform: translate(100px, 100px);
}

@supports (translate: 0) {
  /* Individual transform properties are supported */
  div {
    transform: none;
    translate: 100px 100px;
  }
}

这样，我们就可以清除简写函数并为单独的属性腾出空间，但前提是它们受支持。