1/28/13
In this article we’re going to take a look atTopStyle 5 an HTML5 and CSS3 editor. This new version features several updates and we’re going to look at a few of those here.
Prefixr
While CSS3 offers a wide range of possibilities, it doesn’t display properly in all browsers. The other issue is that CSS3 hasn’t reached the final release stage. This makes it necessary to use vendor prefixes to make sure that there aren’t any conflicts with the different browsers. Unfortunately there are many settings and it’s difficult to remember them. A solution is Prefixr, which adds those vendor prefixes to your code, ensuring cross-browser compatibility. Here’s an example:
.box {
box-shadow: 3px 3px 5px blue;
border-radius: 8px;
}
Before Prefixr
.box {
-webkit-box-shadow: 3px 3px 5px blue;
box-shadow: 3px 3px 5px blue;
border-radius: 8px;
}
With Prefixr applied.
CSS Gradient Generator
This feature allows you to create gradients with pure CSS3, without the laborious need to create images. To activate this option in Topstyle 5, click on Ctrl+Space.
This brings up the Style Insight. Note that the gradient option only applies to background-image, which you can select from this list.
To activate the Gradient Generator, double-click on linear-gradient.
This brings up the CSS Gradient Generator. This gives you the options of vertical, horizontal and diagonal. The Reverse button will reverse the gradient. i.e. If the gradient is top to bottom, pressing on the Reverse button will change that from bottom to top. Note that you can see the code in a preview box at the bottom of the dialog box.
When you click on a color swatch, it brings up the Color Picker dialog box which gives you many palette choices, such as: W3C 16-color palette, named colors, browser safe palette, and more. When you’re satisfied with your edits, click on OK to apply the gradient.
Here’s the resulting code.
Image Maps
One of the new features in this release is the ability to add image maps to an image, allowing you to create “hotspots,” which, when clicked upon will take the user to another web page. This is where I became confused by the instructions, about dragging the image icon to a web page with an image in it.
I found that a better way was to load the file and right-click on the image name in the code, which brought up the popup to the right. The next step is to click on Image Map Editor.
This brings up the Image Map Editor and you can quickly add rectangular hotspots to your image.
<p><img src=”_salesletter/images/expertscover.jpg” alt=”” width=”330″ height=”500″ usemap=”map1″ /><br /><br /><map name=”map1″>
<area shape=”rect” coords=”110,270,211,463″ href=”#” />
</map><br /><map name=”map1″>
<area shape=”rect” coords=”2,152,329,190″ href=”#” />
</map></p>
When you click on the OK button the information about the coordinates and links are added to the code below your image, as you can see in the code snippet above.
iWebKit 5
A new feature of TopStyle 5 is a frameweork that allows you to create an iPhone, iPod Touch and iPad compatible website or app. Here are some instructons to get you started: Go to File: New Site: iWebKit 5.04.
The Browse for Folder dialog appear and you can choose a folder for your project or create one.
When you click on OK, this brings up the New Site dialog box, where you set the name for your site.
Next, you need to add a new iWebKit 5 page to your site. To do so, go to File: New HTML Document: iWebKit. This brings up the options you see above.
Once you make a choice (I chose iWebKit 5), it brings up the following code
After that, you have access to the HTML toolbar which offers most of the commonly used iWebKit features. To access the HTML Toolbar, go to View: Show HTML Toolbar and make sure it’s activated. From here you can include navigation buttons, menus, lists, etc.
According to TopStyle, you can quickly build a mobile site using this approach, but I don’t see more detailed information in the help file on how to do this. In my opinion, that information (plus some examples) needs to be provided, even briefly.
TopStyle Help
The TopStyle help file gives you some useful information about CSS3 strategies that will help you with your coding efforts. Here are a few of them:
Let the Browser Choose the Font Size
While it’s tempting to choose the font size, it’s important to realize that font sizes on Internet Explorer aren’t the same as those on Firefox, as an example. It’s a better idea to use a relative size, such as em or %, rather than an absolute size, such as pt or px.
Test On Different Browsers
While TopStyle allows you to check for errors within the program, nothing substitutes for live checking for issues. In my experience, that means uploading the file(s) to your hosting account and checking the file in real life. That’s the fastest way to find out if something is working – or not.
Use Linked Style Sheets Instead of Inline Styles
When working with CSS, it’s tempting to apply styles to one document, but that really defeats the purpose of CSS. In actual practice, your goal should be to create style sheets that affect your entire site. Among other things, it will make your content consistent. The other thing is if you make a change in your style sheet(s), it will affect the entire site. In contrast, if you use a different style sheet for each page, you create a logistical nightmare because if there’s a major change, you might have to update many pages manually, which could lead to a huge loss of time.
Validate Your CSS and HTML
TopStyle’s style checker and the W3C’s CSS Validator go a long way to help you find problems in your style sheets, but this won’t do much good if you have invalid HTML. Fortunately, TopStyle integrates HTML Tidy and the CSE HTML Validator. Other options are the W3C’s HTML Validation Service or the HTML5 Validator. Links to all of these are provided within the help file.
Conclusion
Overall, I like the approach of TopStyle 5. I especially like some of wizards, which is a nice change from manipulating code. The preview window at the bottom of the interface is also a good idea and this carries over from previous versions of TopStyle. iWebKit 5 option seems to be a good idea, but there wasn’t enough docmentation for my liking. Another concern of mine is that there aren’t enough images. There’s too much reliance on words alone. In general, softare is becoming more and more complicated these days, with highly detailed interfaces. It’s easy for a user to become lost, and that’s happened to me sometimes.
Still, even with these issues, I like what the software can do and I recommend you take TopStyle 5 for a test drive. I think you’ll like the results.
Download Notes
While you can download the software to try it out, there are some limitations. The trial version will allow for a maximum of two style definitions and a comment is added to each new document. When you buy the software, these limitations aren’t in effect. For users who have TopStyle 4, the upgrade price is $29.95. For those who want to purchase a new version, the price is: $79.95.
