TopStyle 5 supports the newest versions of core standards that drive modern web experiences. You'll get access to all the latest tags and properties, including assistance from built in tools like Insight, Inspector & validators.

Each browser might render your web pages differently. That's why TopStyle supports the IE, Chromium, Firefox and Safari rendering engines. XRAY answers those vital questions: where is the top and left of this element? how big is each margin? what CSS selector(s) apply to this element?

What's New in TopStyle 5?
- CSS3
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).
- Prefixr
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)
- HTML5
TopStyle 5 includes a new HTML5 definition. This new HTML5 definition is powering the Inspector (Shift+F9) and Insight (Ctrl+Space).
HTML5-only Validator
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.