capsule review

CSSEdit 2.6

At a Glance
  • MacRabbit CSSEdit 2.6

    Macworld Rating

Cascading Style Sheets (CSS) is a widely used Web-design technology that lets you create styles that can be applied to one or more blocks, or ranges of text, on a Web page. Instead of applying formatting locally, repeating the details each time you want particular text or a layout to be formatted similarly, CSS lets you write once, use many times.

CSS was designed to bring standards to Web formatting. Until the use of CSS became widespread, the formatting code produced by many Web-design programs was based on a combination of table cells and browser hacks that didn’t produce the same appearance consistently across popular browsers, and the HTML that was produced was often unreadable and almost impossible to properly edit. With CSS, you could allow a design program to write code for you, yet it was still possible to figure out that code if you needed to make behind-the-scenes tweaks, especially for browser compatibility.

The theory behind CSS sounds terrific, but the best Web design programs are expensive, steep-learning-curve packages such as Dreamweaver, while most cheaper and simpler Web-authoring programs don’t give you control over CSS or previewing. If you’re trying to work in between—if you want exact control of appearance and styles, and especially when you’re working with sites that use templates to insert text from a database of content—MacRabbit’s CSSEdit is a nearly ideal middle ground. This deceptively simple program bridges the gap between hand-coding CSS within a program such as Bare Bones’s BBEdit ( ) and using a full-blown Web site development tool such as Adobe Dreamweaver CS3 ( ).

It’s just CSS

The Live Preview window is both a Web browser and a CSS detective. With X-Ray mode turned on, selecting any styled area of a page highlights the area while showing the chain of nested tags and containers surrounding the style, which in turn identifies which selectors would apply to the selection.
CSSEdit has no pretensions to be anything other than an editor for CSS, and that’s why it performs so well. If offers a style-sheet editor that shows (by default) a list of selectors, which define applicable selections in the HTML to which styles are applied; the underlying CSS code for the style; and a long scrolling set of collapsible panels of all the possible properties and values that may be set for a given style. You can have any number of editor windows open—as separate windows or as tabs in a single window.

A preview window complements the style-sheet editor by showing the effects of any changes made to styles. When previewing a locally stored file, CSSEdit automatically refreshes the preview whenever you save changes to that file; if you change the underlying HTML on a remote Web site, you can refresh the preview manually.

Workflow

CSSEdit has another advantage of a single-minded program, which is that its workflow doesn’t have to include lots of branches and options; it’s a pretty straightforward path. You start with creating a blank style sheet, opening an existing style sheet locally, or extracting a style sheet from a Web page—or any combination or quantity of the three.

Using the live preview of a Web site or a local file, you start defining or changing selectors referenced in the HTML. A wizard can help you create selectors without knowing the particular syntax, which can be involved. As you work on the CSS, the page starts to form and reform. I found the live preview particularly useful with the complexities of nesting div tags (which let you define rectangular blocks on screen); the preview saved me from the confusion normally encountered when I’ve coded CSS by hand.

The Live Preview window has two modes: X-Ray, in which you can click on various points on a page and have underlying selector information revealed and graphically highlighted; and Regular, which works just like a Web browser, for navigation.

Part of the power of CSS is that you can take a group of selectors and apply the same properties to them in a single style; say, setting the font family and background color. You can keep adding more styles that contain one or more of the same selectors to refine further and further. Because that means you can have multiple styles referencing the same selector, CSSEdit’s X-Ray mode provides a nifty Inspector that helps sort out which styles include a given selector. Select a unit and then click on the Inspector button at the top of the Live Preview window, and the Applied Styles inspector lists all the styles that reference any selector applied to that unit. You can then click on the style in the inspector and CSSEdit will reveal and select the part of the style sheet showing that style.

If you’re an inveterate hand coder, you can modify styles by typing code directly into the Source Editor pane. CSSEdit auto-completes as you type, showing the possible and most-likely properties, followed by values. (You can turn off this feature.)

To confirm that you didn’t mess up anything when mucking around by hand, you can use the Validate feature, which checks values against the CSS standards of the World Wide Web Consortium (W3C). This tool is also useful for helping to troubleshoot sites for other people: extract the CSS in CSSEdit, click on Validate, and then write up what they got wrong (and how to fix it)!

As you work in CSSEdit, you can save Milestones, which are interim steps as you work through a design, adding notes to help you remember what you changed in that iteration. You can revert to any Milestone by choosing it from the Milestones menu.

The Live Preview window is both a Web browser and a CSS detective. With X-Ray mode turned on, selecting any styled area of a page highlights the area while showing the chain of nested tags and containers surrounding the style, which in turn identifies which selectors would apply to the selection.
The CSSEdit main editing window shows by default a list of selectors, the source code for styles, and a set of collapsible palettes containing all CSS properties. The Applied Styles inspector helps you identify styles applied to a given area in a live preview, while the Milestones palette shows you interim, saved versions of your CSS work.
Finally, when everything is just perfect, you push your style sheet files up to the server where the Web site resides. Unfortunately, that’s where you hit one of two bottlenecks in CSSEdit’s otherwise-well-done approach.

Real-world applications

I found CSSEdit to be particularly impressive in two specific types of usage. First, I often find myself editing template files with placeholders for text that I use with content-management systems and blogging software. With the variety of editing systems out there, it’s often hard to preview the appearance of changes you make to a template without loading the template directly through the system that fills in the placeholders. Because CSSEdit offers a live preview of Web-accessible pages, it’s a great tool for working with template systems.

Second, CSSEdit can extract all the style sheets used by a particular Web page, opening them as separately named local files, which is useful when editing sites you’ve already built. For example, I’m in the middle of a very slow, frequently interrupted process of transitioning a large site, originally built using a little CSS and a lot of tables, into a template-based, CSS-driven system. CSSEdit has been my constant companion through this process, and extracting CSS files has made the workflow much simpler, as I’m sometimes working from different computers onto multiple servers. (MacRabbit even provides three bookmarklets that you can use within any browser to preview, extract and preview, or extract style sheets with a single selection from whatever page you’re viewing.)

Limitations

The developer chose not to build an FTP (File Transfer Protocol) client into CSSEdit. I can understand that, as the more complex a program is, the more you have to manage. And MacRabbit notes, correctly, in CSSEdit’s documentation that many popular OS X FTP programs can download via FTP and then monitor a particular file and automatically upload changed files each time they’re saved.

In practice, though, this process hasn’t worked consistently for me. But I also haven’t tried extensively to troubleshoot each failure, nor tried enough FTP programs, to be sure that the problems I’ve experienced aren’t due to limitations of my network or a failure in my understanding. Several colleagues have had no difficulty setting up this kind of mapping using popular FTP clients, such as Interarchy ( ).

The only other unconquerable limitation of CSSEdit is that because it separates form and function as neatly as CSS and HTML can separate appearance and formatting, you have to define all selections within the HTML code you’re working on. That is, you need to use the Div tag for blocks of text and graphics that can be positioned or have spacing before or after; Span tags for inline ranges of text; or HTML elements such as a Header or Paragraph tag. CSSEdit can’t reach into the HTML and let you twiddle which ranges or sections have been defined, or what they’re named. That might be a good thing in theory, but switching between BBEdit and CSSEdit can get a little tedious.

It would be interesting to see MacRabbit add a simulation mode that would allow arbitrary application or modification of selectors for defined blocks, and a simple FTP package (including Secure FTP support) that provided just the minimum features necessary to avoid having to use yet another program. Those two features would reduce the number of times I press Command-Tab by an order of magnitude.

Macworld’s buying advice

CSSEdit 2.6 fits a very particular niche, but one that’s become larger over time. The program provides assistance to those who need to control style sheets directly, without overstepping its role. CSSEdit is the best helper you could ever “hire” to work on your CSS with you, and it’s consequently also the best way to improve your CSS knowledge. Paradoxically, I’m much more familiar now with the underpinnings of CSS after having worked with a program that tries to hide its complexity.

[Glenn Fleishman most recently wrote Take Control of Sharing Files in Leopard (Take Control Books).]

To comment on this article and other Macworld content, visit our Facebook page or our Twitter feed.
At a Glance
  • Macworld Rating

    Pros

    • Built-in validation
    • Wizard for selector creation
    • Simple design
    • Interactive, live preview
    • Auto-complete for manual editing

    Cons

    • Must edit source HTML to change applicable styles
    • No integrated upload tool
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.