Review: TopStyle Pro v3.0 - TopStyle Features
(Page 2 of 3 )
The first time I started TopStyle Pro, I was welcomed by a configuration wizard, which many newbie users should find useful. After I had gone through the six-step configuration, the program popped up. It didn't take long before I felt at home, but I've used TopStyle before, so that may have cut the learning curve in half.
Style InspectorYou'll be using the style Inspector when you're editing CSS. It contains all of the CSS-styles available for the selected style definition. Anyone can easily switch between the different style definitions. Take a look at the screenshot below. The style definition shows and hides different styles from the inspector, cohering to the selected definition. This feature can make your CSS coding more consistent. Styles that are not in the selected definition will be marked with a red color in the editor window.
When you select a style, you will see a list of browser names in the bottom of the inspector. Before each browser name there is an empty circle, a half circle or a full circle. This tells you which browsers support the selected style. You can specify yourself which browsers you want to see compatibility info about.
If at any time you need to know what a style does, select the style, and press F1 (or click the little ? icon at the bottom of the inspector). This will pop up a help screen with information about the selected style.
Tag InspectorYou'll be using this feature when you're editing HTML and XHTML. It's similar to the style inspector, but has fewer features, however it's still very useful.
Editor HyperlinkingThis is one of TopStyle's unique features. When you hover your mouse over a link to a stylesheet for example, the line will be underlined, just like a hyperlink on a web site. If you click on the link, TopStyle will automatically open the document in the editor if it's not already opened. It even links class="" attributes in tags. When you click on them, TopStyle will jump directly to the class. Hooray for productivity!
Style Sheet Link WizardSo, you've got 203 HTML documents,and all of them have styles embedded in <style> blocks... what do you do? The style sheet link wizard will fix the problem for you. Make the style sheet file, and run the wizard. The wizard will then add a link to to style sheet in the site, folder or file(s) specified. It will even remove the style blocks in the documents if you'd like it to! This little puppy could save you hours of hard work!
Color PaletteTopStyle's handling of colors is top notch. It has a plethora of palettes, and it even allows you to import your own. It allows you to view the color either as a palette, or as a list of named colors. Another great feature of the color handling is the harmonious color finder, which automatically finds colors that are harmonious to the selected color. We can also use the default windows color palette, just like the one we see in other programs. I should also mention that all of the colors used in a CSS document are listed to the left of the editor window. This makes it easy to insert common colors.
Options and CustomizationsThe options dialogue let's you change TopStyle's behaviour. There are a lot of options, so a feature that would've been nice to see here is an option to export the settings. If you do a lot of configuration, you might want to keep the config file after a full reinstall of windows for example.
SitesAnother useful feature is the abilities to make a so-called "site". TopStyle's sites can be compared to HomeSite's projects. When you create a site you define a site name and a root folder. After you've done that, you can select your site from the sites bar.
When you have a large site there are several features that can help you manage it, like site reports, which can tell you about orphan classes (classes that aren't in use by any file in the site), case mismatch (for example if the class called "classOne", and it gets called from a html tag by the name "classone"), class usage (where the classes are used), undefined classes and an ID overview. By using this tool you can remove redundant classes, etc.
Other mentionable features- Style Upgrade: This tool replaces all presentational mark-up in a HTML document with embedded styles. Useful if you have a site where you'd like to control it's presentational aspects using CSS.
- Spell Checking: This is an English spell checker for HTML. A feature I didn't find in this spell checker was to spell check all open documents, or the entire list of HTML files within a site. This could be a useful addition.
- CSS selectors list: A list of all elements, classes and ID's present in a style sheet. If you right click on an item, you can even comment it out in the source.
- Thumbnail Viewer: Select a folder and get a thumbnail list of all images contained within that folder. Drag and drop directly into CSS or HTML documents.
Features I'd love to see in future versions- Syntax coloring of PHP, JavaScript and other scripting languages
- More embedded browsers, like Opera
- More features geared towards HTML, PHP and other languages
Next: Conclusion >>
More HTML Articles
More By Havard Lindset
/ 5 
