3

我对这个好奇了一段时间。

css3 属性尚未标准化，但可以由浏览器实现，使用特定浏览器的前缀。例如，可以使用border-radius，它在现代浏览器上运行良好。但是，对于以前版本的浏览器供应商，我们可以使用供应商特定的属性，如 -moz、-webkit 等前缀来工作。

现在，对于我的页面，我使用了渐变和边框半径，创建了几个使用它们的类，并通过这些类应用了这些类。

以下哪个更好？

  1. 使用 javascript 查找是否支持，如果支持则使用属性，如果以上为 false，请检查用户代理并相应地应用供应商特定属性。

  2. 使用类中的所有浏览器前缀，让浏览器使用适合它的任何一个。

我好奇和关心的是 DOM 加载的性能和时间。

4

3 回答 3

6

以下哪个更好？

  1. 使用 javascript 查找是否支持，如果支持则使用属性，如果以上为 false，请检查用户代理并相应地应用供应商特定属性。

  2. 使用类中的所有浏览器前缀，让浏览器使用适合它的任何一个。

选项 1 包括使用 JavaScript 检测支持，然后有条件地写出带或不带前缀的 CSS 代码，并让浏览器应用样式。

选项 2 包括简单地使用 CSS 并依靠浏览器忽略它不理解的前缀/声明。

如您所见，选项 1 引入了一个额外的层 (JavaScript)，如果您只想尽可能使用一些 CSS3 功能，则这不是必需的。选项 2 将是最高效的解决方案。

于 2012-02-06T15:04:09.807 回答
1

与此类问题一样，答案是 - 视情况而定。这取决于您使用的前缀、它们在 HTML 中出现的频率、您正在测试的浏览器等。

解决方案是编写代码，对其进行分析，然后找出答案。很多时候，您会发现无论哪种方式，性能都是可以接受的。

于 2012-02-06T14:34:24.577 回答
0

我使用选项 2 - 将所有浏览器前缀（以及非前缀版本）添加到 CSS：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

浏览器将跳过他们不理解的声明而没有任何问题（尽管您的 CSS 不会验证），同时仍然应用样式。最好使用CSS 生成器来避免输入每个前缀。

您应该避免使用 JavaScript 来检测 CSS 功能，因为这会破坏关注点分离- CSS 用于表示，而 Javascript 用于行为。

于 2012-02-06T15:29:02.157 回答