Stylizer

Stylizer, which was previously known as StyleSpread, is viewed by some web designers as one powerful CSS editor with interactive and radically non-stereotypical approach to CSS editing.
This CSS editor takes pride in its six new features: Live Preview, Powerful Color Tweaking, Editing and Diagnosing, Automatic Validation, real-Time Size Adjustment Capability and Superior User Interface.

Figure 1. Stylizer’s Live Preview
It has built-in web browsers: Firefox and Internet Explorer, which makes refreshing browser unnecessary. Thus, it is claimed that this will make users save time. The Stylizer avoids repetitive “guess and test” as it has real time resizing capability and drag and drop function.

Figure 2. Stylizer’s Color Tweaking

The Stylizer has powerful color tweaking and allows minimal steps to see real-time changes while editing. With its live preview, a designer can see actual changes as he or she edits the file.

Unlike Microsoft’s Developer Toolbar or Firebug, users say that the Stylizer enables the user to see changes to see the actual CSS file right in the same place. It also allows users to work only with filtered list of CSS rules. As the user works, it has automatic validation capability, which means that if a designer commits an error he or she will be prompted where the error happened. The Stylizer also has hotkeys and other easy-to-use features.

For more details about this software and for trial download, go to http://www.skybound.ca/stylizer/.

Firebug

Figure 3. Firebug

The integration of Firefox into Firebug’s arsenal of web development tools is one of its strong features which aims to make it at par with other web development software like Stylizer. This feature allows designer to edit, modify, debug and monitor Javascript, HTML and CSS files.

Below are the major strong points of Firebug:

Firebug allows live HTML editing. It provides means to find HTML elements found deep in the file. It likewise makes possible the tweaking of CSS files. Makers of Firebug point out that this CSS-Editing software lets designer visualize CSS metrics, which is according to them, is difficult to do using old fashioned editing tools. Offsetting, creating margins, borders, padding, and modifying sizes are also possible using Firebug.

Firebug can break down huge amount of Javascript, HTML, XML and CSS entries into chewable bits to make it easier to manage and analyze files. Firebug permits debugging and profiling Javascript and makes troubleshooting easy to do, as well.

But among the foremost strengths of Firebug is its capability to locate Document Object Model. It also allows designers to use old school command line of Javascript.

To know more about Firebug, see http://www.getfirebug.com/cl.html.

The VS 2008

The creators of VS 2008 claims that VS 2008 has rich CSS support features and has highly improved HTML designing tools. It is the updated version of VS 2005. The VS 2008 at present utilizes the same web designer that ships with Microsoft’s new Expression Web product.

Below are few of the strengths and details about the new VS version.

The VS 2008 has source-view and design-view. But it adds a new feature–the split-view editing. This permits a designer to see the HTML source and Design view

The new VS has CSS style manager tool called “Manage Styles” function that presents style sheets all at once with the specific rules that correspond to the page that is currently being edited. Through the cursor, the designer can hover over the specific rules for quick viewing of CSS rule values.

The VS 2008 has CSS Properties Window feature. This feature enables the designer to see the HTML element or ASP.NET server control. The values are easily changeable or modifiable using its CSS property grid.

This CSS-Editing software has CSS Source View Intellisense. This is advantageous in terms of specifying CSS class rules as shown in Figure 4

Figure 4: CSS class rules using Source View Intellisense

The updated version of the VS also possesses Nested Master Page Support and multi-targeting support, which according to its creators, is not present in other editing software. The multi-targeting support of VS 2008 will allow users to use features mentioned without installing .NET 3.5 in the server.

For more details about VS 2008, please see http://weblogs.asp.net/scottgu/archive/2007/07/25/vs-2008-web-designer-and-css-support.aspx

CSSEdit 2.6

“If it is standards-based sites you are looking for…sites that are fast loading and innovative your search is over—presenting the CSSEdit 2.6”—this is the essence of CSSEdit 2.6 statement at http://www.macrabbit.com/.

The CSSEdit has these features to offer: a built-in X-ray Inspector, Live Preview and Selectors.

CSSEdit’s X-ray Inspector tells a designer what specific styles that best applies to the web page. With this, anyone can add Bookmarklets, Overriding and Extraction. There is also tool that allows user to see how CSS Masters really work.

CSSEdit provides real-time styling even if the Web App is powered by advanced AJAX or by complex database.

Another advantage of using CSSEdit is its actual previewing capability.

Figure 5: CSSEdit 2.6 Preview
As shown on the Figure, CSSEdit virtually removes two steps that are time consuming—uploading and refreshing—because it allows real-time previewing.
The X-ray tool allows user to locate exactly where the crucial elements are found on the page. The margin, positioning indicators and padding allow user to discover the intricacies as to how elements interact with one another. The CSSEdit also has Selector Builder that makes it possible for user to describe what particular elements to style in simple, plain English.