CSS3 easier properties writing

CSS3 easier properties writing

CSS3’s new features are really nice. But unfortunately, all the browsers don’t support everything (in fact, no browser support it entirely), but they provide vendor-dependent properties that allow to use it. So to use them, you need to duplicate your code, with all the problems that it can bring. I present you here a solution to write less CSS for the same result, without having to take care of vendor-specific options.

Vendor-specific properties are a pain in the ass !

Let’s say that you want to use a new property in CSS3. For this example, we will use border-image. According to W3Schools, you simply cannot use it in IE (duh !). In Firefox, Chrome and Opera, you have to use vendor specific rules to make this property work. So you need to write :

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

(example taken from http://www.w3schools.com/css3/css3_borders.asp)

Okay, this works. But you wrote four lines to get only one effect. And if you want to change this property, you will have change it four times instead of only once. Your code become harder to read and longer, for so few. And I don’t even talk about misspelling or different behavior because the -webkit property is different from the -moz property, but you didn’t notice it !

Well, you got my point, this is pain in the ass.

Couldn’t we get rid of it ?

In fact, yes, you can. The good news about those vendor-specific properties is that they have the same syntax as CSS3, with just a prefix that is different for each browser (-moz-, -o-, -webkit-, -ms-…). All you need to do is to duplicate the rule for each vendor-specific prefix, just like in the code above. And a simple parser should be able to do that for you.

I already wrote it, so you don’t even have to create your own (aren’t I kind ? :-)). It is working nicely (in fact, this blog uses it right now), so you shouldn’t have problem with it. That said, if  you find an error, some properties that are missing or shouldn’t be converted, let me know !

Also, I’m working on a system that takes a CSS file, convert it and saves it in a cache, so that you can use it directly in your website without going through this page. If you change your CSS, the system detects it and recompile the converted version for you. I will probably publish the system before Christmas, so stay tuned !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>