CSSEdit Features

Live Preview is a great feature of CSSEdit.  It is incredibly easy to load documents or web pages, make changes to to the CSS and see the changes happen instantly.  In the “old” days of editing CSS, you had to make the changes to the code, update the code on the server, then refresh the page.  That took a ton of time, and often times 2-3 different applications to complete the process.   CSSEdit replaces 2-3 applications and saves you a ton of time with this feature alone.

You can even load the CSS of pages other than your own to see what they’re doing to make their sites look good so that you can steal learn from their ideas.  Conversely, you can see what makes some pages look so bad in order to make sure you don’t make the same mistakes.

One of the very confusing parts of editing and working with CSS, is trying to figure out which damn lines of code control what you’re trying to work with.  In the “pre-CSSEdit days” I’d spend hours guessing which lines of CSS to modify.  It was a very frustrating process, changing the code then refreshing the page to see if it did anything.  Sometimes I’d change styles, see nothing and forget to change them back.  Later on, I’d discover that the code I changed caused problems on other pages or documents.  The X-Ray Inspector contained in CSSEdit allows you to highlight any part of a document and see exactly what lines of CSS code are controlling it.  All it takes is activating the X-Ray Inspector and clicking the part of the document you want to analyze.  Super easy.

Whether you are a GUI (graphical user interface) type of user, or a raw code demon, CSSEdit has you covered.  I’m a combination of both.  When I’m being a code demon I’ll use  Source Editing mode to tweak my CSS.  When I’m not sure what code to use, or I’m in more of a GUI mood I’ll use Visual Editing instead.  CSSEdit allows you to view one or both modes, which is very nice.

Source Editing	Visual Editing

I’ve used CSSEdit for quite a while.  I date back to version 1.x.  That being said I’m still not completely proficient with all the features.  The Selector Builder is a feature I need to use more.  Selectors in CSS define the HTML element or tag which you are styling.  Selectors can get confusing because they can be grouped, they can have multiple iterations and some can even be nameless (global).

Bad or useless code eats up bandwidth and can cause problems.  That’s why CSSEdit’s Debugging feature is so useful.  I had a problem with a blog just yesterday.  Despite looking at the CSS about five times I never figured out what the problem was.  I hit the debug button and voila, question answered.  Problem solved.

The Milestones feature is a nice touch in CSSEdit.  With Milestones you can log breakthroughs or important events, and refer back to them later.

All about FLOW

As I mentioned earlier, editing CSS (and other web scripts) used to be a total pain.  You’d use one application to edit and another to preview.  CSSEdit combines those two applications into one.  Less switching between apps and quicker previewing means more productivity and more free time.

Suggestion Box

I’d like to see the following features in upcoming versions of CSSEdit.

Live browser interpretations.  I’d like to click a button or selector on a page I’m viewing/editing and be able to switch between browser renditions.   Anyone who has done any CSS at all knows that not all browsers are the same.  Get it looking good in Firefox and it may look totally different in Internet Explorer.  I’d like to be able to preview the page live as interpreted by specific browsers.  I know you can extract pages and “pretend to be” certain browsers when extracting CSS with CSSEdit, but unless I’m mistaken this isn’t quite what I’m saying.  Live previewing between browser renditions of a document you are working on would be great.

The next obvious step and my 2nd suggestion is flow related.  CSSEdit can edit and preview pages but can’t save to the server.  With an integrated FTP capability in CSSEdit, I could get my flow down to one application for the three steps of the process: edit, preview, save to server.

Conclusion

CSSEdit is now a crucial tool for me, and part of my daily web administration.  I’m so much more productive with CSS editing, designing, tweaking and debugging my pages now.  The application is well designed, bug free and fast.  CSSEdit is a must have tool for web geeks who use the Macintosh platform.

Update: In previewing this post, it dawned on me that the text in my blog was not justified.  I like a fully justified look.  In a matter of a few seconds I set the CSS to full justification.  I first loaded the page.  Then I turned on the X-Ray Inspector to find the code to edit.  Then I hit the full justify icon in the text tab of the visual editor.  Done!