Double Vision – Give the Browsers CSS They Can Digest - Enhancing with the child selector

(Page 6 of 8 )

Now, as MSIE on PC does not support the child selector, we can ensure that only browsers that can deal with certain styles get them. Normally this is done by preceding them with a html>body construct. This matches every BODY element inside the HTML element, a rather pointless definition in HTML documents, as those only allow for one body, but it makes sure that these styles are applied document-wide.

Example: An article style sheet

Let’s create a style sheet that makes it easy to read articles. We start with a properly marked up, valid HTML document (http://icant.co.uk/forreview/generating_nocss.html) that forces the browser to render in standards mode. This is all we will give old browsers like Netscape 4.x.  

For newer browsers, we apply the stylesheet "articles.css" (http://icant.co.uk/forreview/articles.css) for screen display and "print.css" (http://icant.co.uk/forreview/print.css) for printouts:

 

            <style type="text/css" media="screen">

         @import "articles.css";

    </style>

    <link rel="StyleSheet" href="print.css" media="print" type="text/css" />

 

Next: The screen display style sheet >>
 

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!