A standard MSN homepage, part II: valid CSS

In Part I of this series of posts, I took the MSN.com homepage from invalid markup to valid XHTML 1.0 Transitional, enabling browsers to use standards-compliant instead of quirks-mode rendering. The end result of the changes we made in part one was this document, which displayed quite differently than the live MSN.com homepage, because the styles were created and tested using quirks mode. This post will walk through changing the stylesheet to valid CSS that can be provided without alteration or browser detection to any standards-compliant browser for consistent and predictable styling.

The baseline CSS

I created a baseline CSS file as a starting point to work from. This file includes the styles that were provided to IE 6 for Windows on August 27, with the following changes:

• MSN.com delivers these styles through two separate CSS files: css-font.css and home-ie6.css. I combined these two files into the single baseline file in the same order that they are linked to the HTML document.
• I added whitespace (carriage returns and tabs) for increased readability.

I also created a valid XHTML 1.0 Transitional document to start from, and linked to the new, standards-compliant stylesheet using the @import directive in the stylesheet that is linked to the document. Although this adds one small css file to the client files, this approach ensures that legacy browsers ignore these styles, since the chance of a successful, stable and predictable rendering of these styles is unlikely in these older, outdated browsers.

Getting to valid CSS

In order to provide one stylesheet to all browsers, it’s important to first get to valid styles. The valid CSS file was easily created by simply using the CSS validator and correcting the errors that the validator reported until no errors remained. What follows is a brief discussion of these changes.

Include last-resort fonts in font styles

There are five classes of generic fonts that should be specified when defining font-family style rules. These generic fonts serve as a last resort for styling the document’s text when the user does not have the desired fonts installed. The five classes are:

1. serif, used as a generic font for serifed fonts like Times Roman
2. sans-serif, used as a generic font for san-serif fonts like Helvetica
3. monospace, used as a generic font for fixed-width fonts like Helvetica
4. cursive, used as a generic font for swash font faces like Zapf Chancery
5. fantasy, used as a generic font for other hard to characterize fonts like Grunge or Western

Several places in the stylesheet, these fallback fonts were not specified, and the fix was to simply specify them.

Remove Browser-Specific Properties

The filter property is used by MSN.com for providing image-free background gradients in various headings, as follows:

1. .or .dt, .or .dtr, .or .dtl
2. {
3. filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#cc6600, endcolorstr=#e4af79);
4. }
5. Download this code: /code/msn/part2_01.css

Since this is a Microsoft-specific style property and not part of the CSS Standard, it does not belong in a standards-compliant CSS file. However, simply removing these gradients will require some rework of the design, since the stylesheet as authored assumes they’re present. A perfectly safe substitute to the filters (with a slight loss in the visual impact of the design) is to substitute the gradients with simple background colors. We can revisit this later, but the point for now is to get to a valid stylesheet, and substituting background colors for filters help get us there quickly. So styles such as the one above were substituted like so:

1. .or .dt, .or .dtr, .or .dtl
2. {
3. background-color: #cc6600;
4. }
5. Download this code: /code/msn/part2_02.css

Fix Actual Errors in the CSS

The validator did point out two actual errors in the CSS file, which needed to be fixed. The stylesheet included this style, which is actually a bug, since there is no such thing as negative padding:

1. .date
2. {
3. padding: -5px 0px 5px 0px;
4. }
5. Download this code: /code/msn/part2_03.css

To fix, I updated the style to this:

1. .date
2. {
3. margin-top: -5px;
4. padding: 0 0 5px 0;
5. }
6.  
7. Download this code: /code/msn/part2_04.css

The stylesheet also included styles like this, which can also be considered bugs, since the unit of measurement should always be specified when defining sizes or dimensions.

1. .fd
2. {
3. height: 20;
4. }
5. Download this code: /code/msn/part2_05.css

To fix, I simply updated it like so:

1. .fd
2. {
3. height: 20px;
4. }
5. Download this code: /code/msn/part2_06.css

Sidenote: There is one and only one case when you can save a few bytes by not specifying the unit of measurement: the value of 0. This should be obvious, since 0px will always equal 0%, which will always equal 0em, and so on.

The validator also pointed out a problem correctly interpreting the following rule, since it is not specific enough for the shorthand syntax of assigning font properties.

1. .mhr a
2. {
3. font: bold .9em;
4. }
5. Download this code: /code/msn/part2_07.css

This is simply fixed by updating with the original intent:

1. .mhr a
2. {
3. font-size: 0.9em;
4. font-weight: bold;
5. }
6. Download this code: /code/msn/part2_08.css

Finally, rules that defined cursor: hand; were removed because hand is not a standard-supported value for the cursor property, it is an extension to CSS implemented by IE.

Update: if you’d like to learn how to give IE extended styles like this without falling into validation problems, check out my post on conditional comments.

The end result: valid CSS

That’s it, we’ve now got a valid CSS file and a valid XHTML 1.0 Transitional document that points to it. Unfortunately, as you can see, it’s very easy to write documents and stylesheets that pass validation but do not render as we intend them to. Note: the reason we’re seeing a different visual rendering at this point is because the styles were originally written and tested against quirks-mode instead of standards-compliant rendering. In part III, we’ll work through the corrections that are needed to achieve the desired visual experience.

Next Steps

In part III, we’ll get to standards-compliant rendering by revising our CSS so that it’s valid against the W3C, which will yield predictable rendering across today’s standards-compliant browsers.

Next post (newer)

A standard MSN homepage, part III: consistently interpreted CSS

Previous post (older)

A standard MSN homepage, part I: valid XHTML 1.0 Transitional