The Style Master Blog

A couple of months back we released what we called a “technology preview” of Style Master 5 for the Mac. It wasn’t really an alpha, and not quite a beta, so we called it a tech preview.

Since then we have been polishing, refining, working out bugs, adding some features, and taking out others. And now, it is time to take the wraps off Style Master 5 beta 1 for Mac OS X.

Read on for what’s new, or grab a copy of the beta right now.

If you have bug reports, suggestions or any feedback, the best place is our new helpdesk. But feel free to leave comments here too.

Right now, you’ll need to be running Mac OS X 10.4.11 or higher, or 10.5 – this version is heavily reliant for some features on Safari 3 – and bugs in Safari 2 (available for older versions of the Mac OS) will cause problems.

Why Mac only? Well, a Windows version is on the way – I’ll post on this shortly in detail.

What’s new?

Here’s a quick overview of some of the new or dramatically overhauled features of Style Master 5.

The user interface

Almost every aspect of the user interface has been overhauled – virtually every window, editor, and toolbar. Some of the most noticeable should be

• Bringing the main style sheet window appearance up to date – no candy bars in sight.
• Incorporating a new iWork-like toolbar at the top of the style sheet window which provides all the most commonly used CSS properties (and more) right at your fingertips
• Property and Selector editors have been spruced up, streamlined, and made more user friendly, based in large part in response to user feedback
• Many menus have been simplified, streamlined and reorganized to make them even more efficient

XRAY and MRI

Our innovative XRAY feature has been totally overhauled. Instead of simply showing the outline of elements selected in the Design Pane, it now shows their position, dimensions, margin, padding and other information. MRI shows all of the elements in the preview document which are selected by any statement in your style sheet – as well as showing all the statements in your style sheet which select an element when it is selected in the Design Pane. Sounds complicated – but makes perfect sense when you start playing with it.

Better Previewing

Previewing in Style Master has been completely rewritten in Style Master 5 – no more temp files! You can transparently preview using either local files on your hard disk, files over a network, or files served using a local or remote web server. Previewing performance has also been dramatically improved – so updating your style sheet will instantly, and seamlessly, update your preview document.

Really truly WYSIWYG CSS editing

In Style Master 5, when you click an element in the design pane, Style Master selects the most specific statement in your CSS which applies to the element. But what if there are none? Enter our new Suggest Selectors editor. This provides intelligent suggestions for the element currently selected in the design pane.

New Troubleshooting features

Style Master provides several new troubleshooting and debugging features. The Bugs window lists all the bugs in your CSS – with an explanation of what’s going wrong.

XRAY shows the position, margin and padding for any element when you select it in the design pane.

The Computed Style Window has been seriously upgraded. Instead of simply showing you the computed style of an element in the Design Pane (that is the current value of the properties, as computed by the browser), it also shows you

• the property value that was set (so for example the set value for font-size might be .9em, while the computed value is 12px)
• whether the property is being inherited
• the statement which is setting the property value and
• the style sheet in which this statement appears (including initial and user style sheets).

Not only that, but clicking any property in this window will select the statement that sets the property.

Far from least, the Show Matching Statements window lists all the statements in all style sheets that style the page in the Design Pane, and all the statements in these which select the currently selected design pane element. Click a statement to open it in Style Master.

New CSS Feature Editors

In the last year or two, modern browsers have begun implementing aspects of CSS3, and experimental CSS. Style Master now features easy to use editors for a number of these including

• rounded borders (border-radius)
• text-shadow
• box-shadow
• text-stroke
• opacity
• multi-column text

as well as a number of new user interface properties ideal for developing webapps.

Hackable

The XRAY and MRI features of Style Master use external CSS and Javascript files installed with Style Master. So, if you want to customize the appearance (or even behavior) of these features, the code’s all there to hack (but maybe make a backup first eh?)

So, hopefully you can see why we feel this is such a significant upgrade. Love to hear your thoughts.