轻舟网络

We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors
now it’s time to take a closer look at applications for advanced
CSS-coding. Reason: while numerous HTML-editors offer more or less
advanced CSS-support there are also allround-CSS-editors which offer a
sophisticated integrated development environment for CSS-coding.

Of course, real CSS ninjas accept nothing but a minimalistic Notepad
or some sophisticated source code-editor. In fact, CSS-editors are
often considered to be unnecessary and superflous — after all, you can
do the same in your favourite text editor. And sometimes this is true —
while there are some really bad HTML-editors there are also
some even worse CSS-editors. Particularly code autocompletion tools are
extremely good at bloating the code to extremes, making the resulting
stylesheet unnecessary complex and hard to maintain. Why would someone
purchase a CSS-editor to raise the maintenance costs afterwards?

Yet CSS-editors can be helpful; furthermore, you can effectively use
them in different settings by developers with different skills. Web
professionals can use a CSS-editor to improve workflow and get all useful CSS-tools provided by one single application.
Newbies can easier learn CSS by analzying stylesheets and using
live-editing to understand how the design is built up and what is
actually going on behind the scenes. In either case you should make
sure you know what you are doing and not end up producing quick’n'dirty
stylesheet.

Why the heck do I need a CSS-editor?

Well, actually you don’t need one. But you may want to use one to make your workflow more effective.
The main advantage of CSS-editors lies in an integrated development
environement they offer to web-developers. The main task of a
CSS-editor is to combine the editing features of CSS-stylesheets,
HTML-source code and the site layout effectively within a compact
interface. However, often CSS-editors go even further.

Apart from coding functionality good CSS-editors offer assisting tools
for debugging and testing as well as useful features such as
live-editing, preview in different browsers, advanced code browsing,
code formatter, beautifier and compressor, validation, built-in
CSS-reference and project management tools. Combining these features
together you get an arsenal of useful tools all ready to hand in front
of you.

Some editors also enable you to organize parts of the code into
folders and filter the stylesheet easily which simplifies maintenance
and makes the source code easier to scan. Another useful feature is
instant style sheet preview with Internet Explorer or FireFox which is
hard to find in any “standard HTML-editor. Furthermore, with
CSS-editors it’s easy to analyze code problems using a code inspector
and decompose a stylesheet using the so-called “X-Ray” function.

To put it short: the main advantage of a CSS-editor is that it offers an integrated, compact environment
for CSS-design and enables a quick and effective coding workflow which
would require a dozen of external tools otherwise. So which CSS-editors
are available?

Xyle

Xyle (Mac)
This
advanced editor allows developers to edit web-sites on the fly using
the embedded stylesheet. Similary to Web Developer’s Toolbar you can
modify the CSS-code and the changes will be displayed immediately
in the browser window. Compared to Web Developer’s Toolbar, with Xyle
you have further useful features such as selectors tree view, syntax
highlighting and advanced file management.

Large preview

In Browser Mode you can browse the Web using Safari’s rendering engine. In Selection Mode, clicking into any part of the web page displayed will reveal the exact portion of the HTML and CSS sources that are responsible for the contents and formatting of that part.

In Cascade mode, Xylescope displays not only the style rules that apply to the currently selected element, but also all rules applying to ancestors of the selected element. When debugging, with

Xylescope you can simply select a “problematic” element in Cascade Mode
to see which rules are actually applied and which ones are overridden,
including those that are applied to ancestors of the

given element! Xylescope displays the specificity of selectors to
indicate why rules have precedence and dims overridden CSS properties
to improve clarity. Xylescope also offers integration with external
text editors such as BBEdit.

Price: $19.95. A trial version is available. A nice solution without
advanced features such as validation, compressor or beautiful offer to
an optimal price.

Some of Xyle’s features

• Automatic formatting
• Selector matching
• filter large CSS files using smart groups
• built-in DTD viewer

Stylizer

Stylizer (Windows)
Two
things make Stylizer a slightly different mindset than the others: it
uses a grid interface instead of a text editor, and it has Firefox and
IE embedded, so when the user changes the CSS, it’s propagated right
away to the browser. The grid system makes CSS feel like “CSS on
rails”, because it makes it impossible to have any CSS errors. It lets
Stylizer do things such as a Firebug-like element inspector that lets
the user diagnose and edit in the same place, and an editable,
spotlight-style filtering system.

In Stylizer dimensions can be adjusted on the fly.
To change a height, a margin, or a background-position, the user can
literally click on the value, drag the mouse around, and watch the
element be manipulated in real time. Colors are the same. The user can
click on them, drag the mouse, and see the color of the text,
background, or border change in the browser, in real-time, creating a
“Photoshop for the web” type feeling. Stylizer Basic is free. The
premium version (Price: $69.95) isn’t that different, however in a free
version it’s impossible to filter a style sheet to only show rules with
specified content.

Rapid CSS Editor

Rapid CSS Editor (Win)
This
editor supports developers with a syntax highlighting, autocompleter
and a code inspector which ensures that the produced code is correct.
You can use built-in CSS- and HTML-references to quickly look up the
syntax and attributes of a given selector or tag. A color tool enables
designers to pick the right color without switching to color
application and observe the result live using the Style Sheet Preview
with Internet Explorer and Firefox. A file manager can also take care
of uploading CSS-files via FTP. Furthermore, you can make use of an
advanced clipboard to keep multiple code fragments ready to hand. The
editor costs $29.85. A trial-version is available.

Some of Rapid CSS’s features

• Syntax Highlighting for CSS and HTML documents
• CSS Checker and Validator
• CSS Code Explorer
• Code Inspector
• Code Auto Complete for CSS and HTML
• Instant Style Sheet Preview with Internet Explorer or FireFox
• X-Ray for HTML preview
• Compliance with CSS standards and various browsers
• Integration with W3C CSS and HTML validators
• Built-in CSS Reference
• CSS Code Formatter and Beautifier
• CSS Code Compressor
• Search and Replace with Regular Expression support
• Search and Replace in files
• Multi Item Clipboard
• Built-in File Explorer
• Save and open files directly from FTP
• Project and site management and FTP publishing
• Fully customizable interface
• Code collapse

TopStyle

TopStyle (Win)
The
CSS-HTML-editor TopStyle is available in its Lite-version within the
HTML-editor Homesite — however, there is also a sophisticated full
version for professional web-developers. With TopStyle developers get a
number of features which aren’t available in other editors. For
instance, with integrated HTML-tidy you can easily convert depricated
HTML-tags in valid XHTML. The integrated Style update
replaces deprecated tags such as the <font>-tag with respective
valid CSS-rules. The Clip Library contains frequently used
code-snippets. A split window enables a direct browser-comparison
displays site presentation in Internet Explorer and Mozilla. You can
also vary the Doctype-definition to find out how different DTDs
influence the layout in different browsers.

Probably the most powerful tool in TopStyle is Style checker. Not only can it validate style sheets and hence ensure the correct layout presentation in different browsers. It can also predict bugs
in popular browsers which may appear despite the valid CSS-code. You
can also forward CSS-stylesheets to W3C CSS Validation Service to fix
the problems which haven’t been found by TopStyle. The full version
costs $79.95. Warning: the lite-version can’t be updated. Windows-only.

Some of Top Style’s features

• HTML, xHTML and CSS Editing in a Single Program: HTML attributes
  are categorized so you can quickly see which are required, and it
  generates XHTML-compliant markup with a simple toggle.
• Easy Navigation 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.
  You can even click on an < img > tag to open the image file in
  your favorite image editor.
• Element and Attribute Validation as You Type: All of the classes
  are defined in your style blocks and external style sheets, so
  assigning a class to an HTML tag is a very simple task.
• Style Checker: Validate your style sheets against multiple
  browsers, flagging any invalid properties or values it finds. You can
  also pass your style sheets directly to the W3C’s CSS Validation
  Service, so you can quickly check against the official CSS
  specifications.
• Style Upgrade: A quick, reliable way to replace all deprecated
  (outdated) HTML markup - including the long-abused HTML < font >
  tag - with equivalent CSS.
• HTML Tidy Integration: Make the move to XHTML painless with the
  built-in Tidy configuration, which converts HTML to XHTML with a single
  click!
• Site Reports: See at a glance where styles are used in your site.
  Find out where you’ve applied style classes that aren’t defined in any
  style sheets, or see what style classes you’ve defined that aren’t
  being used.
• Full Screen Preview: Split the preview between Internet Explorer
  and Mozilla for an immediate look at browser differences. You can even
  change the !DOCTYPE of each preview panel on-the-fly to see how
  different document type declarations affect your layout.
• Integration with W3C HTML Validation: Results of the validation are
  displayed within TopStyle, with hyperlinked line numbers that
  synchronize with TopStyle’s editor.

CSSEdit

MacRabbit CSSEdit (Mac)
Similarly
to XyleScope, CSSEdit offers real-time styling of stylesheets. Even
when a dynamic web-application is powered by a complex database or
makes use of AJAX, you can style and analyze it without the hassle of
uploading or refreshing (online and offline — this is not the case in
Web Developer’s Toolbar). Selector Builder lets you describe what
elements to style in plain English. Intelligent CodeSense analyzes CSS and CSS behavior to offer smart, context-sensitive suggestions.

Large preview

X-ray Inspector shows you what styles apply to a HTML-document. You
can also validate your sheets against W3C standards and use project
management tools (Milestones etc.) to improve your workflow. Among
other things CSSEdit automatically adds brackets, (semi-)colons and
appropriate spacing for you. If you encounter a style sheet from
someone who didn’t have that luxury, you can always do a Re-Indent to
apply your spacing settings. Besides, it has a live-preview feature and the clipboard library for frequently used code snippets.

There is an EditCSS plugin for Firefox as well as CSSEdit
bookmarklets. You can start editing any site’s style sheets with a
single click in your browser’s Bookmarks bar, and then use the advanced
CSSEdit’s editing. The tool has a beautiful, intuitive interface
which is very compact yet very well organized and nice to work with.
EditCSS costs 29.95 Euro ($47). There is also a trial-version available
for free download.

Some of CSS Edit’s features

• Selector Builder takes the Yuck out of selectors
• Organize in folders and filter easily
• Modify source code with intelligent CodeSense
• X-ray pages
• Live-preview
• Intelligent CodeSense support
• Project management
• Validation tool
• Integration in web-browsers

Style Master

Style Master (Win / Mac)
Since this WYSIWIG-CSS-editor
calls itself a master it needs to have some nifty features which let
the tools stand out from the crowd. In fact, Style Master enables both
newbies and professionals to create valid and semantically correct
stylesheets. The selectors can be grouped by alphabet, category or
current settings. The editor has an integrated color picker, various
templates, wizards and validation tools. Hence, the professional can
work easily and effectively while newbies don’t have to figure out
their way through CSS-tricks to create flexible CSS-based web-sites.

Quite surprising is the fact that various templates
which are by default integrated in the editor are actually useful —
that’s not the case in most editing applications. Hence you can simply
take over a CSS-skeleton and define the rules — all selectors are
already listed. You can also use a W3C-example-stylesheet which defines
the style of almost every possible HTML-tag, e.g. the leading of
headlines <hx>.

Style Master allows you to use online documents (and those running
on local servers) as preview documents. You can then use all the
features of the Design Pane, like X-Ray, to design
your styles sheets. The editor is simple, intuitive and clean. Price:
$59.99. Not cheap, however in the end you get an effective and powerful
tool for your daily routine. Style Master is available for both Windows
and Mac. There is also a trial-version available for free download.

Some of Stylemaster’s Features

• Browser support help
• Wizards
• Over 40 Templates
• Use X-Ray to instantly see the structure of your layouts
• Code optimization
• Intelligent code completion
• Whitespace formatting tools

Style Studio

Style Studio (Win)
Style Studio offers a powerful "CSS-Checker"
which enables both newbies and professional to develop standard-conform
CSS-based layouts. Developers can use a number of assisting tools such
as “Smart linker” which links multiple CSS documents to many HTML XHTML
/ XML documents at once and CSS Manager that manages and upgrades to
standard compliant code (tidy) and detects CSS-related problems.

The editor has an IntelliSense-like technology (for
both style sheets and HTML) with quick lookup-reference for CSS.
Property Watch automatically detects CSS property (or HTML tag if
you’re editing an HTML document) under caret and lists complete
information about it.

Style Studio costs $49.95 and is available only for Windows. The
official web-site offers a number of CSS-related articles, layouts and
tutorials.

Some of Style Studio’s Features

• Powerful customizable Syntax-Colored Editor with full search/replace/editing capabilities
• CSS Validator: a powerful css checking utility to detect and correct common css errors.
• Powerful CSS Manager to help you manage, upgrade to standard
  compliant code (tidy) and detect CSS-related problems in your web-site.
• Integration with over 35 HTML editors
• IntelliSense for style sheets and HTML
• CSS Property Watch and Instant help on css keywords under caret
• Multi files Import from HTML/Export in HTML capability
• Customizable CSS Code Indent
• CSS wizards
• Validate XML documents
• Intelligent parser which detect invalid properties as you type.
• Unlimited number of code snippets with custom hotkeys.
• Migration Wizard
• Automatically detect installed browsers/web-authoring tools.
• Formatting ToolBars which simplify the use common properties
• Easily change CSS values using Ctrl+Up/Down hotkeys.
• True multiple CSS charts support (i.e. target IE 4+ AND Netscape 4+)
• Built-in system-wide search and replace.

CoffeeCup

CoffeeCup StyleSheet Maker (Win)
CoffeeCup
StyleSheet Maker offers CSS-editing options which offer something
between sophisticated editor’s functionalities and basic editing
features. It resembles TopStyle yet clearly doesn’t achieve the same
level of flexibility.Using TopStyle you’ll also be able to overlap
text, create links that aren’t underlined, place image backgrounds in
tables, and even create your own tags with the functions you assign
them. Price: $34.00. A trial-version is available.

Some of CoffeeCup’s Features

• Includes CoffeeCup Website Color Schemer
• Easy CSS Font Designer, just select from the drop down menus.
• Step by Step Help for making your Style Sheets
• Multiple Browser Testing
• Edit, Save, and Open .css, .html or .txt documents.
• 50 Style Sheet Drop Down Tags
• Class & ID Wizard for Creating your own HTML Tags.
• Dynamic HTML Snippets included.
• Cascading Style Sheet Creation for Netscape and Internet Explorer 3.0+

EngInSite CSS Editor

EngInSite CSS Editor (Win)

If you would like to ensure the strictly correct CSS code which
complies with W3C-standards, EngInSite is definitely an option worth
considering. The main goal of the editor is to create strictly
standard-conform web-sites which pass the W3C validation test. The tool
has an integrated instant style sheet previewer, automated code
completion, syntax highlighting, integration with W3C HTML Validator,
integrated help system, built-in CSS Reference, customizable and
expandable code library and live editing feature.

You can also use a CSS Property Editor with dynamic shorthand
properties support and Selector Constructor - a convenient wizard for
the complicated selectors and various code tools, like
Expanding/Extract URLS, Convert Colors, Convert Code and so on. It is
possible to navigate across selectors, properties, comments and @-rules
and add / remove HTML-specific items like HTML comments and CDATA
section. Price: $39.95. A trial-version is available.

Some of EngInSite’s features

• Advanced, fully customizable text editor
• Integrated Instant Style Sheet Preview against HTML file of your choice
• Check your CSS syntax against multiple browsers
• Integration with W3C HTML Validator
• Compliance with CSS standards and various browsers
• Preview in the different browsers.
• Integrated help system and built-in CSS Reference
• Multiple style sheets editing
• Compatibility Check and Syntax check
• Search and Replace with Regular Expression support
• Customizable navigator with media rules support
• Visual editors for different data types
• Wizards for body, IE Scrollbars, lists and backgrounds

Jellyfish CSS

Jellyfish CSS (Mac)
Being
extremely simple and intuitive, Jellyfish CSS makes sure that
developers can edit CSS-styles easily and quickly. The editor has a
code library, Code-Sense support, browser support reference,
wizards and helps you avoiding mistakes (you’ll be informed immediately
by the program, if you have mistyped accidentialy). You can also use an
integrated Colorblender to create matching colour palettes. Price: 29,-
€ ($47). A trial-version is, of course, available.

Some of Jellyfish’s Features

• Code-Sense helps you avoiding mistakes
• Supports Mobile Profile 1.0
• Syntax-highlighting
• Codechecking while typing
• 3 different preview-types
• integrates extern Programs for a quick availability
• Style-Check with the W3C Validator and CSS-Tidy
• load CSS-files directly from thw www and work on them
• Codesnippets
• Wizards support you while creating Stylesheets
• Colourblender

Astyle

Astyle (Win)
Astyle
is a basic visual CSS-editor which offers exactly what one would expect
from a basic editing tool. No advanced features, however more than
essential editing tools. Astyle couldn’t really impress us with some
extremely useful features or sensatonal abilities. Price: $20.

Some of Astyle’s Features

• Visual easy-to-use interface
• Graphic tree-type view of attachment files and the CSS structure
• Grouped view of properties and selectors
• Automatic selection and grouping of CSS selectors from a markup language document
• Source CSS, HTML, XML highlight code editor
• Active preview current selectors and documents with IE and Mozilla support
• Clean up HTML document via CSS
• Icon associate dictionary
• Copy, Paste and Cut operations
• Drag and Drop operations

Further CSS-Editors

JustStyle CSS Editor (Cross-platform)
JustStyle
CSS Editor is a cross-platform editing application. Written entirely in
Java, it works on different platforms, such as Microsoft Windows, IBM
OS/2, Linux, Apple Mac OS, Mac OS X and others. You can edit the whole
CSS-file at once or select some fragments of it and edit them
separately. An integrated tool lets you integrate the CSS “on the fly”
in HTML-files. Although JustStyle CSS Editor offers only a minimal set
of features for CSS-development, it can serve as a quick tool for updating a CSS-file
outside your personal development environment. However, JustStyle won’t
be of any help in large corporate projects. UCWare offers JustStyle for
free download.

Simple CSS (Win)
Simple
CSS is another free editor for Mac, Linux and Windows. Single elements
which can be styled via CSS can be grouped and defined separately. The
preview-window enalbles designer to quickly check or tweak the produced
source code. Once the CSS-file is done you can click on “Export CSS”
and the file can be used for another project. Simple, easy and
intuitive.

CSSED (Linux / Win / Mac)
CSSED
is a CSS-expert for Linux. Although it delivers only essential features
such as syntax highlighting, syntax validation and autocompletion-tool,
it is highly extensible via plugins. For instance,
you can easily add the search functionality or a file browser. You can
find further plugins in the download area of developer’s site. Open
Source.

Eric Meyer’s CSS Sculptor (Win)
Eric
Meyer’s template-based add-on for Dreamweaver and Microsoft Expression
Web. You can choose from any of the 30 included layouts—and then modify
the design to the max: change the page width and position or number of
columns. It is also possible to specify margins and padding for any
page element along with type properties for paragraphs, headings and
link states. You can save your modified layouts as new presets to be
easily re-created or modified further.

Causeway CSS Editor
A
legend, a legacy and one of the first CSS-editors ever created. The
tool is unlikely to help you in developing CSS-stylesheets, but
definitely had to be mentioned in a review of CSS-editors.

Alternative tools

• Oxygen
  An XML-Editor with CSS-functionality
• Eledicss
  A CSS2 editor (GPL licensed) implemented as a server-side PHP script. It allows editing CSS files using a web browser.
• XMLSpy
  This editor includes a full-featured CSS editor to assist developers creating XML-based Web sites in XMLSpy.
• Firebug
  Firebug’s CSS tabs
  tell you everything you need to know about the styles in your web
  pages, and if you don’t like what it’s telling you, you can make
  changes and see them take effect instantly.
• CSS Layout Magic (Win / Mac)
  This
  Dreamweaver-plugin offers you a number of simple or advanced
  CSS-layouts. Works on Windows and Mac OS X systems running Dreamweaver
  MX. Price: $60.
• Web Developer’s Toolbar (Firefox Extension)
  The
  Web Developer extension adds a menu and a toolbar to the browser with
  various web developer tools. It is designed for Firefox, Flock and
  Seamonkey, and will run on any platform that these browsers support
  including Windows, Mac OS X and Linux.

  

• http://www.smashingmagazine.com