blocks|key|2609795|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2609796|有没有办法只使用一个属性，并让Firefox1-5理解它？|blockquote|2609797|2609798|2609799|简而言之，不是。|2609800|火狐4之前的版本需要-moz-border-radius：http://caniuse.com/border-radius|offset|length|style|CODE|2609801|Firefox3.6的still+has+some+market+share，所以你现在应该保留供应商的前缀版本。|2609802|对于背景渐变，我必须以5种不同的方式使用|2609803|属性。它增加了CSS的大小。|2609804|2609805|2609806|目前，你对此无能为力。|2609807|最终，所有的浏览器都将支持linear-gradient。在此之前，旧版本将不再使用，您将不得不忍受臃肿的CSS。|2609808|如果你想支持尽可能多的浏览器，梯度代码实际上会变得更糟：|2609809|http://www.colorzilla.com/gradient-editor/|2609810|background:+rgb(30,87,153);+/*+Old+browsers+*/
background:+-moz-linear-gradient(top,+rgba(30,87,153,1)+0%25,+rgba(41,137,216,1)+50%25,+rgba(32,124,202,1)+51%25,+rgba(125,185,232,1)+100%25);+/*+FF3.6%2B+*/
background:+-webkit-gradient(linear,+left+top,+left+bottom,+color-stop(0%25,rgba(30,87,153,1)),+color-stop(50%25,rgba(41,137,216,1)),+color-stop(51%25,rgba(32,124,202,1)),+color-stop(100%25,rgba(125,185,232,1)));+/*+Chrome,Safari4%2B+*/
background:+-webkit-linear-gradient(top,+rgba(30,87,153,1)+0%25,rgba(41,137,216,1)+50%25,rgba(32,124,202,1)+51%25,rgba(125,185,232,1)+100%25);+/*+Chrome10%2B,Safari5.1%2B+*/
background:+-o-linear-gradient(top,+rgba(30,87,153,1)+0%25,rgba(41,137,216,1)+50%25,rgba(32,124,202,1)+51%25,rgba(125,185,232,1)+100%25);+/*+Opera11.10%2B+*/
background:+-ms-linear-gradient(top,+rgba(30,87,153,1)+0%25,rgba(41,137,216,1)+50%25,rgba(32,124,202,1)+51%25,rgba(125,185,232,1)+100%25);+/*+IE10%2B+*/
filter:+progid:DXImageTransform.Microsoft.gradient(+startColorstr='#1e5799',+endColorstr='#7db9e8',GradientType=0+);+/*+IE6-9+*/
background:+linear-gradient(top,+rgba(30,87,153,1)+0%25,rgba(41,137,216,1)+50%25,rgba(32,124,202,1)+51%25,rgba(125,185,232,1)+100%25);+/*+W3C+*/|code-block|syntax|javascript|2609811|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/border-radius|1|http://gs.statcounter.com/#browser_version-ww-monthly-201006-201106|2^0|0|0|0|0|0|A|I|T|W|0|0|B|R|1|0|0|0|0|0|0|D|F|0|0|0|16|2|0|0^^$0|@$1|2|3|-4|4|5|6|1J|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1K|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|1L|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|1M|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|1N|7|@]|8|@]|9|$]]|$1|H|3|I|4|5|6|1O|7|@$J|1P|K|1Q|L|M]]|8|@$J|1R|K|1S|1|1T]]|9|$]]|$1|N|3|O|4|5|6|1U|7|@]|8|@$J|1V|K|1W|1|1X]]|9|$]]|$1|P|3|Q|4|5|6|1Y|7|@]|8|@]|9|$]]|$1|R|3|S|4|C|6|1Z|7|@]|8|@]|9|$]]|$1|T|3|-4|4|5|6|20|7|@]|8|@]|9|$]]|$1|U|3|-4|4|5|6|21|7|@]|8|@]|9|$]]|$1|V|3|W|4|5|6|22|7|@]|8|@]|9|$]]|$1|X|3|Y|4|5|6|23|7|@$J|24|K|25|L|M]]|8|@]|9|$]]|$1|Z|3|10|4|5|6|26|7|@]|8|@]|9|$]]|$1|11|3|12|4|5|6|27|7|@]|8|@$J|28|K|29|1|2A]]|9|$]]|$1|13|3|14|4|15|6|2B|7|@]|8|@]|9|$16|17]]|$1|18|3|-4|4|5|6|2C|7|@]|8|@]|9|$]]]|19|$1A|$4|1B|1C|1D|9|$1E|1F]]|1G|$4|1B|1C|1D|9|$1E|1H]]|1I|$4|1B|1C|1D|9|$1E|12]]]]

<blockquote>
 Is there a way to use only one
 property and make Firefox 1-5
 understand it?
</blockquote>

In short, no.

Firefox before version 4 requires <code>-moz-border-radius</code>: <a href="http://caniuse.com/border-radius" rel="nofollow">http://caniuse.com/border-radius</a>

Firefox 3.6 <a href="http://gs.statcounter.com/#browser_version-ww-monthly-201006-201106" rel="nofollow">still has some market share</a>, so you should keep the vendor prefixed version for now.

<blockquote>
 for a background gradient I have to
 use background property in 5 different
 way. It increase the size of CSS.
</blockquote>

There's nothing you can do about this, at the moment.

Eventually, all browsers will support <code>linear-gradient</code>. Until that happens, and the older versions are no longer used, you'll have to put up with bloated CSS.

The gradient code actually gets worse if you want to support as many browsers as possible:

<a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">http://www.colorzilla.com/gradient-editor/</a>

<pre><code>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 */
</code></pre>

blocks|key|1754880|text|是一种编译为普通CSS的CSS语言，它使您能够抽象出编写样式表的大量繁琐元素，例如每次输入多个供应商前缀。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1754881|这里有一个很好的教程，可以让供应商的前缀问题变得不那么痛苦：|1754882|http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/|offset|length|1754883|1754884|，你对训练很了解。想要用CSS3给你网站的某些部分加上圆角吗？然后，您只需要三个供应商前缀:+webkit、moz和W3C推荐的表单。这不是在浪费时间吗--更不用说屏幕空间了？相反，如果我们可以使用类文件呢？嗯，我们可以的！今天我会告诉你怎么做。|blockquote|1754885|1754886|1754887|。。下面是本教程中较少的类：http://snipplr.com/view/47181/less-classes/|1754888|entityMap|0|LINK|mutability|MUTABLE|url|1|http://snipplr.com/view/47181/less-classes/^0|0|0|0|2P|0|0|0|0|0|0|E|17|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|15|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|P|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|E]]|W|$5|S|T|U|A|$V|X]]]]

<a href="http://lesscss.org/" rel="nofollow"><code>LESS</code></a> is a CSS language that compiles to normal CSS and gives you the ability to abstract away a lot of the tedious elements of writing stylesheets such as typing multiple vendor prefixes every time.

Here's a decent tutorial on making the vendor prefix problem less painful:

<a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/</a>

<blockquote>
 You know the drill quite well. Want to
 give some section of your website
 rounded corners with CSS3? Then you’ll
 require nothing short of three vendor
 prefixes: webkit, moz, and the W3C
 recommended form. Isn’t that a huge
 waste of time — not to mention screen
 space? What if, instead, we could use
 a class file? Well, we can! I’ll show
 you how today.
</blockquote>

.. and here are the LESS classes from the tutorial: <a href="http://snipplr.com/view/47181/less-classes/" rel="nofollow">http://snipplr.com/view/47181/less-classes/</a>

blocks|key|131640|text|实际上，带前缀的供应商CSS对这里的项目没有太大影响，因为这个问题在很大程度上是通过javascript闭包来保存动态前缀测试的缓存结果和几行javascript代码来消除的。这是在他们开始疯狂使用前缀之前很久就实现的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|131641|基本上，如今被现代化器等库使用的可靠的技术依赖于浏览器行为，这种行为在所有浏览器中都是奇怪的相当一致的，并且只有很小的变化就可以用于所有类型的特征检测。|131642|让我们以css属性'transform‘为例。如果你测试的结果是...|131643|somediv.style['transform']|code-block|syntax|javascript|131644|..。并且浏览器支持该名称，您将返回一个字符串，即使该字符串对于未设置的属性为空。另一方面，如果浏览器不能识别该名称，它将返回javascript+undefined.result。|131645|因为实际上供应商前缀的数量是相当有限的，例如...|131646|(Khtml+Ms+O+Moz+Webkit+Web-Kit)|131647|...it不需要花费太多时间来测试它们，如果缓存测试结果，速度会快得惊人。有了这里的库，我们实际上可以使用普通的基于标准的名称进行创作，除了那些奇怪的名称，其中属性值的布局不同，比如在一些渐变中。|131648|有了这种缓存，它的速度非常快，甚至在到达DOMContentLoaded事件之前就转换了CSS文件和样式元素中的所有CSS，因此甚至不会出现任何屏幕闪烁或必须等待加载事件的脚本中出现的其他奇怪情况。|131649|虽然测试和缓存发生在加载过程中，这些属性名称的所有各种CamelCase连字符格式也会得到处理，因此即使在以后编码时，或者当属性像CSS3D一样以编程方式处理时，或者有时甚至加载更多的CSS时，所有的计算都已经完成。|131650|还可以做一些其他的事情，比如在某种程度上增强浏览器的CSS支持，还有一件我一直在做的事情，那就是允许jQuery-ui+.css文件真正完全验证，同时能够在不丢失任何外观的情况下丢弃大多数图像。|131651|顺便说一句，除了这项技术简单得离谱，而且速度快得惊人之外，这项工作本身就发生在document.readyState的第二阶段，甚至在页面完全加载或甚至到document.readyState+4“完成”之前很久。|131652|CSS可能不是很多程序员的朋友，但我们喜欢CSS，甚至已经得到了CSS，所以CSS是加载和配置jQuery等人的第三方插件的工具，消除了对大多数脚本的需要，甚至在许多情况下消除了所有这些脚本。|131653|有时，愚蠢的剪切量让人们认为，能够拥有经过验证的内容和干净的源代码的想法已经走上了清洁空气的道路，但并不是真的，因为它比采用CSS边界三角形技巧并将其更新为具有纹理的埃及金字塔要困难得多。)|131654|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|1C|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1H|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1I|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

Actually, vendor prefixed CSS simply does not affect the projects here that much 
as the problem was for the most part eliminated with a javascript closure to hold the cached results of on-the-fly prefix testing and but a few lines of javascript. This was implemented long before they started going nuts with prefixes.

Basically the tried and true technique which is today used by libraries such as modernizer and such relies on a browser behavior that is oddly pretty consistent across all browser, and with minor variations can be used for all sorts of feature detection.

lets take for example the css property 'transform'. If you test the result of...

<pre><code>somediv.style['transform']
</code></pre>

... and the browser supports that name , you'll get back a string , even if it's empty for the property not being set. If on the other hand the browser does not recognize that name it will return the javascript undefined.result instead.

Since there really is a fairly finite number of vendor prefixes such as....

<pre><code>(Khtml Ms O Moz Webkit Web-Kit)
</code></pre>

...it does not take much to test them, and if you cache the result of the test it can be blazingly fast. with the libraries here , we are actually able to author using the plain old standards based names and not worry about it save for those odd ones where the property value is laid out differently such as in some gradients.

With that caching though it's so fast that it translates all the CSS in the CSS files and STYLE elements even before the DOMContentLoaded event is reached so there is not even any screen flashing or other oddities one might see in scripts that have to wait for load events

While the testing and caching is occurring during load , all the various CamelCase Hyphen-Case formatting of those property names is taken care of as well, so that even later while coding or when the attributes are being handed programmatically like for CSS 3D, or on occasion even more CSS is loaded , all the figuring has already been done.

There are also some other neat things that can be done too , such as augmenting a browser's CSS support to some extent , as well as one thing I've been tinkering with that will actually 
allow jQuery-ui .css files to actually fully validate and at he same time be able to ditch most of their images without loosing one lick of the appearance.

BTW , besides the technique being ridiculously easy , and blazingly fast , the work itself happens at the second stage of document.readyState , long before the page is even fully loaded or even to document.readyState 4 "complete".

CSS may not be the friend of a lot of programmers , but we love it , and have even got it so that CSS is what loads and configures those third party plugins from folks like jQuery , eliminating the need for most of them little initialization bits of scripting and in many cases eliminating all of it.

Sometimes the shear volume of silliness out there has folks thinking the idea of being able to have validated content and clean source has went the way of clean air, but not really as it's nut much harder than taking a CSS border triangle trick and updating it to have textures to make egyption pyramids :)

For all CSS3 properties I have to use different vendor prefixed versions to support different Render Engines. Here is an example:

<pre><code>-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);
</code></pre>

For a border-radius I have to use 3 different properties and for a background gradient I have to use background property in 5 different way. It increase the size of CSS.

Is there a way to use only one property and make Firefox 1-5 understand it?

How to use both -moz- and -webkit- css property to support different browsers?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对于所有的CSS3属性，我必须使用不同的供应商前缀版本来支持不同的渲染引擎。下面是一个示例：-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#dee0e1;background:-webkit-gradient(...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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