Developing for IE 7

February 27, 2007

By: Andrea Butterworth of BraveNet.com

Hey guys! Last month I talked a bit about IE conditional comments and now I’m going to expand on that a bit further as they can be very useful. Conditional comments only work in Internet Explorer on Windows and can therefore be used to give special instructions to IE browsers.

The scenario that I described to you last month involved detecting IE6 to serve it a different stylesheet than IE7 or Firefox or what-have-you. As you begin developing for IE7 you may see things working the same as they do in Firefox. Don’t be fooled. You still need to be checking both browsers as IE7 is an improvement but is not fully ‘fixed’. In addition, most browsers - aside from IE - support more advanced css selectors. One thing IE7 has remedied is their problem implementing ‘* html’ and ‘!important’ in a stylesheet. ( more on these and other IE6 hacks here).

Firstly let’s look at things as though we have two categories: IE browsers and everything else. I’ve just moved my IE6 hacks into a separate stylesheet and am calling it when IE6 is my users’ browser. It is important to set up my hacks as overrides. Because stylesheets ‘cascade’ in the order they are called, the rules from the last stylesheet loaded will override the same ones called previously.

So I call my base stylesheet no matter what the browser is. This stylesheet is the one that is valid and takes advantage of the CSS2 selectors. Next, using IE’s ‘conditional comments‘ I assign a stylesheet to IE6 and lower which overrides or sets new styles for IE only. Then, of course, I assign a different stylsheet when it is IE7 browsing my page. Luckily, Microsoft has made a lot of improvements to their browser and this stylesheet should be very short.

First, let’s look at the comment structure:
[code lang="php"] < !--[if lt IE 7]>the stuff< ![endif]-->[/code]
The part between the first set of []s is called the conditional block. In this example it says if ‘lt’ which means ‘less than’. So if the IE browser version is less than version 7. Do ‘the stuff’.

[code lang="php"] < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html lang="en">
< head>
< title>Conditional Comments< /title>
< link xhref="base_for_all.css" mce_href="base_for_all.css" rel="stylesheet" type="text/css">
< !--[if lt IE 7]> < link xhref="ie_6_and_below.css" mce_href="ie_6_and_below.css" rel="stylesheet" type="text/css"> < ![endif]-->
< !--[if IE 7]>< link xhref="ie_7.css" mce_href="ie_7.css" rel="stylesheet" type="text/css"> < !--< ![endif]-->
< !--[if !IE]>–> < link xhref="not_ie.css" mce_href="not_ie.css" rel="stylesheet" type="text/css"> < !--< ![endif]-->
< /head>
< body>
< p>Test< /p>
< /body>
< /html>[/code]

In the above example, base_for_all.css applies to all browsers, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, and ie_7.css applies to IE 7 only.

Well you are all setup now guys. It is unfortunate that we have to add extra markup to our code in the form of these conditional statements, but at least it will degrade gracefully.

Now how about Firefox?

The Firefox Browser is now the flagship product of the Mozilla open source project, and is the darling of web developers. If it is not yours, you should consider trying it out. Why? Well that’s what this article is about.

What do you say we skip past the history of the organization, and how it is developed by an open source community of developers and testers, and get to some of the cool stuff - the add-ons.

I’m going to show you all of my favorite Firefox add-ons. I can’t show you all of the add-ons out there because there are thousands, but these ones make my life a lot easier:

#1 - Web Developer by Chris Pederick: This thing rocks! It adds a toolbar to the browser that is loaded with features to help you develop for the web! Things like outlining various html elements on the fly, enabling and disabling styles, resizing the browser window to various standards, validating your pages, it has a built in ruler tool, options for images, forms, cookies - you name it!
#2 - ColorZilla by Alex Sirota: Super little tool that sits tucked in a little corner and when you click on it you can sample any color on the web page and copy it to your clipboard. Did I use the right blue on those links?
#3 - MeasureIt by Kevin Freitas: Love it! This thing makes my life so much easier. It allows you to draw a box on the page and measure it’s dimensions. I also find this tool invaluable for making sure things are aligned properly.
#4 - Firebug by Joe Hewitt: This one? Sooo good. You can edit, debug, and monitor CSS, HTML and Javascript live on any webpage!
#5 - IE View by Paul Roub: This inconspicuous little add-on lets you load pages in IE! Perfect for cross browser testing!
#6 - HTML Validator by Marc Gueury: This little guy puts a green checkmark at the bottom of your browser if the document validates. If it doesn’t, it shows warnings and errors with a click so that you can hurry off and fix them.
Lucky #7 - SeoQuake by The SeoQuake Team: This extension gives you a ton of information on your page including Google page ranking, Alexa ranking, showing keyword density and META tags, it allows you to see backlinks and so much more! Quite a handy little thing.

Now here’s the skinny folks. I have ALL of these installed on my browser. They are so well done and inconspicuous that you probably wouldn’t even notice I had them there! They don’t slow anything down… they speed it up!

And that’s why developers love Firefox, oh and because they have excellent CSS support, security measures, are standards compliant and and …read more and download it too!

Click here to view: Web Design Articles | Web Hosting Articles | Search Engine Articles | SEO Articles |