TopStyle 5, a powerful HTML5 & CSS3 editor for Windows.
Tap into the power of CSS3 and HTML5!
Bring your ideas to life with HTML5 & CSS3
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.
Work more efficiently with TopStyle 5.
Preview HTML and CSS while you write it
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?
Work smarter with TopStyle 5.
TopStyle 5 comes with multiple new features, tweaks and improvements that let you work more efficiently. Here's just a sample of what's in store for you:
Hyperlinks and Property Help
Hyperlinking (Go to Declaration) & Property Help
TopStyle's unique hyperlinking greatly simplifies navigating between documents. Click an HTML class attribute to navigate to the definition of that class in an external style sheet, or click an anchor tag or CSS link to open the linked file for editing. Clicking on a CSS property name in the editor window while holding the Ctrl key down will display detailed help about the selected property.
Smart Copy and Paste - now 100% faster!
We believe that even smallest details can be improved and Smart Copy and Paste is our answer. You no longer need to highlight/select a word to copy it. With your cursor in a word all you have to do is press Ctrl+C (or Ctrl+X) and TopStyle will figure out what to select and copy. Smart Paste (Ctrl+Shift+V) will replace the current word. You won't believe how much you'll miss this feature in other editors!
Validation: Style Checker and W3C + CSE + HTML5 validators
CSS is actually quite simple, but getting it to work in multiple browsers is a challenge. This is where TopStyle shines! TopStyle's Style Checker is a powerful tool which validates your style sheets against multiple browsers, flagging any invalid properties or values it finds. What's more, TopStyle enables you to pass your style sheets directly to the W3C's validation services so you can quickly check against the official specifications.
CSS3 Media Queries
CSS3 allows you to specify a style sheet for certain conditions. For example, you can have one style sheet for large displays and a different style sheet specifically for mobile devices. TopStyle 5 allows you to tailor to different resolutions and devices without changing the content.
CSS Selector Panel: dive to the correct spot on a long style sheet
CSS Selector Panel
The CSS Selector Panel displays all selectors in your document. Clicking any selector in the list will dive to the correct spot in a long document. But there is more: you can easily comment out or create new selectors too!
HTML Structure Panel
The HTML Structure Panel appears below the code editor, and displays the hierarchy of HTML tags that lead up to your editing position. Selecting the parent tag is easy! 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 editor.
CSS Groups
One of the most daunting things about building and maintaining a web site can be wading through huge, disorganized style sheets. Nothing is worse than opening up a style sheet someone else has worked on and thinking, "what the heck happened here?". One of TopStyle's most powerful features is its ability to group CSS selectors into a folder structure.
And tons of small things:
HTML toolbar
TopStyle comes with a user-configurable HTML toolbar that is displayed above the editor. Simply click and hold down the mouse button on a snippet, and then drag the item from the HTML toolbar anywhere into your document.
XRAY
You click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box? what CSS selector(s) apply to this element?
Live Spell Checking
TopStyle identifies spelling errors as you type with wavy red underlines, and allows you to act upon each identified problem with a context menu.
Unicode
Unicode Support
The TopStyle editor, Inspector, etc. are all Unicode-compliant. When you save your (X)HTML document, you can optionally select encoding for your document (UTF-8, UTF-16, ANSI, etc).
Prefixr
Keeping up with vendor-prefixed properties is hard. Prefixr to the rescue. Prefixr will filter your CSS3 properties and dynamically update them, adding (vendor-prefixed) properties for cross-browser compatibility.
File History
TopStyle 5 creates a backup every time you update and save a document. Thanks to a new History window, you can open a backup, compare differences between revisions, or roll back to a backup (restore a previous revision).
Wrap HTML Tag
While TopStyle easily provides auto tag closing, it also allows you to easily wrap an existing HTML Tag. Pick an element name from the Wrap HTML Tag dialog and your HTML tag should now be wrapped in a new HTML tag, without you having to manually locate the position for the open tag and the close tag.
Image Maps
An image map is an image that has been divided into areas, or "hotspots"; when the user clicks a hotspot, an action occurs (for example, your reader is taken to another Web page). TopStyle 5 comes with a built-in image map editor that makes it easy to create image maps for your Web pages.
...and just the beginning. See what's new for more treats
Size: 29.6 MB
