Stylesheet Methods

CSS2 Selectors

Example

Since Trident 6 and earlier does not support any CSS2 selectors, creating a rule that older IEs ignore is simple:

html>body selector { properties }

Multiple CSS Class Selectors

Example

Since Trident 6 and earlier ignore all but the last class selector, prefixing a class with a dummy class that doesn't occur in the document can be used to create a rule that only old IEs use:

.IE6.class { properties }

CSS3 Media Queries

Media Queries allow different stylesheets to be used based on the settings and capabilities of the device, such as visible height, width, or color depth. Presto was the first engine that supported this standard, WebKit and KHTML followed in 2006.

JavaScript StyleSheets (JSSS)

JSSS is a technology only implemented in Netscape 4.x.

Linking to JSSS from XHTML

<link rel="stylesheet" title="Style Name" type="text/javascript" href="/path/ns4style.js" />

Microsoft Internet Explorer CSS Expressions (CSS-BE)

The behaviors module of CSS, meant to embed JavaScript expressions, was implemented by Internet Explorer (Windows only) in anticipation of a standard that never materialized.

Example 1.3.1. CSS Behaviors

div { height: expression('50%'); /* Win IE only */ }
div { width: 500px; width: expression( document.implementation ? '500px' : '512px' ); /* adjust Win IE 5.x */ }
div { width: expression( this.parentElement.offsetWidth / 2 ); /* Win IE formulas */ }

Example 1.3.1. A JavaScript StyleSheet

tags.body.fontFamily= 'Verdana, Arial, Helvetica, sans-serif';
tags.body.fontSize= '10pt';
with(tags)
{
  h1.color= h2.color= '#606';
  h1.fontSize= '12pt';
  h2.fontSize= caption.fontSize= '11pt';
}
with(classes)
{
  info.div.backgroundColor= '#E5E5E5';
  info.div.borderColor= '#696969';
  info.div.borderStyle= 'solid';
  info.div.borderWidth= '3px';
}
with(ids)
{
  body.fontSize= widebody.fontSize= '10pt';
  navbar.fontSize= '9pt';
  footer.fontSize= '7pt';
}
contextual(classes.info.div,tags.h5).color= '#969';
contextual(classes.info.div,tags.h5).fontSize= '12pt';