Enable CSS3 Support for CSSEdit

Chances are if you do any kind of front-end web development on a Mac you’ve heard about CSSEdit, a very popular tool for editing .css files in OS X. I use CSSEdit pretty much all day long at my day job and while I absolutely love it and have a hard time imagining doing my job without it, its lack of support for all the new CSS3 properties is becoming more and more problematic.

Unfortunately, the good folks at MacRabbit who make CSSEdit have had their hands full lately. They just shipped a new update to their all-in-one web development app Espresso and apparently haven’t been able to get around to updating CSSEdit with full support for CSS3 yet. Lucky for us though, @andyford is on the case and has come up with this great “hack” for customizing the AutoCompletion.plist file in CSSEdit to include CSS3 syntax.

The .plist file in question is essentially just a collection of arrays that define the possible values for a given property, like font-weight for instance. As you can see from the screen shot below, the font-weight property has several strings contained in it’s array, all of which will be presented as autocomplete options when defining an elements font-weight within a .css file.

This is great news, as now we can use a handy tool like PlistEdit Pro to go in and add our own custom properties and values. By adding in additional strings to an array or by creating entirely new arrays, we can change the autocomplete behavior of CSSEdit and make it more CSS3 friendly.

But wait, Andy is ahead of the curve and has already rolled up a custom AutoCompletion.plist file (ZIP) for us which includes all the hot new CSS3 properties like border-radius, transform, transition, and more, including some custom values of his own. To join the fun, just right click on the CSSEdit application to “show package contents” and throw the custom .plist file into the CSSEdit/Contents/Resources directory. It’s probably a good idea though to first back up the existing .plist file somewhere safe just in case.

I did notice a couple CSS3 properties missing from Andy’s file but now that we know it’s there it will be easy enough to add in any important missing properties or values we need. I look forward to the folks at MacRabbit getting around to making an official update to CSSEdit now that they have the new version of Espresso out the door. There’s a lot of excitement building around HTML5 and CSS3 at the moment and I’m really hoping that my favorite CSS application can keep pace.