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 回答