Recently I came across with a very interesting things – 3D DOM (document object Model) view of a web site. This is an excellent feature that enables the multiple level structured view of a Web Site. As a Web Developer / Designer, this can brings an incredible flexibility to view the site structures, element hierarchies and web site layers.
You can achieve this by using the Firefox developer toolbar. To start the 3D view, you need click in 3D view icon after launch the “Developer Toolbar”.
Fig: 3D View Icon Selection from Developer Toolbar
Fig: 3D View of Daily.NET Tips web site
This 3D view technology can be very useful to debugging and optimizing the layouts such as
- If any tag is closed / misplaced.
- Some object are not appearing in web site may be because of some z-index
- some unnecessary tag elements
I found an excellent introductory video on 3D view of web site, check this out.
Seems this features was introduced with Firefox version 11, but to be very honest I was unaware about this. When I was discussing this with few of my friends, they seems liked it very much and for few it was new too. So, it may be known to many of you, but few might found interesting, thus sharing here!
Hope you will like it !