9 Comments

Summary:

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 […]

cssedit_thumb

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.

  1. 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?

    Share
  2. Nice, but I hope an official upgrade is coming soon too.

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

    Share
  4. I love Espresso (especially since it no longer crashed on copy & paste) and have been meaning to check out CSSEdit for a while, now.

    Share
    1. Unfortunately Espresso doesn’t do X-Ray and has no visual CSS-Editing…

      Share
    2. @Andy Fuchs Espresso is an HTML editor and not meant to be a replacement for CSSEdit. I don’t know if MacRabbit would be willing to cannibalize their own product.

      Besides, who needs visual CSS editing in Espresso when it’s just you and the code.

      Share
  5. [...] original por cualquier cosa. Descarga | Archivo AutoCompletion.plist (formato ZIP). Vía | theappleblog.Internet, Software0Código, CSS3, CSSEdit, Hacks, Web /**/ « anterior | VideoLAN Movie [...]

    Share
  6. Style Master has been around for over a decade, and we invented (and coined the name) X-Ray, as well as supporting many CSS3 right out of the box (visual editors in the toolbar).

    http://westciv.com/style_master/

    You can also play with all kinds of CSS3 properties online here

    http://westciv.com/tools

    And, you can use X-Ray (the one we invented, and named) online here

    http://westciv.com/xray

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

    Share
  8. AutoCompletion.plist file broken link….. :(

    Share
  9. @edr1084 Found this…wonder if it works? http://t.co/ADOK1sLw

    Share

Comments have been disabled for this post