New to this version is the ability to open HTML documents in TopStyle for editing. Almost
all of TopStyle's features support <style>..</style> blocks within
HTML documents, including the style checker, style inspector, palette editor, style sweeper
and selector list.
Editing HTML documents is simplified by the following time-savers:
style attribute enables using the style
inspector to edit that tag's style.
<link> tags enables single-click opening of linked
style sheets. After clicking a <link>, the preview file will be set to
the HTML document from which the link was opened.
class attributes enables single-click navigation to the
class declaration in the HTML document's style block(s) or linked style sheets.
When editing HTML, the dropdown above the Inspector will show the active HTML definition. Similar to the active style definition, the active HTML definition is used by TagComplete, Tag Insight and the Tag Inspector to determine which HTML elements and attributes to support. When an XHTML definition is selected, TopStyle will insert XHTML-compliant markup.
TopStyle's new HTML toolbar/menu contains the following items:
class attribute, this dropdown will display a list of classes that may be
applied to that element. Note that this list is dynamically extracted from the HTML
document's style blocks and linked style sheets, so it should reflect any changes made
either to the HTML document or to any style sheets to which it links.
</head> tag.
<link>.
Note: HTML Insight and the Tag Inspector draw deprecated elements and attributes in disabled (grayed) text.
When editing an HTML document, the preview will always show that HTML document instead of the preview file used when working with CSS files. Any server mappings you have in place will still be applied.
Finally, we've also added an HTML-aware spell checker (F7) so you can quickly check your HTML documents for spelling errors.
Style Upgrade "upgrades" an HTML document by replacing presentational markup with embedded styles. To use this feature, simply open an HTML document in TopStyle and choose , or click the Style Upgrade toolbutton.
In this release, style upgrade is configured automatically and exposes no options. If you'd like to make it configurable, please let us know. Also, please note that this feature is not intended as an HTML validation tool - it's designed only to convert HTML elements and attributes that have been deprecated in favor of style sheets.
The new clip library (Ctrl+Shift+L) enables you to store commonly-used snippets in a central location. Right-click on the clip library to add or remove items, and single-click on an item to insert it into the current document.
For even faster insertion, use the new quick insert (Ctrl+Q) feature to display a menu of up to 26 style library items. Once the menu is displayed, just type the letter corresponding to the item you want inserted.
Replacement Tokens may be used in clip library items. When TopStyle
encounters a replacement token, it will prompt you for custom text before inserting a
library item in the editor. Replacement tokens are delimited by %r[..], and
the text between these delimiters appears on the prompt. For example, if you have the
following item:
value="%r[what is the value]"
TopStyle will display a prompt with "what is the value" on it. If you respond to this
prompt with "THIS VALUE" then TopStyle will insert:
value="THIS VALUE"
The new Full Screen Preview (F12) enables you to quickly view the current style sheet or HTML document in a maximized browser window.
Power users will appreciate how the full screen preview can be split into two separate
previewers, each of which has its own set of rulers and may use a different
!DOCTYPE and/or browser type (Internet Explorer or Netscape Gecko). You can
also choose the preview size by selecting from a list of common screen resolutions
(1024x768, etc.) or by entering a custom size.
Note: Since the full screen option enables choosing a
!DOCTYPE and splitting between Internet Explorer and Netscape Gecko, these
features have been removed from the main TopStyle window.
TopStyle Pro 3.0 takes customizable keyboard shortcuts to a new level by enabling you to create multiple sets of keyboard shortcuts.
Even better, you now have the ability to insert different text strings based on the
context of what's being edited. For example, you could create a
Ctrl+B shortcut which inserts font-weight: bold
when editing a style sheet or style block, but inserts <strong>..</strong>
when editing HTML.
Create keyboard sets that mimic your favorite text or HTML editor, or create your own from scratch. Just select to change or customize the active keyboard set.
Right-clicking within an HTML tag or CSS rule now enables you to see a list of related styles. For an HTML tag, this list will contain selectors that include the current HTML element and/or the class assigned to the current HTML element. For a CSS rule, it will show any selectors which have the same element or class. Clicking on an item in this list will navigate to that item's style. The related styles list can also be shown from the Tools menu.
Note: The number shown to the right of each item in the related styles list is its specificity. This can be useful in tracking down inheritance problems, since styles with a higher specificity take precedence over those with a lower one.
TopStyle's Color Picker has been redesigned to offer a number of new features.
Note: Custom palettes installed with TopStyle cannot be modified.
TopStyle enables you to use HTML Tidy to reformat your HTML pages, providing a handy way to clean up your code and identify where problems exist.
After running HTML Tidy, TopStyle will display a list of messages it generated along with a second tab labeled "Tidy" which contains the reformatted ("tidied") HTML. After reviewing the changes, simply click the "Copy to active editor" button to replace the contents of the current document with the reformatted HTML.
Among the items in the left-hand viewbar is a new Thumbnails tab, which displays thumbnails of all images in a specific directory. Just right click on a thumbnail to display a context menu which enables the following:
You can also drag-and-drop an image into the editor to insert it at a specific location.
Note: When editing HTML, an IMG tag will be inserted
when a thumbnail is dragged into the editor. When editing CSS, a URL value
will be inserted.
The new File Explorer panel enables quick navigation of your file system. In addition to supporting Favorite Folders - which are shared with the Open/Save file dialogs - there's also an address bar which displays a menu of the last 15 folders visited.
Note: Keeping the folder tree hidden and using the Favorites menu and address bar may be a faster way to navigate between folders, since populating the folder tree requires querying the Windows shell (which is often slow, especially with network drives).
p{color: red} td{color: red} will be replaced with p,td{color:
red}.
div.class, p.class, etc.) are grouped together.
DIV, TD would be split into separate DIV and
TD items.
<div class="one two">). Note that this technique is rarely used since it's not
supported by many browsers (including Netscape 4). TopStyle's editor also doesn't color-code
multiple classes in HTML elements.
@import)
by a style sheet linked to the current HTML document.