hints & tips // 2007.09.25 08:51:28 [hh]

"Xray": Röntgen für CSS

Mit "Xray" bietet Western Civilization (Anbieter des CSS-Editors "Style Master") ein Bookmarklet für "Internet Explorer 6" (und neuer), "Webkit"- und "Mozilla"-basierende Browser (d.h. "Safari", "Firefox", "Camino" oder "Mozilla"). Nach Klicken in das Bookmark zeigt das Tool ein kleines verschiebbares Inspektor-Fenster und dann nach Klicken in Seiten-Bestandteile die Vererbungs-Hierarchie und assoziierten Werte der Elemente, IDs oder Klassen.

Fragen und Antworten

What is "Xray"?
XRAY is a free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.
Just click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box?
Use the arrow keys to XRAY an element's parent, siblings, or children too.

What Platforms And Browsers is "Xray" Available On?
XRAY currently has been tested on Safari 2 and 3 on Mac OS X, Webkit nightly builds, and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows, and most likely Linux as well. XRAY now works with Internet Explorer 6+ on Windows.
At present it won't work with Opera: plans are afoot to adapt it for Opera, rest assured.
XRAY works in Safari 3 on Windows, but in this browser clicking a bookmark does not fire any Javascript it contains. At present, to use XRAY on Safari 3 for Windows

  1. Install the bookmarklet as you would normally
  2. Load any page
  3. Paste the XRAY link from the bookmark into the address field and hit return

What is new in version 0.91a?
he latest version, 0.91a, adds support for Internet Explorer 6+ for Windows, displays information about an element's borders, and allows you to move around the document with arrow keys. Use the up, down, left and right key to XRAY the currently selected element's parent, first child, and previous and next siblings.

How is "Xray" licensed?
For the moment, XRAY is copyright Western Civilisaiton Pty Ltd. Once the code base has been bedded down we aim to open source XRAY, under an appropriate license or licenses. Please feel free to poke around, make suggestions for fixes and features, and so on. I've tried to keep the code very simple and obvious, so it is far from compact or high performance.

What has "Xray" Got To Do With "Style Master"?
Style Master has a set of features we call 'xray' for visualizing how your CSS and HTML work together. This online version grew out of recent development work on features for Style Master 5. We felt the features were so useful, and downright exciting, that we wanted them to be more widely available than to just Style Master users. Hopefully you might like to take a look at Style Master at some stage, but above all we hope you find XRAY useful.

Aren't there other "Xray"'s out there?
The metaphor of an XRAY for peering beneath the surface of something has been round since the discovery of x-rays in the late 19th century.
In 2004 we started developing the 'xray' features of Style Master 4.0. Future versions of xray in Style Master will be strongly influenced by this work. Since 2004, browsers have come a long way, enabling us to develop something as sophisticated as XRAY, and deliver it to most contemporary browsers on most platforms.
Since we released Style Master 4, other applications have implemented features called 'XRAY' along the same lines. We are very much of the attitude that imitation is the sincerest form of flattery. In addition, there has long been an excellent utility application for the Mac OS called XRay by Rainer Brockerhoff. Think of it as being like the finder's Get Info on steroids.
Further, Apple in 2006 announced a new feature in Leopard (Mac OS X 10.5) called Xray, for debugging Mac OS X applications.

Weitere Informationen: xray