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
Newer Comments →
  • http://www.jeffrey-way.com Jeffrey Way
    Author

    Hey guys –

    Just a couple quick notes on bugs that I’m fixing today:

    1) Commented CSS3 properties are prefixized as well. Needs to be fixed.

    2) Prefixr gets pissy at @import statements. (Should be a quick fix.)

    • bill

      Do people still use @import?

      • http://www.ecustom.ca/ Lucas C

        Yes, actually. I use it in WordPress themes. I create the base style.css, an then use multiple @import statements to bring those files in from a css directory.

        It allows things to be much more neat and organized, in my opinion.

      • Ignaty Nikulin

        @import is quite useful if you want include CSS files that will be removed or renamed in future, easily and separately add CSS reset, when you need to add CSS file to not make it messy with previous designer code or simply don’t have access to Header to add them there (for example sometimes when you work with .net).

        So, yes, people still use them.

        :)

      • http://edwinhollen.com edwinhollen

        Of course!

        I use @import to link the CSS reset. It’s a lot better than having that brick of text at the top of my editor.

      • Mark Dijkstra

        Yes a lot of people do use @import, i use it to split big css files(sort the stuff)

        Nice tool Jeff!

      • Travis Watson

        Correct me if I’m wrong, but I think bill was commenting on the fact that the best practice was to *not* use @import, and instead create additional ‘s, or use a build script. The @import method creates an unnecessary delay.

        If all stylesheets are in tags, the browser may initiate all requests as soon as the is processed and there is no delay.

        Using the @import method, only the first stylesheet can be loaded while the head is processed, and all subsequent stylesheets must be loaded after the initial stylesheet request has been loaded, because the @import command won’t even be visible to the browser until the request is complete and the file parsed (at lease up to the line with the @import command).

        In my Super Duper Scientific™ quick test, you can see that with two simple stylesheets, the CSS load time effectively doubles for the exact same end effect:
        http://travis.watson.ws/css-latency/at-import/

        Note that this is on HostGator Reseller hosting (aka shared) so the actual load times are going to be all over, but you can at least see the concept.

      • Travis Watson

        …and I forgot to escape my entities, I’m so pro. In that first sentence, there’s a lone apostrophe-s, that’s supposed to be: “<link>’s”

    • ralph

      your book realy don’t make sense !

  • Jacob Dubail

    Awesome! I’ve been watching the videos that you post on the twit-machine and am very excited to give it a whirl!

  • http://www.firedartstudios.com/ FireDart

    Looks great Jeff!

  • http://www.a2area.it lxn

    Prove it for sure! Thanks for sharing!

  • Paulo Griiettner

    Hello Jeffrey…

    Definatelly another great tool you bring to us… luved

  • Mehdi Raza

    Awesome tool…
    I hope it graduates to beta version soon.

  • http://www.jeffadams.co.uk Jeff Adams

    YOU ARE A MACHINE!!!

    Another great freebie thanks for this – this is precisely waht makes Envato great because you guys could have easily made this and sold it over at CodeCanyon but you chose to give it away for free.

    Thanks a bunch!!!

  • http://www.twitter.com/thoughtpalette Chris

    Excellent tool!

    Def bookmarked and sent around the office!

    Thank you so much!

  • Jonathan

    body{
    text-transform:uppercase;
    }

    gets converted to

    body{
    -webkit-transform: uppercase;
    -moz-transform: uppercase;
    -o-transform: uppercase;
    -ms-transform: uppercase;
    transform: uppercase;
    }

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

      Thanks for spotting that. All fixed and updated now. :)

  • http://www.футболмастер.рф/ alex

    Hey nice. I have a question.

    I don’t have a Mac. So i don’t have a TextMate :(

    How i cant integrate this feature (to prefixize) my code in Dreamweaver CS4 or CS5?

    Is this possible?

    • NakkiNyan

      I don’t think CS4/CS5 would really need to allow command line scripting first. Also it does not hurt to have the original with the settings for 1 browser and then copy/paste on the web interface and click compress and upload that version while retaining the original on your OS (easier to edit).

      • NakkiNyan

        I meant : “I think CS4/CS5 would really need to allow command line scripting first.”… don’t ask, I reworded something and butchered it.

    • http://www.twitter.com/get_dave David Smith

      Hi Alex,

      You asked about getting this to work in a Windows based editor?

      I use E Text Editor and I can confirm that this works perfectly. E is basically a Text Mate clone for Windows. I highly recommend it.

      Good luck!

  • http://twitter.com/neosheet Ananda Rizki

    Great stuff for time safer! this is what i’m looking for. Thanks, i’m look forward for next version

  • webster

    thanks Jeffrey :)

  • Fily

    Nice app!

    Would it be possible to add comments?

    Something like….

    -moz-border-radius: 10px; /* FF1-3.6 */
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
    border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

    Thanks a lot for sharing.

  • http://geetpurwar.com/ Geet Purwar

    Awesome Jeffrey.
    That save lots of time. Bookmarked with pleasure.
    Thanks.

  • Matt

    Jeffrey, THANK YOU!!! :) Any plans for a coda plugin?

  • DeeFi

    I’m working with sublime text editor. I’m somewhat new to all this stuff. Is it possible to run curl under sublime? If yes – how to?

  • http://chrisblackwell.me Chris Blackwell

    I agree, well done. As Matt said, do you know anyway to get this to work with Coda?

    • Tim

      I created a Coda plugin for this, and sent it over to Jeffrey.. I’m assuming he’s going to post it but feel free to email and I’ll send it over..

      • http://www.echoedlight.com Mitchell

        hey this may be stupid but how do i email you?
        can you put it up on dropbox or something would be really handy.

      • John

        I would be interested in a Coda plugin as well.

        Thank you and thanks Jeffery!!!

      • http://all-for-design.com/portfolio Aurélien Foutoyet

        Hey Tim,
        I would be interested to test the Coda plugin too is it’s possible :)
        Thanks !

      • Matt

        Thanks Tim, your plugin in much anticipated!

      • http://camdesigns.net camdesigns

        I would love a copy of the coda plugin as well (not much of a textmate dev)

  • http://mokshasolutions.com Moksha

    really amazing thanks a lot for making it so simple

  • nacim

    NO COMMENT !!
    i love this tool ! thx

  • egiova

    Or you are a genius, or you are like me: tired to make rounds like a cat after its tail asking you wtf is happening. And after two hours, two bucks of coffee, and after playing with the tomahawk, discovering that in lines 3675, 4211, 5734 of your css you had typed wbkt, or webkt, or maz.

    Thanks for your huge contribution to designer’s mental health! You’ll be blessed for that, for sure.

  • http://venture-ware.com/kevin Kevin Jensen

    Holy, sh** balls, Jeffrey. This is awesome. Well done.

  • arnold

    For PC users whats for us? … some notepad++ or dreamweaver plugin will be great..

  • http://net.tutsplus.com Jeffrey Way
    Author

    Hey guys – I don’t know how to implement shell scripts on Coda, Dreamweaver, or Notepad++. I’m sure there’s a way. If you use that editor and know how to do it, please leave a comment, and I’ll update the docs!

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

    This is really sweet.

    If anyone knows how to integrate this into Aptana 3 that would be very very sweet.

    Thanks Jeffrey for another kick ass freebie.

  • http://3circlestudio.com/ Justin Carroll

    Smart!

  • Matt

    This is fantastic, Jeffrey! One question, though. Is there a way to do something like:

    border-top-right-radius: 6px;

    and convert it into:

    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;

    …since right now only the border-radius property will convert. Cheers!

  • Davin Studer

    Is “css=” the only option in the api? Are there options for the exclusion and formatting features in the api as well?

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

      Right now – yes. Fixing that over the next few days.

  • Sacha Schmid

    Just a quick question. Which browsers need -ms and -khtml prefixes?

    • webster

      -ms- is for microsoft Internet explorer and
      -khtml- for Konqueror

      • Caio

        KHTML is also used on earlier versions of Safari < 2.

  • Alexander Smirnoff

    It’s amazing!!! It’s great!

    Is anybody know how to integrate this feature into NetBeans ?

    Thanks a lot.

  • Jason Leung

    hey Jeffrey
    how about opacity?

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

      Oh you’re right. I forgot about that one. Just made a note to include it tomorrow. :)

    • Jason Leung

      For notepad++
      I think you can use NppExec and wget module
      It is weird that telnet is not support in console

  • Joseph

    Here is a textmate command that works better for me:
    curl -sd “css=`cat`” “http://prefixr.com/api/index.php”

    Set the input to entire document and output to replace entire document for prefixr-ing the entire css file without selected all. Or set the input to selected text and output to replace selected text for prefixr-ing just the selected text. I made both commands. Also you should probably set the scope to source.css

  • http://mrsimcox.com Dean

    ahh-mazing!!

    This will save hours of coding; Thank You very much!

  • wburningham

    Any ideas on how to integrate this with MacVim?

    • Jason

      So I’m definitely far from experienced with VIM but I haven’t seen anything regarding a VIM command to access the API, and I’ve been playing around trying to get it to work. Hopefully someone more skilled can help sort out the mess I’ve made. So far all I can do is run a command from inside VIM to return the result of a string of CSS written in the command: (only been playing with this on my Windows machine, but I don’t think anything would be different on Linux or Mac except the calling curl part)
      :r !path\to\curl.exe -sS http://prefixr.com/api/index.php –request POST –data css=”border-radius:5px;”
      Will write:
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      -o-border-radius:5px;
      -ms-border-radius:5px;
      -khtml-border-radius:5px;
      border-radius:5px
      into the buffer at your cursor.

      Problems I’m having:
      - Using text from the file as the POST data, I’ve been looking around and found that % should be a reference to the entire contents of the file. When I try something like :r % this behaves as expected, and writes the entire contents of the file at the cursor. However when I use % in place of explicit border-radius declaration in the command, the filename is used instead of the contents of the file. I’ve probably been searching with the wrong keywords – if anyone can shed some light for me on how to pass a variable into an arbitrary position in the command that would be awesome
      - This one’s probably much easier, and probably gives me a big bright badge that says “VIM NEWBIE” – but replacing text in the buffer with the returned data from the API, right now I’m just using :r which will just insert the result at the cursor, leaving behind the content that was already there.

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

        I haven’t used it yet, but try the Vim plugin here: http://prefixr.com/api/usage/

      • Jason

        Just what I was looking for! A huge thanks to you Jeffery for putting the tool together and pointing out the plugin, been talking it up at the office since I first saw it. Also thanks to Mark Szymanski for putting the Vim plugin together!

  • http://salmanfolio.com salmanlp

    check http://prefixr.com on ie 8 css3 is not working.
    any reason?

  • http://sidesix.org Dan Avery

    You seriously rock, Jeffery! Thanks a ton.

  • Tim

    For those of you that use Coda, I created a plugin to to access the Prefixr api via shortcut.. I’ve sent it to Jeffrey to include in the Prefixr documentation but until it he posts it publicly I’ve uploaded it to my S3 account and made it available for download.. you can access it here: https://s3.amazonaws.com/rawcreative/misc/Prefixr.codaplugin

    Usage is simple, make a selection and hit Control+Option+P and it will send the info to Prefixr and replace the selection with Prefixr’s results. If Jeffrey adds any additional functionality to the API I’ll update the plugin and redistribute it.. you can also email me at tim at rawcreativestudios dot com with questions/issues

    • http://all-for-design.com/portfolio Aurélien Foutoyet

      Thanks a lot for making and sharing the Coda plugin that’s sweet.

  • http://etuts.org Sudheer Ranga

    That’s really amazing. I can save a lot of time spending to write lines of code for these.

  • http://www.harlointeractive.com Ryan

    This is really sweet! I will have to start using it!

  • http://rigelglen.tumblr.com Rigel Glen

    Is there a way to use the API in Vim

  • Brandon

    I know this may be more difficult and possibly not even desired in this tool but older versions of IE dont understand rgba, it would be sweet if the code had a background-color of say rgba(255,255,255,.5) that it would output #FFFFFF as a background color also for browsers that ignored rgba.

  • http://www.symetronapps.com luka

    What a good idea! Thanks Jeffrey

  • http://www.danielg.dk Daniel G

    Really neat tool Jeffrey!

    Is it possible you can optimize it for SASS/SCSS code?

  • http://www.givegraphics.com Give Graphics

    nice post! it is great pleasure to visit your site. thanks!!

  • http://designfromwithin.com/ DESIGNfromWITHIN

    Would love to know how to include this in Notepad++ Can anybody explain me how to do this?

  • http://tbnv.me Thibaut

    Awesome.

    We now just need an AppleScript or Automator service o be able to use in any app. :)

  • Wayne Saunders

    This is a great time saver!!

    Any way that you would be able to add the includes for PIE?

  • Miroslav

    “text-shadow” don’t work

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

      That doesn’t need browser prefixes.

  • http://8gramgorilla.com/ 8 Gram Gorilla

    Looks really nice. Currently we use Compass with Sass but need to check this out for non-Sass sites.

  • http://www.sitebase.be Sitebase

    Very cool project Jeffrey!

  • Jordan

    Added this into KomodoEdit. Works awesome. Thanks.

Newer Comments →