使用供应商特定的CSS3前缀进行性能和DOM加载

Question

我现在已经好奇了一段时间。

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

现在，对于我的页面，我使用了渐变和border-radius，制作了几个使用它们的类，然后将这些类应用于。

以下哪项更适合做？

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

2. 使用课程中的所有浏览器前缀，让浏览器使用适合自己的浏览器前缀。

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

Answer 1

  

以下哪项更适合做？

     

  

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

  

2. 使用课程中的所有浏览器前缀，让浏览器使用适合自己的浏览器前缀。

  

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

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

如您所见，选项1引入了一个额外的层（JavaScript），如果您只想在可能的情况下使用某些CSS3功能，则不需要这样做。 选项2将是性能最佳的解决方案。

Answer 2

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

解决方案是编写代码，对其进行概要分析并找出答案。很多时候，你会发现无论哪种方式都可以接受这种表现。

Answer 3

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

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

浏览器会在仍然应用样式时跳过他们不理解的声明（尽管你的CSS不会验证）。最好使用CSS generator来避免输入每个前缀。

你应该避免使用Javscript来检测CSS功能，因为这会中断separation of concerns - CSS用于表示，Javascript用于行为。