Gradients, behaviors and conditional comments in a strict world

In previous articles, I chronicled how I took the msn.com homepage from its current implementation of invalid markup and style to valid XHTML Strict and standard CSS. From the perspective of an IE 6 user, however, the final result is (arguably) less appealing than where we started, for we lost some of the IE-only enhancements. In this article, I will enhance the XHTML Strict page with behaviors (IE enhancements to the scripting standards) and gradients (IE enhancements to the style standards).

*Note: *These enhancements will be implemented in a way that does not break validation or require server-side conditional code.

Adding gradients

I will create a separate CSS file for IE 6, and add styles that are specific to IE’s CSS enhancements here. There are numerous things I could do here, but for purposes of discussion (and to create an experience that is consistent with the msn.com t a consistent visual effect without having to add new styles for the generic case.

Adding behaviors

Here is the simple behavior that I’ve created for the purposes of this article. It simply creates an alert when the document is loaded in IE 6.

1. <public:component tagname="special" lightweight="true">
2. <public:attach event="ondocumentready" onevent="doReady()" for="element" />
3. <script type="text/javascript">
4. function doReady() {
5. window.alert("This alert was created from an IE behavior!");
6. }
7. </script>
8. </public:component>
9. Download this code: /code/gradients_01.html

Once I’ve created the htc file, I can apply the behavior to an HTML element on the page via the stylesheet, with a rule such as the following:

1. body
2. {
3. behavior: url(foo.htc);
4. }
5. Download this code: /code/gradients_02.css

Conditional comments in IE

So now that I have a stylesheet that contains my gradients and my behavior, all that remains is to bind the stylesheet to the markup. I’ll do this using a link tag, of course, but I’ll surround the link IE’s conditional comment. IE 6 will ignore the comment in this case and apply the style, while other browsers (and validators) will simply interpret this entire block as an HTML comment and ignore it completely.

1. <!--[if IE 6]>
2. <link rel="stylesheet" href="/css/msn-strict-ie55.css" />
3. <![endif]-->
4. Download this code: /code/gradients_02.html

More information on conditional comments can be found in this MSDN article.

Final result

The final page that shows the implementation of these gradients and this behavior successfully passes both XHTML and CSS validation. We’ve approached the development of this functionality from a core of standards, and simply enhanced the core in a safe and predictable way that allows us to leverage IE’s enhancements without sacrificing standards-compliance.

Next post (newer)

Now hosted by TextDrive

Previous post (older)

Browser release history