Aloe Studios

As awesome as CSSEdit is, there’s always room for improvement. The auto completion feature for properties and values is brilliant, but one thing that bothered me was the absence of a few properties and values.  Luckily these properties and values are stored in a .plist file.  What’s the big whoop?  Well, you can edit that plist file to get (almost) exactly what you want from the auto completion dropdown. Warning: Make a backup of your plist before you go willy nilly mucking with it.  I cannot be held responsible if you mangle your plist!  Please read the notes at the end of the post regarding plist editing before you edit your plist.  Always make a backup!

So, where the hell is this file? It’s inside of the CSSEdit.app package.  This can be found in Applications – CSSEdit.app (right click and select “Show Package Contents”) – Contents – Resources – AutoCompletion.plist. (Edit – Nov. 16 2009: You can also download a zip file of my latest version of the .plist file.) (Remember: do not edit or replace your plist until you have made a backup of it!)

Make sure CSSEdit is not running and then right click on “AutoCompletion.plist” and select “Open With – Property List Editor.app”.  On Leopard (if my memory serves me correctly), you’ll have to have the Developer Tools/Xcode Tools installed from the Leopard DVD. Otherwise you can edit the plist as straight XML with a text editor like TextMate or TextEdit, but this tutorial uses the Property List Editor.

Once the Property List Editor is fired up, you should see something similar to the screen shot below:

Click on the arrow next to “Root” to expand it, and then do the same to expand one of the CSS properties.  In the example below, I’ve expanded the property “background”.  As you can see I’ve already added some custom values to the “background” property such as ‘url(../images/)’, ‘url()’, and ‘url(i/)’. These are all values I frequently use within a few different development environments.  You can add a new value to a property by having the property selected and then clicking the “New Child” button.  Once you’re inside of a property and adding values, the “New Child” button will change to “New Sibling” so you can add additional values within the same property. When you’re done, dont forget to Save.

The next example shows one of my motivating factors for editing the CSSEdit auto completion plist in the first place.  I like to use “text-indent: -9999px;” for Rundle/Phark image replacement, so I added “-9999px” as a possible value for the “text-indent” property.  Now all I have to type is “-” and hit “semicolon” (or “enter”) and I get “-9999px;” (or “-9999px”). Sweet.

Below is an example of some custom values that I added to the “background-image” property now showing up in the auto completion dropdown:

Properties and Values worth adding

If you’re like me and have the *pleasure* of doing a lot of IE6 debugging, then you might want to add “zoom” as one of your properties (“z-index” will still be the first auto complete option when you just type “z” so it’s pretty harmless).  Also “inline-block” (which FF3 now supports) as a value for the “display” property is handy for IE6 damage control.

Other values I’ve added:

• for “background” and “background-image”: ‘url(../images/)’, ‘url()’, ‘url(i/)’, ‘url(../img/)’ – (your preferences may vary)
• for “font-family”: ‘Arial’, ‘Helvetica’, ‘Georgia’ (see notes at end of post regarding (not) using spaces)
• for “font-size”: ‘62.5%’
• for “text-indent”: ‘-9999px’

You could really go nuts adding all of the CSS3 properties and values that CSSEdit lacks – not to mention browser specific properties and values for Safari/WebKit, Opera, and Firefox.  Since CSSEdit uses webkit for its on-the-fly preview, it seems a natual fit to at least add webkit properties (perhaps as an option) to the next update of CSSEdit.

Download the Modified .plist File

If you don’t want to spend all your time hacking the .plist file and just want to add more CSS3, Mozilla, and Webkit support to CSSEdit, you can download the modified auto completion .plist file here.

Disclaimers and Notices and Warnings – Oh My!

Always make a backup before editing your plist!

I’m no expert on plists, but it seems that things will go haywire if you use spaces.  I tried adding “transparent url(../images/) no-repeat 0 0″ as a possible value for the “background” property and things went wonky.  I did some digging and haven’t found The Dummy’s Guide to Editing Plist Files that I had hoped for, but I’m pretty certain that space characters are a plist no-no.  The same may or may not be true about quotes and/or double quotes but I’m not entirely sure.  Perhaps there is a delimiter that can be used to safely escape spaces and other special characters?  If anyone can shed some light on the do’s and dont’s of editing plist files, I’d be grateful!

end