Post main imageIf you’re a web designer with a Mac, you probably use–or at least know of–CSSEdit. In it’s heyday, it was the way to edit CSS. It’s fallen a little out of repair; it doesn’t recognize new selectors and properties (which messes up color coding and completion). Plus, it doesn’t play well with nifty frameworks like LESS or SASS, if you’re in the habit of using those. My “watcher” script was my solution to the latter. There’s a cool trick, though, that allows you to force CSSEdit to use the bleeding-edge Webkit for rendering.

Quite a while back, developer Jan Van Boghout posted a tip for unlinking the default Webkit framework and using the one inside of the latest nightly build you have installed. It was a simple Terminal command that you had to launch from the command line, and the effect only lasted for that session. The command eventually stopped working, until Ian Beck noted that the location of the frameworks in Webkit.app had changed. It worked with that tweak, but it was still a pain sometimes, even with aliases.

The solution

I don’t know why it took me this long to think of it, but there’s an easy way to make the command into a wrapper within the CSSEdit application bundle. This isn’t for the faint of heart, and it will have to be done again if CSSEdit ever updates in the future, but it’s a good hack for the time being.

I’m going to write these instructions to exclusively use Terminal, although many steps can be accomplished through Finder (use Show Package Contents from the right click menu).

  • Go to the executable folder within the CSSEdit.app bundle:

    $ cd /Applications/CSSEdit.app/Contents/MacOS/

  • Rename the main executable:

    $ mv CSSEdit _CSSEdit

  • Create a new CSSEdit file (using whatever editor you like):

    $ vim CSSEdit

  • Put the following code into it:

    #!/bin/bash
env DYLD_FRAMEWORK_PATH=/Applications/WebKit.app/Contents/Frameworks/10.6/ WEBKIT_UNSET_DYLD_FRAMEWORK_PATH=YES /Applications/CSSEdit.app/Contents/MacOS/_CSSEdit

  • Save the file, close it, and make it executable:

    chmod a+x CSSEdit

Now, when you launch the app, it will run the shell command to unlink and relink the Webkit framework. Note that if you do this on Leopard, you’ll need to change the DYLD_FRAMEWORK_PATH to point to 10.5 instead of 10.6. Enjoy!