MRI and xRay for CSS!! What?

Well, 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.


One thought on “MRI and xRay for CSS!! What?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s