javascript - 使用 CSS3 vendor 特定前缀的性能和 DOM 加载

标签 javascript html css vendor-prefix

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

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

现在,对于我的页面,我使用了渐变和边框半径,制作了几个使用它们的类,并在整个过程中应用了这些类。

以下哪项更好?

  1. 使用 javascript 查找是否存在支持,如果支持则使用属性,如果以上不支持,则检查用户代理并相应地应用 vendor 特定属性。

  2. 在类中使用所有浏览器前缀,让浏览器使用适合它的那个。

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

最佳答案

Which of the following is better to do?

  1. Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.

  2. Using all the browser prefixes in the classes and let the browser use whichever suits it.

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

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

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

关于javascript - 使用 CSS3 vendor 特定前缀的性能和 DOM 加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9161678/

相关文章:

javascript - 查询选择器不工作

javascript - 如何在版本更改时重新加载资源(HTML/CSS/JS)

javascript - 使用 jQuery 获取 div 中每个图像的源

html - 从 HTML 列表项中删除元素符号

html - 为什么侧边栏 <div> 上方有空间

javascript - 数据表中的多个子行

javascript - 使用 Jquery 将文本框值附加到 Summernote Textarea

javascript - 将光标设置为 14 onfocus 文本框的长度

jquery - 如何显示<li>的每一项?

css - 填充 svg 多边形形状的一半 - 星形