Timothy Khouri - SingingEels.com

I subscribe to the "take it apart and rebuild it" approach to learning.

IE7 Dev Toolbar = Great CSS / Semantic Markup Tool

I know there are a million toolbars out there (every FireFox user will remind you so)... but I still love the simplicity and functionality of the IE7 Dev Toolbar Beta 3, and especially one of it's features that really help with CSS and semantic markup design - "Disable -> All CSS".

A "Pure CSS" design first requires good markup... so, the way you can tell if you're markup is good is by disabling all CSS styles with the dev toolbar. Here is an example of how a Pure CSS designed site will "degrade" into a proper way when you disable CSS. You can see how to do a pure CSS design from this article (How To: Pure CSS Design) which is where these images below come from. Notice how the web page below degrades.

Webpage with CSS styling:
A web page with a CSS layout and design with a right-side bar

After disabling CSS:
A plain web page with no styling applied

Posted: Sep 18 2007, 09:13 PM by Nullable | with 6 comment(s) |
Filed under: , ,

Comments

Joe Chung said:

It's not a beta any more, is it?

# September 18, 2007 10:34 PM

Nullable said:

Yeah, I guess it's not called "Beta 3" anymore... usually dev toolbars are always called a beta because it's not really a production product, and they are always adding features to them.

# September 19, 2007 9:44 AM

Dylan Berry said:

I'm put-off by this entry. I'm a FireFox user because it is a better browser with better available developer tools.  Microsoft still has a lot to learn about the web and I believe IE7 and the Web Developer Toolbar are shining examples of how narrow-minded MS is about the web.  The Web Developer Toolbar might be more appropriately called "Web Designer Toolbar".  Try FireBug and the Web Developer Toolbar for FireFox, there's no comparison.

# September 20, 2007 12:47 PM

praveen said:

hey can anyone help me how to get the properties of a grid in a website.im want to automate the test on the page using c#.net

# February 7, 2008 4:44 AM

acyment said:

Using Lynx or a screen reader is also a great alternative to this. You get both a findability and accessibility review at the same time!

# April 30, 2008 3:53 PM

kaefee said:

IE "Developer" Toolbar, I think that Microsoft have no idea what is a web developer.

# January 18, 2009 5:11 PM