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

EN

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

这里有一个很好的教程，可以让供应商的前缀问题变得不那么痛苦：

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

，你对训练很了解。想要用CSS3给你网站的某些部分加上圆角吗？然后，您只需要三个供应商前缀: webkit、moz和W3C推荐的表单。这不是在浪费时间吗--更不用说屏幕空间了？相反，如果我们可以使用类文件呢？嗯，我们可以的！今天我会告诉你怎么做。

。。下面是本教程中较少的类：http://snipplr.com/view/47181/less-classes/

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

简而言之，不是。

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

Firefox3.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 */

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

基本上，如今被现代化器等库使用的可靠的技术依赖于浏览器行为，这种行为在所有浏览器中都是奇怪的相当一致的，并且只有很小的变化就可以用于所有类型的特征检测。

让我们以css属性'transform‘为例。如果你测试的结果是...

somediv.style['transform']

..。并且浏览器支持该名称，您将返回一个字符串，即使该字符串对于未设置的属性为空。另一方面，如果浏览器不能识别该名称，它将返回javascript undefined.result。

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

(Khtml Ms O Moz Webkit Web-Kit)

...it不需要花费太多时间来测试它们，如果缓存测试结果，速度会快得惊人。有了这里的库，我们实际上可以使用普通的基于标准的名称进行创作，除了那些奇怪的名称，其中属性值的布局不同，比如在一些渐变中。

有了这种缓存，它的速度非常快，甚至在到达DOMContentLoaded事件之前就转换了CSS文件和样式元素中的所有CSS，因此甚至不会出现任何屏幕闪烁或必须等待加载事件的脚本中出现的其他奇怪情况。

虽然测试和缓存发生在加载过程中，这些属性名称的所有各种CamelCase连字符格式也会得到处理，因此即使在以后编码时，或者当属性像CSS3D一样以编程方式处理时，或者有时甚至加载更多的CSS时，所有的计算都已经完成。

还可以做一些其他的事情，比如在某种程度上增强浏览器的CSS支持，还有一件我一直在做的事情，那就是允许jQuery-ui .css文件真正完全验证，同时能够在不丢失任何外观的情况下丢弃大多数图像。

顺便说一句，除了这项技术简单得离谱，而且速度快得惊人之外，这项工作本身就发生在document.readyState的第二阶段，甚至在页面完全加载或甚至到document.readyState 4“完成”之前很久。

CSS可能不是很多程序员的朋友，但我们喜欢CSS，甚至已经得到了CSS，所以CSS是加载和配置jQuery等人的第三方插件的工具，消除了对大多数脚本的需要，甚至在许多情况下消除了所有这些脚本。

有时，愚蠢的剪切量让人们认为，能够拥有经过验证的内容和干净的源代码的想法已经走上了清洁空气的道路，但并不是真的，因为它比采用CSS边界三角形技巧并将其更新为具有纹理的埃及金字塔要困难得多。)