Blog Post

Enable CSS3 Support for CSSEdit

Stay on Top of Emerging Technology Trends

Get updates impacting your industry from our GigaOm Research Community
Join the Community!

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.

9 Responses to “Enable CSS3 Support for CSSEdit”

  1. Hmmm… I would have thought that the term X-Ray was invented by the medical community about 100 years ago, but ok, if you say so.

    Also, Stylemaster is quite good in the fact that it has support for CSS3 and tells you which browsers will support your CSS. But it’s an ugly app (compared to CSSEdit) and you can see its Windows legacy. I find the multiple Editors clunky, you have to invoke each one at a time in order to make changes with the inspector. Honestly, I find the whole app design quite clunky and cumbersome, that’s just my opinion.

    One of the things I love about MacRabbit products is their excellent design, ease of use and small footprint. That’s why I went with Espresso over Coda. However, I am beginning to get worried about the lack of updates. Espresso’s latest version came out months ago and despite many bug reports we have yet to hear anything about an update. MacRabbit, please don’t leave your faithful users hanging.

  2. @Bryan – I’m glad you found my little hack useful! Thanks for spreading the word. As you stated I left some CSS3 properties out. If you send me your revised .plist file (andy {at} aloestudios {dot} com), I’d be happy to update the blog post and the zip file.

  3. Does anyone know of a good alternative? I’ve owned CSSEdit for over two years now—it’s ok, but I don’t find it as good as TopStyle. I’ve tried several css editors for OS X and dislike all of them, CSSEdit is the best, imo, of the bunch but I don’t really like it that much. Then throw in that it hasn’t been updated in what, years?