CSS diagnostics with XRAY and MRI
Several tools that help troubleshooting CSS are available. Some come with the browser, like the Web Inspector in Safari, while others are plugins or extensions, like Firebug or the Web Developer Extension.
There are occasions where you can’t or don’t want to install an extension though, and that’s where John Allsopp’s two bookmarklets XRAY and MRI come in handy.
XRAY lets you inspect the properties of any element on the page by opening a floating palette that displays the element type, id, class, position, size, border, margin, and padding of any element you click on. It also displays the element’s inheritance hierarchy.
MRI opens a similar floating window and has an input field where you can enter a CSS selector. When you click the MRI button, MRI highlights the elements on the page that are matched by the selector. MRI also works the other way around. Click anywhere on the page and it will suggest CSS selectors for the element you clicked on.
XRAY and MRI are obviously not as feature rich or advanced as extension-based tools, but they do have their use. The plan is also to make them work in all contemporary browsers, not just Firefox.
John writes a bit more about the bookmarklets in Introducing XRAY for your browser and Introducing MRI.
- Previous post: Mac OS X 10.5 Leopard improves accessibility
- Next post: Job opening for an ASP.NET developer in Stockholm
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Awesome tool. Thanks for pointing it out.
I am sure most of your readers are hip to MacRabbit's CSSEdit.
It is the best for tracking down those mystery styles!
I still worship Firefox's webdeveloper addin, both for the css edit and outlines / display element information functions.
And Mike, I've looked at CSSEdit and it looks amazing, apart from me not having access to a mac... :)
Sure, lovely bookmarklets...
For Firefox I still prefer firebug and webdeveloper plugins, but I think that the power of these bookmarklets will be the cross-browser functionality.
just FYI: the above comment (by sam g.) is most likely spam. I saw a very similar comment on TechDirt earlier.
On-topic: Yeah, those are very nice tools indeed :D
Nice. Thanks Roger. I grabbed Xray.
I really like CSSViewer which is a Firefox extension.
I've been using Aardvark for FF for a long time. I don't know how I'd get along without it!
I find Allan Jardine's Grid to another winner. And unlike the above, it actually works in Opera.
If these bookmarklets worked in IE, they'd be pretty helpful. For Firefox, you just can't beat Firebug :)
Those 2 are very very helpful especially in IE!
It simply rocks!
thanks.
Sorry, comments are closed for this post.