没有浏览器检测我可以使用关键帧吗？

Question

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

我看到的指南建议为每个浏览器使用单独的代码,指定哪些代码用于我所使用的浏览器.
例如. 本指南建议:

@-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+ */
}

而这一个建议略有不同的分组,但基本上是相同的事情.

但是我看到很多文章说浏览器检测在现代网页中很糟糕.

此页面(与上面相同的网站)

W3C同意但感觉可以在css中对浏览器前缀进行例外处理.

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

Answer 1

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

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

然而，您在这里所做的并不是那篇文章中描述的“浏览器检测” 。您正在使用供应商前缀。

供应商前缀是可以接受的方法（实现仍被视为“草案”的功能）。这是做到这一点的唯一方法。

“问题”是浏览器不一定支持执行此操作的“标准”方式，即。没有供应商前缀。可能是因为他们在成为标准之前就实施了这一点；在“最终”实施达成一致之前。与此同时，他们实现了他们认为的工作方式并使用供应商前缀。供应商前缀规则的工作方式可能与最终“标准”不同。

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