Get $500+ of the best After Effects files, video templates and music for only $20!
Cross-Browser CSS in Seconds with Prefixr

Cross-Browser CSS in Seconds with Prefixr

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!

Add Comment

Discussion 142 Comments

Comment Page 2 of 3 1 2 3
  1. Simply brilliant. Thanks very much.

  2. Dimitry says:

    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?

  3. 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.

  4. Nick Kline says:

    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;
    }

  5. kött-lasse says:

    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));

  6. Mike says:

    How would I run this script within Dreamweaver CS5?

  7. Ronny says:

    Hi Jeffrey,

    thanks for that great work.

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

    Any Ideas???

    Ronny

  8. kankuro says:

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

  9. Ciwan says:

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

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

  11. Ole says:

    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.

  12. Brad says:

    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

  13. Kevin says:

    Looks very useful, thanks Jeff =)

  14. Mohammed Barsi says:

    working for notepad++ addon

  15. AgileDev says:

    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

  16. irfan says:

    thanks jeff for your tutorial

  17. AngelBotto says:

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

  18. wildmercury says:

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

  19. tomsky says:

    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?

  20. Matt Webb says:

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

  21. Darren says:

    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.

  22. Felix Hirschfeld says:

    Nice One. What about the filters for IE?

  23. nXqd says:

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

  24. mmelo says:

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

  25. Kamal Nasser says:

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

  26. Adam says:

    Awesome, thanks! just one minor thing

    Missed user-select property

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

  27. Alex says:

    Hi way,

  28. Alex says:

    Hi way,

    Please include Internet Explorer compatibility.

    Nice start Mr. Way..

    Thanks!

    • arnold says:

      +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 );

  29. Ahmad Awais says:

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

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

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

  32. Lehnhard says:

    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.

  33. msia says:

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

  34. Jarod Online says:

    Jeffery Way is a genius!

  35. Jarod Online says:

    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).

  36. Varemenos says:

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

  37. Joao Lopes says:

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

  38. Ole says:

    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 :-)

  39. Amitava says:

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

  40. 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

  41. Matic says:

    prefixr doesnt work anymore… please fix it…

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

  43. Steven says:

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

  44. Udit Goenka says:

    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

  45. It seems to not work with box layout properties:

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

    • Jeffrey Way says:
      Author

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

      • 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 :/

  46. Matt says:

    This is a brilliant time saver, thanks Jeff.

  47. jon says:

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

    Thanks Jeffrey!

Comment Page 2 of 3 1 2 3

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.