Double Vision – Give the Browsers CSS They Can Digest - The way into the future – progressive enhancement

(Page 4 of 8 )

Let’s try to do the right thing, and cast aside the idea of Web development catering the whims and problems of browsers and concentrate on implementing standards instead.

Styles can be applied in different ways to an HTML document:

 

1. Via the LINKtag
   
2. Inline, via a STYLEtag
   
3. Inline but external via the @import directive
   
4. Inline via the style attribute

Option four should also go in the “only in direst emergencies” folder. There is no sense to applying styles on a tag level, as it mixes presentation with structure and turns maintenance into a nightmare. The same applies to the second option; inline styles only get applied to one document, whereas the real power of CSS is that you maintain them in one spot and apply them to all documents in a site

 

This leaves us with option1, the LINKtag and stylesheet applied via the @import directive.

 

Almost, as now we delve into the depth of CSSand find that there are several selectors to choose from:

 

1. The plain vanilla Type Selector (http://www.w3.org/TR/REC-CSS2/selector.html#type-selectors)
   
2. The Child Selector (http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors)
   
3. The Adjacent SiblingSelector (http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors)

The CSSspecifications offer us much more fun to be had (http://www.w3.org/TR/REC-CSS2/selector.html), including simple, exact and partial attribute selectors, language selectors and various flavours of pseudo selectors. Let’s discard these for the moment, and keep them in mind for a good night’s read when we can use them to reach more than a small percentage of our visitors.

 

Type selectors like body{background:#000;} are understood by nearly all browsers around today (including official non-CSS browsers like Netscape 4.x). Child selectors like DIV>P or Adjacent Sibling Selectors like DIV+Pare are only supported by newer browsers, excluding Internet Explorer on Windows. This is something we can use to our advantage. Incidentally, the child selector is mentioned as a CSS hack in some of the resources. However, it is not a hack, it is valid CSS2 and there is nothing hacky about it.

 

Next: The child selector >>
 

More Style Sheets Articles
More By Chris Heilmann

Comments On: Double Vision – Give the Browsers CSS They Can Digest

· Some browsers understand both imports but don't display CSS2 properly - so this will...    · which ones? The only one that comes to mind is Opera < 7.   >>> Post your comment now!