- Preview CSS while you write it.
- Easily create pleasant color schemes for your site.
- Style Checker validates your CSS syntax against multiple browsers.
- Use Site Reports to see at-a-glance where CSS styles are used in your site.
- Style Upgrade quickly replaces all outdated HTML code with equivalent CSS styling.
TopStyle 5 includes a new style definition for CSS3. This new CSS3 definition is powering many TopStyle features, including the Inspector (Shift+F9), Insight (Ctrl+Space), and Style Checker (F6).
CSS3 is great, but not every web browser out there fully supports CSS3 and CSS3 itself has not reached its final release stage. That is why some web browsers require so-called vendor-prefixed properties. The vendor prefixes ensure that there are no clashes with the changing specification and to allow the browser maker to start supporting experimental CSS properties.
Of course, keeping up with these vendor-prefixed properties (supporting them, remembering them, etc) is hard. In an ideal world, the web developer should have to focus on standards-compliant CSS properties only.
Prefixr to the rescue. Prefixr will filter your (standards-compliant) CSS3 properties and dynamically update them, adding (vendor-prefixed) properties for cross-browser compatibility.
Here's an example. Suppose you have this style sheet:
You can update an entire style sheet, or a few rules, or a few properties. Simply select the CSS you would like to "prefixize" and then select: CSS > Prefixize.
While creating your style sheets in TopStyle, you focus on the standards-compliant properties and do not worry about browser support. Then when you're done, you let Prefixr do the nasty work and convert your (standards-compliant) CSS3 properties into (vendor-prefixed) properties for cross-browser compatibility.
CSS3 Media Queries
CSS2 allows you to specify a stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
When you add a Style Sheet or @import Rule to your document, TopStyle now supports CSS3 media queries:
In this example, the style sheet you're adding to your document will apply if the maximum width of the device is 480px (eg. iPhone display).
CSS Gradient Generator
CSS3 and HTML5 are introducing many exciting features for web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds.
Style Insight (Ctrl+Space) includes a CSS Gradient Generator for background-image:
When you pick linear-gradient from Style Insight (Ctrl+Space), the CSS Gradient Generator appears:
From here, you can change the orientation (horizontal, vertical, or diagonal) and the colors that make up the gradient. When you click OK, TopStyle 5 will insert the linear-gradient function into your document:
Text Shadow Generator
CSS3 has a property called text-shadow (a slightly moved, slightly blurred copy of a text).
The TopStyle 5 Text Shadow Generator is a built-in property editor for the text-shadow property:
When you pick Text Shadow Generator... from Style Insight (Ctrl+Space), the Text Shadow Generator window appears:
The simplest form of the text-shadow property has two parts: a color (such as #a5a5a5 above) and an offset (2px 2px in the example above). This results in a sharp shadow at the indicated offset. But the offset can also be made fuzzy, resulting in a more or less blurred shadow.
Improved options for Preview Files (CSS-only)
Starting with TopStyle 5, we have added the following options for Preview Files:
move most recently used preview file(s) to the top of the list include HTML documents that are in the same directory (as your CSS document) include HTML documents that are open (in other tabs)
TopStyle 5 includes a new HTML5 definition. This new HTML5 definition is powering the Inspector (Shift+F9) and Insight (Ctrl+Space).
TopStyle 5 includes a new HTML5-only validator. Thanks to this HTML5 validator, TopStyle 5 makes quality assurance of HTML5 less time consuming than it used to be.
HTML Structure Panel
The HTML Structure Panel appears below the code editor, and displays the hierarchy of HTML tags that leads up to your editing position.
- Open an HTML document
- Place the insertion point into some nested code
- The HTML Structure Panel appears below the code editor
When you click on one of the buttons in the HTML Structure Panel, TopStyle 5 will select the corresponding HTML tag (and its contents) in the code editor:
In addition to the HTML Structure Panel, TopStyle 5 comes with the following new menu items:
- Edit > Select Parent HTML Tag (Ctrl+[)
- Edit > Select Child HTML Tag (Ctrl+])
When you click one of these menu items, the enclosing matching tags (and their contents) are selected in your code.
Note: If you keep clicking Edit > Select Parent HTML Tag, and your tags are balanced, eventually TopStyle 5 will select the outermost and tags.