We are now actually talking CSS, so I wanted to talk about the design verification process and the behavior of modern browsers in a little more detail.

Web Development Best Practices

Use a Modern Browser to Verify Your Design

The most effective approach for developers designing from a standards perspective is to verify the design in a standards-compliant browser. For this course, we strongly suggest using Firefox. Be sure to view the webpage in various modern browsers Open in a New Window to ensure that the webpage is being correctly and consistently rendered across a sampling of modern browsers.

Validate your Webpage

This is a very important step. Validate both the markup and the style sheet(s), in that order. Do not validate the CSS unless the markup passes HTML validation.

You are required to validate your webpages before submitting them for review. Please do this diligently. We will be validating your webpages as the first step in grading your homework, and validation errors will garner a heavy penalty!

The Web Developer Toolbar (WDT) for Firefox features tools for validating your (X)HTML markup and CSS. Be sure to install the Web Developer Toolbar Open in a New Window. Once installed, refer to this page Open in a New Window to learn how to use the many tools in the WDT, starting with the validation tools.

Implement Fixes for Non-compliant Browsers

Once the design has been verified on various modern browsers and passes HTML and CSS validation, implement any fixes required to work with non-compliant browsers. Do not proceed to this step until you have thoroughly verified your design in a variety of modern browsers, and have validated your code. Only then should you add any browser-specific tweaks. After implementing required tweaks and hacks, be sure to validate your code, and thoroughly test your webpage on a comprehensive array of browsers.

Modern Browsers vs Non-compliant Browsers

Behavior of Modern Browsers

Last week, I stated that standards-compliant web designs must be viewed using a standards-compliant (aka modern) browser. It's obvious that the browser must be able to properly interpret CSS in order to render a page correctly.

However, just as important is how the browser behaves when it encounters invalid CSS in the webpage. Standards compliant browsers are supposed to ignore invalid invalid declarations in rules; that is, if the CSS is not valid then the browser does not apply the declaration. For a designer, this is a good thing—it makes it easy to detect a rule that is in error, because it is not being applied. It gives the designer an opportunity to fix the error. If there is an error in the CSS, the browser is supposed to ignore just that rule. But depending on the error in the style sheet, it is possible that all following rules are also ignored because the error in the style sheet is so severe.

Behavior of IE5/Win & IE6/Win

For this course, we discourage you from using IE5&6/Win to develop and verify your web designs.

Why would we recommend this when estimates indicate that approximately 50% of users are viewing the web with IE6?

The fact is, IE5&6/Win do not follow the standards, causing issues for web designers, particular for designers who are new to CSS. First, IE5&6/Win do not render certain CSS properties properly, forcing designers to implement IE hacks. The IE box model anomaly Open in a New Window is a conspicuous example.

Worse, IE5/Win & IE6/Win do not ignore markup/CSS errors. They interpret the markup/CSS and make assumptions as to what the developer intended. This is a bad thing because the developer may not detect an error in the web page, and will naturally assume that everything is perfect. The erroneous CSS might be rendered in IE, but a CSS error will be dutifully ignored by modern browsers.

This makes a case for developing in a 'gold standard' compliant browser, and then viewing/fixing the design for non-conforming browsers ... and for testing in multiple browsers. IE hacks are outside the scope of this course—our focus is to generate valid, compliant designs—you will not be required to verify your designs in IE.

IE7/Win

Microsoft has taken a huge leap toward standards-compliance with the release of IE7 which is considered a modern compliant browser. The IE7 team aspired to adhere to the standards, and they have made tremendous progress in that regard. Nevertheless, users and developers are reporting discrepancies in IE7's rendering engine. IE7 is clearly a work in progress, and Microsoft has a bit of catching up to do in the standards game (smile).

Resources