TopStyle 5.0.0.94
|
Date Added: |
Feb 21, 2013 04:20 AM |
Publisher's Description: |
TopStyle 5 includes (and integrates with) CSS Tidy, a CSS parser and optimiser. Thanks to CSS optimisation, you have faster loading pages and lower traffic costs. You can also use CSS Tidy to format (or fix) your style sheets for browser compatibility.
Brace matching
When you select a brace, TopStyle 5 will automatically highlight the matching brace:
Brace matching gives you immediate feedback on misplaced brackets and parentheses. The purpose is to help you navigate through your document(s) and also spot any improper matching, which could cause your website to malfunction.
You can enable (or disable) brace matching here: Options (F8) > Editor > Highlight matching brackets and parentheses
Improved Insight (Ctrl+Space)
• Starting with TopStyle 5, Insight (Ctrl+Space) will filter the drop-down list while typing (show only those items that match what you have typed). This makes searching though the drop-down list a whole lot easier. You can toggle this new feature here: Options (F8) > Editor > Insight > "filter the list while typing".
• When creating new CSS selectors while you're inside a <style> tag, Style Insight will list HTML element names:
• If you enter a dot while you're inside a <style> tag, Style Insight will list the class= attribute value(s) that are in your HTML document:
• In addition to these improvements, Insight includes lots of other improvements such as browser compatibility icons, Google web fonts, CSS gradient generator, text shadow generator, etc.
Browser compatibility icons
When you bring up Style Insight (Ctrl+Space) for a CSS property, TopStyle 5 will display browser compatibility icons for each and every property name:
In this example, box-sizing is supported by all web browsers, columns is supported by Chrome and Safari, and column-fill is supported by Firefox only.
Google Web Fonts
Google provides lots of high-quality web fonts that work in most browsers. TopStyle 5 now supports automatic insertion of these fonts into your page(s).
You don't need to do any programming; all you have to do is to bring up Style Insight (Ctrl+Space) while in a font-family property, either in a <style> block:
...or with an inline style on the element itself:
Now select "Google Web Font..." and this new property editor will appear:
Check one (or more) font, and click OK. TopStyle 5 will insert the font(s) into your page:
Note: in addition to the font family name, TopStyle 5 optionally adds a stylesheet <link> to the <head> section of your web page (recommended).
Now take a look at the Preview Panel (Ctrl+D). You should see a page displaying the following, in the font called Tangerine:
Making the Web Beautiful!
That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:
You should now see a drop shadow under the text:
Making the Web Beautiful!
Note: when specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
Highlight CSS color values
When turned on, this new setting will highlight CSS color values with the actual color they represent.
Improved CSS color editing
TopStyle 5 displays a little color swatch below every CSS color value. When you click on this color swatch, the color dialog appears. From here, you can easily change the color value.
When you triple-click on a color value in the editor, the color dialog appears. From here, you can easily change the color under the mouse cursor.
Color Contrast Analyser
The Color Contrast Analyser allows you to specify a foreground and a background color and then determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen".
Right-click in a color value and click on Select 1st Color to Compare. Then right-click in another color value and click on Compare Color Contrast...
...the Color Contrast Analyser appears:
The Color Contrast Analyser will indicate that your colors pass the following tests if they exceed their threshold:
Brightness difference (should be greater than 125)
Color difference (should be greater than 500)
Contrast ratio (should be at least 5:1)
In addition to this Color Contrast Analyser, the Style Checker (F6) will validate that any CSS rule with a (foreground) color and background color has sufficient contrast and produce a warning if not:
SFTP (SSH File Transfer Protocol)
In addition to FTP (previously introduced in TopStyle 4), TopStyle 5 now includes support for SFTP. The FTP Explorer Panel allows you to drag-and-drop documents from your SFTP site into the TopStyle editor. When you save your document, it is automatically uploaded to your SFTP site.
File History
TopStyle 5 creates a backup every time you update and save a document. If you want to manage your backups, then right-click a document tab, and select History...
The File History dialog appears:
From here, you can open a backup, compare differences between revisions, or roll back to a backup (restore a previous revision).
By default, TopStyle maintains 10 backups for documents that are updated and then saved. You can change these settings here: Options (F8) > General > File History
Highlight all occurrences of selected text
TopStyle 5 allows you to highlight (and replace!) multiple occurrences of text (for example: a JavaScript function name) in your document.
When you select some text, a new button labeled "highlight all occurrences of..." appears in the gutter:
Click this button, and TopStyle will highlight all occurrences of your selected text:
Now start typing, and TopStyle will replace all occurrences with what you typed!
Note: if you would like to bail out of this feature, you can simply click the button in the gutter again, or move the caret to some other position in your document.
|
Screenshot: |
|
Documentation: |
http://www.topstyle4.com/ |
Last Download: |
Apr 25, 2024 04:41 AM
|
Downloads: |
240 |
OS: |
Windows |
Rating: |
|
|
|
