Add CSS3 specific browser prefixes automatically

Currently, not all browsers support CSS3 full and with all its properties and surely you know every browser has its own CSS prefix (-moz for Firefox, -webkit for Chrome and Safari, -o for Opera, etc). This means that whenever your write down a new CSS3 property you surely need to add browser specifics tags to make them work. This is very time-consuming and hard to maintain when dealing with bigger stylesheets and also increases the CSS file (kb meaning).

Fortunately for us, developers out there are thinking about our needs and develop tools that surely make our lives easier. One of this tools is cssFX, a JavaScript file (lightweight having around 2.5kb) that automatically creates vendor specific CSS3 properties required for old (and new) browser directly on the client side. cssFX has support for most of the new CSS3 properties and works great with most browsers (including IE6).

Add CSS3 specific browser prefixes automatically

cssFX

View cssFX

Related Posts

Responsive CSS3 slider with no JavaScript

CSS3 transitions with jQuery

CSS3 pulse effect

nice CSS3 sign-in buttons

5 Comments

  1. Adrian

    05.25.2012

    Reply

    One big flaw when using scripts like this one is the case when the user doesn’t have Javascript(either installed or enabled). If that’s the case, what do you do? I prefer to have the prefixed versions of the properties for each browser vendor written in my stylesheet, and if file size is the problem, then all you have to do is to minify the code and voilà, we have prefixes without sacrificing site performance. I don’t know if I can post links to sites here, but my go to resource for this type of job is css3please.com, created by Paul Irish. Also, caniuse.com is a great resource in regards to browser support for HTML5/CSS3 .

    • Bogdan

      05.25.2012

      Reply

      You can add links if they are targeting great resources!

  2. Adrian

    05.26.2012

    Reply

    Well, in fact they are! I would like to hear your opinion on preprocessing, SASS vs. LESS, Markdown and JADE. Are you aware of these techniques? Virtually, SASS(which is my personal favorite) takes the load off your shoulders when it comes to elements that share the same style and it helps with prefixing. You can, for example, create a “variable” called “rounded” , add the rules for rounded corners with the corresponding vendor prefixes, and each time you want to use rounded corners on an element you just call that variable. Do a little research on these techniques, if you haven’t done so already, and you’ll see your workflow improving in no time. By the way, am putea vorbi si in romana, numai ca n-ar avea sens comentariile pentru vizitatorii tai.

  3. Bogdan

    05.26.2012

    Reply

    Sa pastram EN. I’ve been using both SASS and LESS in projects and I ended up with SASS. You are correct, you can easily use SASS/LESS instead of this, but you can do it only if your building your project from scratch in this manner. If you are already involved in a project then SASS or LESS will be hard to implement.

  4. Adrian

    05.26.2012

    Reply

    Not quite! Let’s say that you’re in the middle of a project, and you’re working your way up with the stylesheet. You can use standard CSS along with SASS!
    So you could have :

    /* example file : style.scss */

    /* normal CSS syntax/structure here - this remains the same after preprocessing*/
    #logo { styles_for: #logo; }
    #logo a { styles_for: #logo>a; }
    #logo a span { styles_for:#logo>a>span; }

    /* and here you can have SASS - these lines will be processed to standard CSS*/
    nav {
    styles_for: nav;
    ul {
    styles_for: nav>ul;
    li {
    styles_for:nav>ul>li;
    a {
    styles_for:nav>ul>li>a;
    }
    }
    }
    }

    and the preprocessor will only interpret the SASS lines, that need to be translated to CSS, leaving the rest of the styles intact.

Leave a Reply