Try Tuts+ Premium, Get Cash Back!
Cross-Browser CSS in Seconds with Prefixr

Cross-Browser CSS in Seconds with Prefixr

on Aug 3rd 2011 with 151 comments
Tutorial Details
  • Tool - Prefixr
  • Usage - Automatically update CSS3 properties.

A couple weeks ago, as I began to manually update my stylesheet with all of the various browser prefixes for the new CSS3 properties, I thought to myself, “This is such a waste of time. Surely, there’s an easier way.”

Video Overview

Tools like Compass, or even a TextMate bundle are tremendously helpful – I use them often, actually. But, for many projects, they aren’t available. As a result, we’re left in the position of having to copy and paste over, and over…and over.

Introducing Prefixr.com (Alpha)

Prefixr.com

I built Prefixr to do all this tedious work for me. Simply paste in your stylesheet, press Prefixize (or hit Control + Enter), and Prefixr will filter through the applicable CSS3 properties and dynamically update them.

Can’t remember if Opera provides a prefixed version of, say, the transition property (o-transition)? Don’t worry about it; that’s already coded into Prefixr!

With Prefixr, you only code your stylesheets using the official W3C-recommended markup. When ready for deployment, run the stylesheet through Prefixr, and be done with it!

Use the API

Even better than visiting Prefixr.com is using its API from directly within your favorite code editor. Many editors, like TextMate, offer the ability to execute shell scripts. To automatically update your stylesheet in TextMate, create a new command, and paste in:

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"
TextMate Screenshot

Now, select your stylesheet, and type the shortcut that you assigned. It will then be filtered through Prefixr, and dynamically updated. (See video above for more details.)

Squash Those Bugs

This is officially an Alpha release, which means that there are still some bugs to squash. All the kinks should be ironed out within this next week. If you find any yourself, there’s a Feedback button on the left-hand side of Prefixr.com that you can use to notify me.

I hope this tool will be of help to you! Be sure to bookmark it!

Tags: CSS
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • http://www.roundedworks.com Wayne McManus

    Simply brilliant. Thanks very much.

  • Dimitry

    Very often as a web-developer you need to provide also a support for IE6-8. And when you make website with CSS3 (and not only), this becomes the pain in a butt, I mean the IE filter syntax is quite difficult to remember. I even thought of making such an instrument myself with the support for the IE filters also where it’s possible. Yet since you made this nice instrument, I have no need to reinvent the bicycle once again.

    So here’s a user’s request: is it possible to add IE filters support here?

  • http://askmatthewpotter.com Matthew Potter

    Regarding the css gradients, would it be possible to add the IE filter lines too? Converting the values of the css (first and last values since there is no color-stop available) into the filter values and presenting that on a new line before the -ms-… line?

    Also, would you happen to be sharing the code behind this? I would like to have this installed locally on my own computer running PHP so I could try to develop a live version where it would be super quick and nearly automated.

  • Nick Kline

    Thanks a ton Jeffrey, you do a heck of job with this site.

    It looks like modernizr’s class detections cause an issue too…

    Example:

    .csstransitions #mainbanner {
    opacity: .9;
    }

    Returns:

    -webkit-transitions #mainBanner {
    opacity: .9;
    -moz-transitions #mainbanner {
    opacity:.9;
    -o-transitions #mainbanner {
    opacity: .9;
    -ms-transitions #mainbanner {
    opacity: .9;
    transitions #mainbanner {
    opacity: .9;
    }

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      All fixed. Thanks for spotting that, Nick!

  • kött-lasse

    Found a bug:

    background-image: linear-gradient(top, hsl(0, 80%, 70%), #BADA55);

    should become:

    -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55));

    Instead it turns out as:

    -webkit-gradient(linear, left top, left bottom, color-stop(80%, hsl(0,), color-stop(, 70%)), to(#BADA55));

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks! Looks like it’s having trouble parsing hsl() functions. I’ve added it to the todo list. Thanks!

  • Mike

    How would I run this script within Dreamweaver CS5?

  • Ronny

    Hi Jeffrey,

    thanks for that great work.

    I tried to convert border-bottom-left-radius an that is not working.

    Any Ideas???

    Ronny

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      That’s coming in the next day or so.

  • kankuro

    thanks a lot for this great tool you made… it’s a great help…. thanks a lot mr. way once a gain :D

  • http://www.ciwan.info Ciwan

    I’ve been following your updates on this via Twitter. It turned out very nice. a big thank you, and huge well done :)

  • http://www.learnwebdev.org Kamal Nasser

    I made a PHP wrapper for the API: http://codecanyon.net/item/prefixr-api/445888

  • http://www.jenst.se Jens Törnell

    I use a PC and Notepad++. Is it possible to use the API in my case?

  • http://www.h2ok.de Ole

    This is really nice! If someone could create an Aptana ruble with a shortcut for this, would be great!!
    Or is there even a way to include this in Aptana 3?

    Thanks in advance.

  • Brad

    Epic app Jeffery. Runs very fast on large files, Would be nice to have a select all copy and remove menu but other than that this is a huge time saver! Thanks

  • http://www.derby-webdesign.co.uk Kevin

    Looks very useful, thanks Jeff =)

  • Mohammed Barsi

    working for notepad++ addon

  • http://mustafanamoglu.com/ Mustafa Namoğlu

    Simply incredible.

  • AgileDev

    We made a little program that makes it possible to use prefixr.com on windows ( in your ide).
    Can contain bugs because Windows can be a pain in the *** sometimes.

    Download Here

  • http://www.vision-ps.de irfan

    thanks jeff for your tutorial

  • http://www.angelbotto.net AngelBotto

    I take the bold and create a mini-plugin for gedit (Linux) http://codr.cc/b08a92/sh

  • wildmercury

    Absolutely fantasmic! Good effort, shout if you want support.

  • http://goInventive.co.uk tomsky

    Jeffrey, thanks for this fantastic tool. Will definitely save a lot of time with project. Anyone know if there is a way to run the script within Eclipse?

  • http://www.webbinteractivedesign.com Matt Webb

    Anyone…Aptana 3 integration…Anyone know how or if possible?

  • Darren

    Jeff,

    Love the tool and it worked great on my simple stylesheet.

    I have to say that your editing skills have progressed immensely this past year.

    I love the way that you now only give us the value-added commentary with no fluff – All of the authors should follow your example – remarkable.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Darren!

    • http://www.kikouken.com adam16ster

      100% agree with darren. seems so obvious, cut out the fluff, but so few do it. fluffers, i guess, don’t know they’re fluffing or don’t realize how important it is.

      webkit-fluff: none !important
      moz-fluff: none !important
      o-fluff: none !important

  • Felix Hirschfeld

    Nice One. What about the filters for IE?

  • http://codendesign.blogspot.com nXqd

    really nice tool, I’m thinking about integrating sass to your app :)

  • mmelo

    hey! awesome! but is there any way of using this in MacVim?

  • http://www.kamalnasser.info Kamal Nasser

    Can you add more functionality to the API? Like the checkboxes in the main page?

  • Adam

    Awesome, thanks! just one minor thing

    Missed user-select property

    {
    -moz-user-select:
    -webkit-user-select:
    user-select:
    }

  • Alex

    Hi way,

  • Alex

    Hi way,

    Please include Internet Explorer compatibility.

    Nice start Mr. Way..

    Thanks!

    • arnold

      +1 , that one should be included too, since IE has a lots of audience out there …. -_- ,
      I think its like this

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 );

  • http://freakify.com Ahmad Awais

    This one is a really brilliant thing for basic level , web designers !
    Thumbs up

  • http://irunmanhq.com James Gambill

    This is extremely useful!! You just saved me 1 hour of work :).

  • http://www.pokergosh.com The PokerGosh

    Very useful.. Ill use it..
    Thankz..
    ;-)

  • Lehnhard

    The Idea is really great and u did again a very good job!
    In the text u say that there are many ways to use a curl call in diffrent editors. This is for me absolute new and i am much more interested by the functionality to send a marked text to a webservice, which replace this selection with the result, then by using this tool – after i used the solution with less u showed us in the past.

    So when i read the comments here i read ardor, bugreports and often how to use this under windows in aptana, notepad++ and so on. If possible please tell us how we can use the api in other editors (like coda, espresso, macvim, aptana….) and i am sure that we have a lot of webservices we use in our editors in future. Possibilities i see really enough.

    It’s really an awesome possibility to enhance our browsers and use this in webapplications with ajaxrequests etc.

  • msia

    WOW,,,,,,,,,, that’s terrific ;-)
    Thanks,

  • http://jarodonline.wordpress.com Jarod Online

    Jeffery Way is a genius!

  • http://jarodonline.wordpress.com Jarod Online

    big flaw here:
    you might want to check and compared your original code with the new code. Apparently, the Prefixr can take out some of your lines of code, which might explain why you have gaps of white spaces (you’ve been code-jacked).

  • http://varemenos.com/ Varemenos

    Any idea how i can use that “shell script” in Notepad++ (win7)?

    • Joao Lopes

      I’ve finished the plugin for Notepad++
      Take a look at https://github.com/DPr00f/PrefixrNpp

      • http://www.kikouken.com adam16ster

        Fail loaded

        This plugin is not compatible with current version of Notepad++
        ———————————————————————————-
        im running version 5.9.4
        xp sp3
        prefixr.dll is in plugins folder

        ???

  • Joao Lopes

    You can get the netbeans plugin here https://github.com/DPr00f/PrefixrNetbeansPlugin

  • http://www.2021.com.au/ David

    AWESOME!

  • http://www.h2ok.de Ole

    For everyone who uses Aptana Studio 3:

    Here is the Ruble (Bundle) to make Prefixr work. Put this Snippet in your User “bundle.rb” File:

    command ‘CSS Prefixr’ do |cmd|
    cmd.key_binding = ‘M1+M2+P’
    cmd.output = :replace_selection
    cmd.input = :selection
    cmd.invoke =<<-EOF
    curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php&quot;
    EOF
    end

    For more Information how to add User Bundles to Aptana, please go to the Wiki:
    http://wiki.appcelerator.org/display/tis/Creating+a+new+Ruble

    Hope it helps :-)

  • http://amitava.me Amitava

    wow this is amazing! thanks for the great tool and Joao for the Notepad++ plugin!

  • http://www.angrybirdsrio.biz Angry birds rio

    Great article, I fully agree and I think you are doing a goob job in convincing CSS3 is the way to go. We should not wait but use it now.
    Using HTML5, CSS3 and a few performance tuning tips and the improvement in speed is dramatic

  • Matic

    prefixr doesnt work anymore… please fix it…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Can you provide any details on what you mean? Visiting the site doesn’t work for you?

  • http://www.riak.uk.com Web Design Crawley

    wow that is awesome! would the api work in Komodo?

  • http://www.facebook.com/Loanshoppers Steven

    I was actually looking for automatic mobile css browser fixes but this is helpful as well. Thanks

  • http://www.iuditg.com Udit Goenka

    Wow !! This is one of the best stuff I have seen after Zen-Coding Plugin. I am sure this is gonna save tons of time. Jeffrey, you are a legend and savior :D

  • http://wearekiss.com Christian Engel

    It seems to not work with box layout properties:

    display: box;
    box-orient: vertical;
    box-align: stretch;
    box-flex: 1;

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It doesn’t seem to support display: box prefixes, but the other three work as expected.

      • http://wearekiss.com Christian Engel

        Well, you are right.
        Since the “display: box” statement wasn’t prefixed, all the other values collapsed as well.
        How long does it take to add the box value to prefixr? It sucks having to remember that not all CSS3 values are correctly prefixed.
        And makes debugging broken Stylesheets a nightmare :/

  • http://www.my-html-codes.com Matt

    This is a brilliant time saver, thanks Jeff.

  • http://www.edrtrust.com jon

    I am using Komodo IDE 7. Is there a way to integrate this into Komodo.

    Thanks Jeffrey!

← Older Comments
Newer Comments →