Review: TopStyle Pro 3.11

Review: TopStyle Pro 3.11

By Lee Underwood

There are many ways to create and edit Web pages and style sheets. Using TopStyle Pro by Bradbury Software is one method. TopStyle was created by Nick Bradbury, creator of the HomeSite HTML editor. For those of you who like HomeSite, you'll love TopStyle Pro. This program is jam-packed with all kinds of features.

TopStyle is a (X)HTML/CSS editor; a combination which helps to save time in the editing process. Changes made to the style sheet can be viewed immediately from within the software. This means not having to upload the (X)HTML document to your server each time you want to view the changes.

The program provides many areas of customization. You can even create your own keyboard shortcuts that work one way in a style sheet and a totally different way in a (X)HTML document. The software can be integrated with a number of other tools, such as 40tude HTML, AceHTML, HTMLKit, and NoteTab Pro.

The Basics

The program's interface is pretty much standard. It's what's included in the interface that sets it apart. In the Default Layout (there are three included), the middle of the screen contains the work area. Located on the right and left side of the edit area are several different panels. These panels can be hidden if desired.

One of the panels contains the Clip Library. You can store snippets of code here and reuse them in other documents. Another panel contains the CSS Palette Editor, used to view and change the colors in the current style sheet or style block. The Style Inspector panel displays the properties of the code on the selected line in the editor. It gives the attributes of each property, listing even the deprecated ones. The Selector List panel displays each selector used in the current style sheet, divided into elements, classes, and IDs. Clicking on a selector will highlight it in the editor. Creating new selectors can be done either manually or by using the Selector Editor.

Located at the bottom of the screen are five tabs: Preview, Style Checker, Messages, Tidy, and Reports. Results from these different tools are displayed there. The active document is displayed in real-time in the Preview tab.

Clicking on a link in a (X)HTML file will open the file in the editor, if it is on the local drive. Otherwise, it will be displayed in the default browser.

Document Editing

Document editing is done by hand (as opposed to WYSIWYG). The program provides helpers for different tags. As the opening "<" is entered, a drop-down menu opens to aid in completing the code and its attributes.

Documents can even be opened from the Web. When an HTML document is retrieved, all linked style sheets will also be downloaded.

A unique aspect of the software is its ability to export style sheets. If you create browser-specific style sheets and use browser sniffing techniques to switch the visitor to an appropriate style sheet, TopStyle can make your job a little easier. Once a style sheet is created, the export command [File > CSS Export] will allow you to choose a specific browser and TopStyle will create a new style sheet from the current one.

The Style Checker

This tool is used to locate errors and compatibility problems. The errors are reported in the Style Checker tab at the bottom of the screen. Clicking on the errors in the tab will highlight the code in the editor window above. When using the Style Checker, errors for specified levels of CSS and individual browsers can be detected.

Site Management

TopStyle provides for management of your Web site, right on your computer. It offers features such as a summary view of your site, including all style sheets and HTML documents, all broken style links, recently changed documents (HTML and style sheets), and all style sheets with @import statements. The program maintains a database of your site layout and can rebuild the site in the event it has been modified by another program. Site reports cover ID overview, class usage, orphan and undefined classes, and case mismatch.

The program includes a lite version of CSE HTML Validator. If you have the full version, TopStyle will integrate with it. You can also use the built-in link to the W3C Validator. The results are returned within the program. In addition, a link to the online version of Watchfire's Bobby Accessibility Checker is provided.

Odd and Ends

There are many other little goodies for editing, such as a Style Sweeper for reformatting your style sheets and the ability to view all styles relating to a particular (X)HTML tag or CSS rule. TopStyle can even upgrade your HTML to CSS by converting to CSS any HTML markup that has been deprecated in favor of CSS.

Help and PDF Files

Help is available within the program as well as in a very nice PDF file. The PDF file includes the program's help file as well as a tutorial and a section on CSS basics. In addition, an online support forum is available, as well as a tips blog.

Wrap-Up

TopStyle Pro is a very comprehensive (X)HTML/CSS editor. Overall, the program should make your Web design work flow much easier. If you already have a favorite program for developing Web sites, TopStyle Pro can work along side it, adding many other features not found anywhere else.

The program is available from Bradbury Software for $79.95. System requirements: Microsoft Windows 98, ME, 2000, XP, or 2003; Pentium 300 MHz or higher processor; and 64MB RAM or greater.

Created: January 14, 2005

URL: https://webreference.com/reviews/top_style