Just discovered an amazing bookmarklet from Aussie company Western Civilization, one of the original creators of CSS editing software. StyleMaster was always a little bit buggy processor intensive, expensive and complicated for me so I learned how to code CSS from scratch. I still think that’s the best way to write CSS.
But the modern web is getting so complicated that we really need a better way to look at web pages to be able to figure out how they are put together.
That’s the bookmarklet. (I’ve installed the Xray bookmarklet here as both an archive and an experiment to see if it will stand up to our new WordPress WYSIWYG Images code – frankly I recommend you get the latest version from the WestCiv site.)
Here’s what Xray looks like in action:
WestCiv’s Xray in action: very transparent, very attractive
The red outline is actually a mod to my Firefox
to show all no followed links or no indexed links all the time
Cultured Code’s Xylescope does pretty much the same thing as Xray but is a separate application. When it came down the pipeline Xylescope was a godsend. It saved me hours of CSS debugging each time I used it. You can use it to change your styles live on a webpage and see exactly what you want.
The limitation of Xylescope is that you can’t add attributes, you can only change the existing ones. So it’s really for analyzing and tweaking and not building.
Here’s what Xylescope looks like in action:
Cultured Code’s Xylescope, also a great looking application
Xylescope is the one which looks most like a 747 dashboard
Xylescope makes a strong case for 30″ monitors
CSSEdit on the other hand is good for building. You can add elements and attributes and comments and build up a stylesheet very quickly. I believe Macrabbit must have seen Xylescope and been impressed as he now as an X-ray solution of his own. It’s much more basic than Xray or Xylescope but it’s a good start.
Here’s what CSS edit looks like in action:
MacRabbit’s CSSEdit: simple Cocoa
While CSSEdit has a more straighforward Cocoa look, it’s the only
one in this group which will allow you to write stylesheets
Right now I am opening up my stylesheets in BBEdit but I should change that
At least one of the above applications is essential to a web designer or developer’s toolkit. Frankly I’d recommend owning all three of them (I do).
Xylescope – $20
CSS Edit – $30
The old free fallback for CSS analysis is Chris Pederick’s Web Developers toolbar for Firefox, but while the Web Developers toolbar was a breath of moutnain air when it first came out and can help in a pinch, it’s not a lot of use for fine tweaking and requires a lot of guesswork and typing.
Chris Pederick’s Web Developer’s toolkit – the original CSS design tool
Straightforward and essential but less flash than the other three
A bit of free SEO advice for Western Civilization: they should have called their bookmarklet CSS Xray or Xray CSS as the bookmarklet is basically outstanding linkbait. If they had done that they would have had all their incoming links with CSS in the anchor text. I don’t think the term Xray on its own will help them much. On the other hand, WestCiv are garnering a huge number of designcentric weblog links. I hope they write an article on how Xray has affected their rankings for their targeted terms.