有没有办法让跨浏览器的CSS3代码干掉？

Question

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

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+ */

for example? Is there a tool to help me write CSS3 code more easy?

Answer 1

There are many tools for this:

• http://lesscss.org/
• http://leafo.net/lessphp/
• http://sass-lang.com/
• http://compass-style.org/

These are generally referred to as CSS Preprocessors.

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 */
}

Then to apply:

.my-class {
    .linear-gradient(#54a0ce, #3584ba);
}
.my-other-class {
    .linear-gradient(#ccc, #aaa);
}

Highly recommend.

Answer 2

You could always use an online tool to generate them for you:

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

http://www.css3maker.com/css-gradient.html

Answer 3

Is there a better solution, for example a jquery plugin, that will make my code cross browser compatible

For a client-side solution, you could use http://lea.verou.me/prefixfree/

A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser's prefix to any CSS code, only when it's needed.

You would then only need to use the unprefixed function, which is mysteriously missing from your CSS:

background-image: linear-gradient(top, #54a0ce, #3584ba);

Answer 4

I found the answer to the question. It is a program called "autoprefixer", it's free, and it uses Grunt (as well as a couple other things). You give it the file or directory with unedited css, and automatically adds the prefixes based on the specific browsers you want to target, and outputs them in a new file. Here's an article about how to use it.

Post about Autoprefixer by the author: http://css-tricks.com/autoprefixer/ How to use Grunt for the absolute beginner: http://24ways.org/2013/grunt-is-not-weird-and-hard/ Then you can look it up on Github to find the readme.

I was looking for the exact same thing, and this was the best solution I found that just processes regular CSS. I hope that helps.

Answer 5

https://autoprefixer.github.io/ Try this one out.This does not necessarily help you write easier code, it's not a javascript library. But it does add vendor prefixes and removes useless css code.

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba);
background-image: linear-gradient(top, #54a0ce, #3584ba);

Putting your code in, that is the result i get. (I removed the -webkit- from the original code to get that result).