-
200704 Aug
Posted in Browsers
Struggling with the boxmodel sometimes? Need some help to figure out what the size of the element that’s troubling you really is? John Allsopp has created the perfect solution to this problem. It’s a bookmarklet called XRAY, And you’ll love it. Click on it once to activate it, and click a second time on any element to display it’s box model!
What’s cool about it too is that it uses some CSS3 as well, including box-shadow, border-radius (webkit only), opacity and rgba!
So go check out XRAY!
You can skip to the end and leave a response.
-
Comments
-
01.
marC says:Comment » August 4th, 2007 at 3:30 pm
i’ll rather use this:
https://addons.mozilla.org/en-US/firefox/addon/2104;)
-
02.
Is the box model really that difficult to understand? It’s just squares and rectangles around each other, inside each other, and sometimes overlapping each other with absolute positioning.
-
03.
Nox says:Comment » August 4th, 2007 at 8:59 pm
As it is now, I don’t really see any use for this. As it doesn’t have support for IE or Opera yet.
For Firefox you’re better of using an extension of your choice. Personally I prefer the layout tab in Firebug.“Is the box model really that difficult to understand?”
It depends on how you set up your layout (fixed vs. fluid etc.). -
04.
Thanks for the mention guys.
A coupel of things re firebug etc etc
1. It;’s great – XRAY is not meant to repalce it in any way, BUT
2. it is FF only (we do webkit and Moz now, and IE and Opera is a couple of says off – got it going internally, needs a little polish). When you debug the box model, having a tool that gives the same info across pretty much all browsers, seems to me potentially useful
3. It’s a bookmark, so no install, restart, and because the bookmark simply loads the logic externally, so if we update it no downoad, reinstall restart, you get the update next time you use the bookmark.
4. it’s lightweight – it does this one thing, so when your needs are debugging the box model, you click a bookmark wait a second or so, and then cick any element of on the page, and get box model information for it (offset as well as specified) right there in the window. Turning it off is just a click too.
Is the box model that difficult to understand?
Having developed CSS software, done oads of training, written many many tutorials and articles, and answered thouands of questions on newsgroups, forums, mailing lists, and in person, I’d say that as soon as you start doing anything non trivial, yes ;-)
thanks for the comments, and do give it a go!
john
-
05.
This tool looks interesting. Yet I tested it only quickly and found a bug within seconds: it doesn’t work at all if you try it on an xhtml site. Well, this is not a critical issue but at least somewhat annoying. ;)
The tool window is nice to quickly check if things go well or not. I think it might be a nice enhancement if it could display other properties as well, for example border values, styles, fonts. But in fact that would raise the question if it shouldn’t be an actual browser function in the first place, if it’s generally very useful?
-
06.
Thaks Kaikiana,
got a url I can test with?
Re other properties – that is planned, but most likely with a related bookmark, rather than one mega bookmark – in fact, I have a number of tools planned or in development along the same lines, that will also work together.
Thanks again,
john
-
07.
anonymous says:Comment » August 5th, 2007 at 3:22 am
Just wanted to say that is one slick bookmarklet. FYI it works like a charm in SeaMonkey 1.1 too.
-
08.
Nox says:Comment » August 5th, 2007 at 3:45 am
@john
I agree with what you’re saying. I just meant that if you’re a web designer and you use Firefox, then you probably already have Firebug or a similar extension installed.
Anyway, it’s good to hear that an IE compatible version can be expected soon and I will definitely use it.About bugs, when I first tested it it would sometimes select the canvas instead of the element I intended to select. Also the margin and padding would sometime not show. Though it seems to be working just fine now, did you fix the script or was the problem on my end?
As for an url, one of the sites was the xray site itself, using Firefox 2.0.0.6.
-
09.
Iron_Storm says:Comment » August 5th, 2007 at 5:20 pm
I find very usefull Opera Web Developer Toolbar, which seems to do the same job even better (only in Opera; well this is only for FF)
Opera users probably know http://operawiki.info/WebDevToolbar :-) -
10.
I do not understand why people compare this to Firebug? It’s a totally different tool and very useful! It doesn’t only work in FF, it runs perfectly in Safari/Webkit also and will there even sport rounded corners. Check this screenshot to see for yourself:
http://www.motherocean.no/index.php?option=com_content&task=view&id=11&Itemid=1
I really love this tool and use it all the time!
-
11.
-
12.
[…] css3.info habe ich gerade ein Tool namens Xray gefunden gefunden. Es schaut auf den ersten Blick sehr […]
-
13.
viagra cialis levitra clomid buy viagra onli generic viagra http://www.parzufim.com cipro gay viagra buy viagra online cheap viagra
free viagra
herbal viagra
propecia xenical viagra side effects buy viagra zithromax lasix female viagra cream cheapest cialis http://www.parzufim.com
-
01.
