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
Previously I used two Mac OS X desktop applications to help with this. Xylescope and CSSEdit. 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).
Xray– free 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.