A Short Review of Espresso 2, a replacement for CSSEdit 2

I have been using CSSEdit 2 for a while – it is my go to program for writing CSS. In fact, it has so completely changed how I make websites that I don’t start with Photoshop anymore – I write the HTML and then start playing directly with the CSS using CSSEdit.

CSSEdit 2, though, has been feeling a little old and tired lately.  Though the backbone of the rendering engine in CSSEdit is recent enough (webkit code) that it displays CSS3, the visual editors don’t support CSS3. Visual editors for some CSS3 features (like gradients) would be super helpful. So, I decided to take a look at Espresso 2, MacRabbit’s new offering, which they claim has “CSSEdit 3″ built right in.

For reference, here are some pictures of the CSSEdit 2 and Espresso. Notice I don’t have both the code inspector and the color picker open in Espresso – because you literally con’t have both open at the same time!

CSSEdit 2:

Espresso:

If you are used to CSSEdit 2, there will be a few frustrations:

Now you HAVE to override the CSS file if you want to edit it in a separate window (unless I am missing something?). This kind of negates the “wow, I can see my changes as I type!” functionality that made CSSEdit such a revolution for me. This is easily solved by pasting the CSS into your main file when you are done, but slightly annoying.

Some of the buttons have moved around, which slows down the workflow at first.

The inspector disappears when you click in to edit the CSS. It appears that now you are supposed to double click the element to get the inspector?

Some things are maddeningly missing:

There’s a new, low powered color picker rather than the default OSX one, and you can’t switch back to the OSX color picker! This is a deal breaker for me, since most of what I use CSSEdit for is playing with colors and I have a bunch of plug ins that make that easier in the OSX color picker. There’s not even a color wheel in the espresso color picker. And, it always appears in the same part of the screen, you can’t reposition it somewhere more convenient. All in all, a big lose.

Old color picker (4 of the screens, anyway):

new color picker:

They took out the handy code cleanup feature. Why?

Some basic CSS3 things just are not there in the visual editor – like rounded corners.

Some things, however, are great

The CSS3 features that are not missing are elegantly implemented. Creating a multi step gradient is easy peasy, except for the horrible color picker getting in the way.

The layout changes to the visual editor make a lot of sense, and there’s a lot less clicking between palettes. Most of the stuff I need the visual editor for happen to be in the same tab.

Final thoughts

I have not evaluated Espresso for coding much. I currently use oXygen, because most of my code is XML/XSL and oXygen handles formatting far better than anything else I have tried.

CSSEdit 2 was one of those perfect mac apps that did one thing and did it well. I’m happy I purchased a copy before they stopped selling it. At $80, Espresso would be totally worth buying for just the CSS editing capabilities – IF they can fix a few minor annoyances, like the color picker. For people that code in more popular frameworks/languages, Espresso might be just fine as an editor, but in my experience, the text editor itch has already been scratched by most OSX coders.

I’ll be sticking with CSSEdit 2 for now, but keeping an eye on developments, and I will buy Espresso if they decide to fix the color picker/missing CSS3 attributes/ disappearing inspector issues. I continue to be disappointed that I can’t just buy a copy of CSSEdit 3.