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);

对于border-radius，我必须使用3种不同的属性，对于背景渐变，我必须以5种不同的方式使用background属性。它增加了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']

...并且浏览器支持该名称，即使它没有设置属性，它也会返回一个字符串。另一方面，如果浏览器无法识别该名称，则会返回javascript undefined.result。

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

(Khtml Ms O Moz Webkit Web-Kit)

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

有了这个缓存虽然速度很快，它甚至在达到DOMContentLoaded事件之前就会转换CSS文件和STYLE元素中的所有CSS，因此甚至没有任何屏幕闪烁或者在脚本中可能会看到的其他奇怪的事情需要等待对于加载事件

虽然在加载过程中进行了测试和缓存，但是这些属性名称的所有各种CamelCase Hyphen-Case格式化也都得到了处理，因此即使在编写代码时或者以编程方式处理属性时也会像CSS 3D一样，或者偶尔加载更多的CSS，所有的计算都已经完成。

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

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

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

有时候那里的傻傻剪切量让人们认为能够获得有效内容和清洁源的想法已经成为清洁空气的方式，但实际上并不是因为它比使用CSS边界三角形技巧更难更新它以使纹理成为egyption金字塔：）

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

3 个答案: