Home arrow Style Sheets arrow Page 4 - Double Vision – Give the Browsers CSS They Can Digest

Double Vision – Give the Browsers CSS They Can Digest

Some but not all browsers support CSS2. You can deliberately code your website so that users of either kind of browser will see pages that are appropriate for what their browser can handle. Older browsers won't gag, but you will still be able to take advantage of what you can do with CSS2 in the newer browsers. Read on to find out how.

Author Info:
By: Chris Heilmann
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
February 22, 2005
  1. · Double Vision – Give the Browsers CSS They Can Digest
  2. · The way of the dark side – code forking
  3. · The way of confusion – browser hacks
  4. · The way into the future – progressive enhancement
  5. · The child selector
  6. · Enhancing with the child selector
  7. · The screen display style sheet
  8. · The print style sheet

print this article

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.


blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials