我可以在没有浏览器检测的情况下使用关键帧吗？

Question

我正在制作一个使用一些 CSS3 关键帧动画的网站。

我看到的指南建议为每个浏览器使用单独的代码，并在我使用时指定哪个代码适用于哪个浏览器。
例如。 This guide 这表明：

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

And this one 这表明分组略有不同，但本质上是一样的。

但是我看到很多文章说浏览器检测在现代网页中是不好的做法。

This page (same site as above)

W3C agrees 但感觉 css 中的浏览器前缀可以例外。

是否可以使用仅查询功能支持而不指定浏览器的方法来使用关键帧？

Answer 1

However I have seen many articles saying that browser detection is poor practice in modern webpages.

是的，浏览器检测不是一个好的做法，因为它不可靠并且可能在（不久的）将来出现故障。

但是，您在这里所做的并不是that article中描述的"browser detection"。您正在使用供应商前缀。

供应商前缀是可以的，这是公认的方式（实现仍被视为 "draft" 的功能）。这是唯一的方式。

"The problem" 是浏览器不一定支持 "standard" 这样做的方式，即。没有供应商前缀。可能是因为他们在它成为标准之前就实施了它；在 "final" 实施达成一致之前。与此同时，他们实现了他们认为它将如何工作并使用供应商前缀。供应商前缀规则的工作方式可能与最终 "standard".

不同

因此，带有供应商前缀的版本将始终（或暂时）在其设计的浏览器中运行。浏览器忽略所有其他供应商前缀规则（在 CSS 中，如果浏览器不理解某些内容，它应该忽略它）。当浏览器确实实施标准并开始支持非供应商前缀规则时，该规则将优先。

我可以在没有浏览器检测的情况下使用关键帧吗？

Can I use keyframes without browser detection?

css

cross-browser