HomePreparing your CSS for Internet Explorer 7
Later on this year Microsoft will officially release Internet Explorer 7. If you can't wait until then, you can download a beta version and see how it works. Microsoft has hinted that when IE7 is officially released they'll be looking to quickly upgrade users from IE6, so it's essential that your website is prepared for this new browser.
You can also grab a screenshot of your website on Internet Explorer 7 using a service such as Browsercam. Although this will only provide you with static screenshots, it'll save you having to download IE7 and will mean you can keep using IE6 on your computer.
When looking at your website in Internet Explorer 7, you may notice a few things look different or even that the layout is totally broken. This will almost certainly be due to a number of changes that have been made in IE7 from its predecessor, IE6.
Internet Explorer 7 will understand the child selector
Historically, one of the easiest ways of hiding CSS rules from Internet Explorer is to use the child selector. To date, Internet Explorer hasn't understood the child selector so will totally ignore any CSS rule that uses it. Internet Explorer 7 will however understand the child selector.
The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.
If you wanted to send a different width value to IE than to other browsers, you could have used the following:
#foo {width: 400px;}
html>body #foo {width: 300px;}
Historically, the first CSS rule would have been just for IE and the second for every other browser. Now, the first CSS rule is for IE6 and previous versions and the second for IE7 and non-IE browsers.
Internet Explorer 7 won't understand the star html hack
The star html hack worked in the opposite way to the child selector, in that any CSS commands that use this hack are only seen by Internet Explorer. So, to send commands only to Internet Explorer (including IE on the Mac), you can use:
* html #foo {width: 400px;}
The * essentially means a wildcard (i.e. it refers to any and every element). The above rule will apply to any element assigned id="foo" that's nested within the <html> tag (which of course it will be), which is itself nested inside any other HTML element.
Huh? Surely the <html> tag can't be nested inside another tag!? Well, no of course not... but Internet Explorer 6 and before disagree and will actually obey the above command. Internet Explorer 7 will however (correctly) ignore the above command, along with all other non-IE browsers.
XML prolog won't force quirks mode
There are currently two ways of declaring the ISO value in HTML files. One of them is to place the XML prolog on to the very top line of each HTML file, directly before the doctype declaration. Declaring it this way means that the first three lines of each HTML file might look like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(The first line is the XML prolog; the second and third lines are the doctype declaration.)
By not having the doctype declaration on line 1, Internet Explorer 6 reverts to quirks mode (despite the fact that the above HTML code is perfectly valid). Internet Explorer 7 however will not revert to quirks mode, and will instead render the web page in standards mode. (You may wish to read more about quirks and strict modes, if you haven't heard of these terms before.)
There are a number of differences between quirks and strict mode, so if your site uses the XML prolog then you may see quite a contrast in how it looks on IE6 (quirks mode) and IE7 (strict mode). One of the main differences between the two modes is that the box model is incorrectly calculated in quirks mode (in quirks mode, the padding and border are placed inside the content area, thereby reducing the amount of space available for the text).
Filtering / hacking to Internet Explorer 7
Your website may end up looking very different (or even illegible) on Internet Explorer 7 compared with other versions of IE and also non-IE browsers. On top of this, the two hacks traditionally used to hide from or show exclusively to IE (child selector and star html hack) won't work anymore! What to do!?
Microsoft are suggesting that to filter CSS commands from/to Internet Explorer 7 you use conditional comments. You'll need to create a CSS file for any Internet Explorer 7-only commands and then use conditional comments to send this CSS file only to this browser. To do this, you'll place the following code into the header of each HTML file, after the command calling up the main CSS file:
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->
The only commands you need to place into this extra CSS file are those which will override commands in the main CSS file. You don't need to duplicate commands across the two CSS files as IE7 will also read through the main CSS file. Do also note that conditional comments can only be placed inside HTML files and not CSS files.
CSS Improvements on Internet Explorer 7
The good news is that Microsoft has made a number of CSS bug fixes to Internet Explorer 7, so much of the weird behaviour in Internet Explorer should cease.
Internet Explorer 7 will also have increased support for more CSS commands and rules, most notably that :hover will work on all elements (currently it only works on links in Internet Explorer). This means that you can make CSS dropdown navigation menus in Internet Explorer 7 without any JavaScript. Non-IE browsers have supported the use of :hover on all elements for a long time.
Conclusion
Internet Explorer 7 will be officially released very soon and there will almost certainly be a quick upgrade to this version. Once the browser has been officially released expect the number of site visitors using IE7 to increase very quickly. Make sure your website is ready.
This article was written by Trenton Moss. He's crazy about web usability and accessibility - so crazy that he went and started his own usability and accessibility consultancy (Webcredible) to help make the Internet a better place for everyone. He knows a lot aboutaccessible web design and likes to conduct a website review as often as he can.
09 dec 2003 - 13
]
[
]