Implementation advice

Best practice development techniques

The following are general best-practice techniques for creating robust, cross-browser compatible web resources (websites and web applications):

1. Develop according to the specification for the technology being used. In other words, where possible develop to International web standards and use open formats.
   1. Ensure all code validates. The way different browsers interpret invalid code is far less consistent than the way they interpret valid code. This technique reduces the chance of unintended effects in browsers that have not been tested.
2. Develop in order of technology layers – content layer first, then presentation and finally behaviour. If the product is functional before adding the next layer then it will degrade gracefully for a wide range of devices and situations. This technique also promotes re-usable code and content ⁶.
3. Initial development and testing should focus on a browser with a high level of standards compliance. Then fixes and workarounds can be applied to address specific issues for less compliant browsers ⁷. This approach is faster than working in the reverse order because less workarounds should be needed and there are many online resources dedicated to documenting bugs in less compliant browsers and providing robust workarounds.
   1. When applying non-standard workarounds for less-compliant browsers, try to limit exposure to browsers that require it. Conditional comments and browser-sniffing can be used for this purpose. This technique reduces the chance that the workaround may introduce unintended effects in browsers that have not been tested. It also increases the forwards compatibility of the resource.
4. When implementing a behaviour layer, the simplest way to ensure a robust, cross-browser compatible resource is the use of a mature JavaScript library. These libraries can also make it easy to implement client-side scripting as a layer (known as unobtrusive scripting) that keeps all behaviour code separate from the content layer and can be removed without breaking the functionality of the resource.

How to support all three technology layers for all browsers on the full support list

Browsers on the full support list are usually the most modern browsers, with the best support for International web standards. Following the best-practice development techniques (above) will often be enough.

The implementation advice section of the latest CUE Browser Support Lists document contains specific techniques to use for browsers currently listed in the full support list.

How to future-proof web resources and support beta-release browsers

The best way to ensure the forwards compatibility of web resources is to develop to International web standards by default. Beta-release browsers will receive unspecified support automatically. As new browsers and browser versions reach statistical prevalence or are otherwise determined to be “important” they will be included in the full support list.

How to suppress presentation and behaviour layers for browsers in the reduced support list

In general:

• Simple stylesheet parsing or attachment hacks and/or conditional comments can be used to suppress presentation layer technologies.
  Note: parsing hacks should be avoided unless absolutely necessary.
• Simple browser-sniffing techniques, capabilities testing and/or conditional comments can be used to suppress behaviour layer functionality.
  The simplest way to implement this is to use common JavaScript libraries. These libraries provide simple browser-sniffing functionality and more importantly will workaround known browser bugs by default.

 The implementation advice section of the latest CUE Browser Support Lists document contains specific techniques to use for browsers currently listed in the reduced support list.

How to test with presentation and/or behaviour layers disabled

Some modern browsers offer development tools that will render web content with different technologies disabled, either as in-built functionality or via third-party plugins/add-ons.

For example:

• Inbuilt options in Firefox
• Web Developer add-on (for Firefox)
• Advanced Preferences in Opera
• Developer toolbar (for Internet Explorer)

Another option is to manually simulate these tools by commenting out stylesheet and script resources, or temporarily renaming/moving them for the duration of the tests.

Footnotes:

⁶ In practice it is not always feasible to develop each layer in series. Development processes are often iterative and work may range across more than one layer at a time. In these situations it is important to keep the separate layers in mind and test with presentation and/or behaviour layers disabled to ensure the progressive enhancement approach is maintained.

⁷ As at time of writing (2008) Examples of browsers with high standards-compliance are: Firefox 3 and Safari 3. Examples of less-compliant browsers are: Internet Explorer 6 and 7.
Over time as browsers and web standards continue to mature, it is likely that Internet Explorer 6 and 7 will move to the reduced support list, and Firefox 3 and Safari 3 will become browsers that require workarounds to maintain full support.