CSS 无用的供应商前缀

CSS useless vendor prefixes

我有一个 2 或 3 年前制作的样式表,当时 CSS 充满了 flexbox 这些可怕的供应商前缀。我根据需要使用 flexboxes,Chrome 和 Safari 带有 -webkit- 前缀。

我刚刚在 caniuse 上看到 flexboxes 现在在每个浏览器上都可以在没有前缀的情况下工作。您是否知道仍然需要前缀的 CSS 属性 的最新列表?

当时,渐变或动画等内容需要供应商前缀。我想知道我是否可以安全地删除所有内容,或者其中一些是否仍在使用。

前段时间也在找,运行变成了this useful website: Should I prefix?。它列出了 CSS 属性以及是否仍然需要前缀。

接下来,您可以随时查看 Can I Use 了解更多信息和详细信息。

+1 到 caniuse.com 是查看浏览器前缀信息的最佳位置。但是您的 flexbox 用例是独一无二的。

Flexbox 的实现多年来发生了很大变化,远远超过我所知道的几乎任何其他 CSS 标准。检查您使用的是哪个版本的最佳方法是检查样式表中的 display 值。

  • display: box 是最老的实现,你可能没用过这个。
  • display: flexbox 是新旧 flexbox 标准之间的过渡状态。如果您已经 2-3 年了,您可能已经使用过它并且必须更改您的代码以匹配新的实现。
  • display: flex 是具有良好跨浏览器支持的现代实现。如果你使用这个的前缀版本,你应该能够安全地删除前缀并获得相同的结果。

CSS Tricks 是现代 flexbox 方法的最佳简写之一:https://css-tricks.com/snippets/css/a-guide-to-flexbox/