How to add CSS3 properties to CSSEdit

For better or for worse CSSEdit was discontinued when MacRabbit released Espresso 2. I’m sure I wasn’t the only one eagerly awaiting CSSEdit version 3 with CSS3 capabilities but unfortunately it never came — or rather it came incorporated in to Espresso and was discontinued as a stand-alone app.

Cssedit IconWell, I tried Espresso but it doesn’t really suit my workflow and so I continue to use CSSEdit 2.6.1. However, there is a way CSSEdit can be hacked to get some CSS3 goodness in there…

If like me you are using CSSEdit on a daily basis you’ve probably long since abandoned the Visual Editor (GUI) panel for most things and work solely in the Source Editor panel. Typing with auto-completion is what makes CSSEdit so fast and easy to use and it’s exactly here that we can add our CSS3 properties and values.

CSSEdit - show package contentsFirst of all open your apps folder, locate CSSEdit and control-click on the icon. Then select ‘Show Package Contents’ from the contextual menu and open the ‘Contents’ folder. Inside the ‘Contents’ folder, locate and open the ‘Resources’ folder and then locate the file ‘AutoCompletion.plist’. Rename it (or move it somewhere else), then download the following replacement .plist file:

CSS3 properties for CSSEdit: https://gist.github.com/2272849

Put the new AutoCompletion.plist file in to the ‘Resources’ folder and re-start CSSEdit. Now when you type you should find that you have all CSS3 properties and values available. I’ve also included various vendor specific properties and a few useful extras.

CSSEdit with auto-completion for all CSS3 properties and valuesNote: Many of the properties in the full CSS3 spec are not currently implemented in any browser. If you want to exclude anything, simply locate it in the .plist file and comment it out using standard html comments eg:


<!--<key>hanging-punctuation</key>
	<array>
		<string>none</string>
		<string>first</string>
		<string>last</string>
		<string>force-end</string>
		<string>allow-end</string>
		<string>inherit</string>
	</array>-->

If you are a CSSEdit user I hope you find it useful – I find it has really speeded things up for me!

Oops! Just amended a small typo – the extras section includes the ‘behavior’ property which I accidentally spelt the British English way 😉 12/04/2012