如何同时使用 -moz- 和 -webkit- css 属性来支持不同的浏览器？

Question

对于所有 CSS3 属性，我必须使用不同的供应商前缀版本来支持不同的渲染引擎。这是一个例子：

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

background:#dee0e1;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f2f3), to(#dee0e1));
background:-moz-linear-gradient(#f1f2f3, #dee0e1);
background:-o-linear-gradient(#f1f2f3, #dee0e1);
background:linear-gradient(#f1f2f3, #dee0e1);

对于边框半径，我必须使用 3 种不同的属性，对于背景渐变，我必须以 5 种不同的方式使用背景属性。它增加了 CSS 的大小。

有没有办法只使用一个属性并让 Firefox 1-5 理解它？

Answer 1

有没有办法只使用一个 属性并使 Firefox 1-5 明白了吗？

简而言之，没有。

版本 4 之前的 Firefox 需要 -moz-border-radius: http://caniuse.com/border-radius

Firefox 3.6 still has some market share，所以你现在应该保留供应商前缀版本。

对于背景渐变，我必须 使用 5 种不同的背景属性 方法。它增加了 CSS 的大小。

目前您对此无能为力。

最终，所有浏览器都将支持linear-gradient。在此之前，并且不再使用旧版本，您将不得不忍受臃肿的 CSS。

如果你想支持尽可能多的浏览器，渐变代码实际上会变得更糟：

http://www.colorzilla.com/gradient-editor/

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */

Answer 2

LESS 是一种 CSS 语言，可编译为普通 CSS，让您能够抽象出许多编写样式表的繁琐元素，例如每次输入多个供应商前缀。

这是一个关于减少供应商前缀问题痛苦的不错的教程：

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/

你非常了解演习。想要 提供您网站的某些部分 CSS3的圆角？然后你会 需要三个供应商 前缀：webkit、moz 和 W3C 推荐表格。这不是一个巨大的 浪费时间——更不用说屏幕了 空间？如果相反，我们可以使用 一个类文件？好吧，我们可以！我将会展示出来 你今天怎么样。

.. 以下是本教程中的 LESS 类：http://snipplr.com/view/47181/less-classes/

Answer 3

实际上，供应商前缀 CSS 对这里的项目没有太大影响 因为这个问题在很大程度上通过一个 javascript 闭包来消除，以保存动态前缀测试的缓存结果和几行 javascript。这早在他们开始疯狂使用前缀之前就已经实现了。

基本上，现代器等库如今使用的经过验证的真实技术依赖于一种浏览器行为，这种行为在所有浏览器中都非常一致，并且可以使用微小的变化进行各种特征检测。

让我们以 CSS 属性“transform”为例。如果您测试...的结果...

somediv.style['transform']

... 并且浏览器支持该 name ，您将返回一个 string ，即使该属性未设置它为空。另一方面，如果浏览器无法识别该名称，它将返回 javascript undefined.result。

因为供应商前缀的数量确实相当有限，例如......

(Khtml Ms O Moz Webkit Web-Kit)

...测试它们并不需要太多，如果您缓存测试结果，它可以非常快。有了这里的库，我们实际上可以使用基于普通旧标准的名称进行创作，而不必担心它，除了那些属性值布局不同的奇怪名称，例如在某些渐变中。

虽然它的缓存速度如此之快，但它甚至在到达 DOMContentLoaded 事件之前就翻译了 CSS 文件和 STYLE 元素中的所有 CSS，因此甚至没有任何屏幕闪烁或其他可能在脚本中看到的奇怪现象，必须等待加载事件

在加载期间进行测试和缓存时，这些属性名称的所有各种 CamelCase 连字符-大小写格式也会得到处理，因此即使在稍后编码或以编程方式处理属性时（如 CSS 3D） ，或者有时加载更多的 CSS ，所有的计算都已经完成了。

还可以做一些其他巧妙的事情，例如在一定程度上增强浏览器的 CSS 支持，以及我一直在修补的一件事实际上会 允许 jQuery-ui .css 文件实际完全验证，同时他能够放弃大部分图像而不会失去外观。

顺便说一句，除了这项技术非常简单而且速度极快之外，工作本身发生在 document.readyState 的第二阶段，远在页面完全加载甚至 document.readyState 4“完成”之前。

CSS 可能不是很多程序员的朋友，但我们喜欢它，甚至已经得到了它，因此 CSS 可以加载和配置来自 jQuery 之类的第三方插件，从而消除了对大多数人的需求脚本的初始化部分，在许多情况下消除了所有这些。

有时，愚蠢的剪切量让人们认为能够拥有经过验证的内容和清洁源的想法已经走向了清洁空气的道路，但并不是真的，因为它比采用 CSS 边框三角形技巧和更新它以具有纹理以制作埃及金字塔:)