Site updates
Testing New System now...

CSS Preview Help - Intoduction

So what's all this about?

CSS Preview lets you experiment with CSS. It provides a list of elements, and a set of controls for applying styles to these elements. It also provides tools for extra interactions with the document, like setting attributes, and viewing various pieces of information on a node.

Can I use it as a CSS editor?

CSS Preview doesn't currently have strong export features, so it is not ideal for an editor. Think of it more as a sketchpad for testing design ideas than a place for creating the final design. Also, it currently focuses on individual element styles, rather than the selector-and-stylesheet markup which is better for applying accross websites.

What's the history behind CSS Preview?

In the beginning, I was planning a sort of zoo of CSS styles, to test differences between browsers, and look for bugs. This was implemented as a set of pages with fixed tests on. This was upgraded to CSS Test, which had what could be described as usability issues...

From the original CSS Test webpage...

  Version 1 Version 2 Version 3 Version 4
NS 6 + , Mozilla Yes Yes Yes Yes
IE 5 + Yes Yes Yes (partial) No

If you're wondering how to use them, they're rather different to newer CSS Previews. First, you must set up your value, then press the button labelled with the right property to set the style. Yes, it's backwards, but easier to code... It takes hundreds of lines of JavaScript to make all the form controls play nice.

To look out for is the macro recorder in v3 and v4, accessible via Scripts... It was abandoned in later releases, because synching all the shiny new feature panels with a scripting languge would have been a nightmare.

A few minor adjustments have been made to the pages, to make them integrate with their new home. These include updating the locations of the CSS and images to their correct new homes.

Preview home - Preview manual