有没有办法使跨浏览器的CSS3代码DRY? [英] Is there a way to make cross-browser CSS3 code DRY?
本文介绍了有没有办法使跨浏览器的CSS3代码DRY?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我想在CSS3中创建渐变背景时,我必须这样做:
When I want to create a gradient background in CSS3 I have to do this:
background-color: #3584ba;
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(top, #54a0ce, #3584ba); /* FF3.6 */
background-image: -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */
这真令人讨厌.是否有更好的解决方案,例如jQuery插件,如果我只使用以下代码,它将使我的代码跨浏览器兼容:
and this is really annoying. Is there a better solution, for example a jQuery plugin, that will make my code cross browser compatible, if I just use:
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */
例如? 是否有工具可以帮助我更轻松地编写CSS3代码?
for example? Is there a tool to help me write CSS3 code more easy?
推荐答案
有很多用于此目的的工具:
There are many tools for this:
- http://lesscss.org/
- http://leafo.net/lessphp/
- http://sass-lang.com/
- http://compass-style.org/
这些通常称为CSS预处理器.
These are generally referred to as CSS Preprocessors.
您最终将只能编写一次这样的内容,例如函数定义(通常称为"mixin"):
You would end up writing something like this once, like a function definition (usually called a "mixin"):
.linear-gradient(@start, @end) {
background-color: @end;
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(top, @start, @end); /* FF3.6 */
background-image: -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */
}
然后申请:
.my-class {
.linear-gradient(#54a0ce, #3584ba);
}
.my-other-class {
.linear-gradient(#ccc, #aaa);
}
强烈推荐.
这篇关于有没有办法使跨浏览器的CSS3代码DRY?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文