Hiding Styles from Older Browsers

Some older browsers, such as Netscape Navigator 4 and Internet Explorer 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules.

All styles will be hidden from Netscape Navigator 4 by changing the link element's media type from screen to screen, projection as shown in Listing 4.7. Netscape Navigator 4 does not support multiple media types.

Listing 4.7. HTML Code Containing a `link` Element with a `screen, projection` Media Type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>          <meta http-equiv="content-type" content="text/html;          charset=utf-8">          <title>Lesson 4</title>     <link rel="stylesheet" href="style.css" type="text/css"     media="screen, projection"> </head> <body> <p>          Lorem ipsum dolor sit amet, consectetuer adipiscing          elit... </p> </body> </html>

The remaining styles will be hidden from Internet Explorer 4 and several other older browsers by moving the <p> element rule set out of the original style sheet and into the imported style sheet as shown in Listings 4.8 and 4.9. Internet Explorer 4 is not able to read imported files.

Listing 4.8. CSS Code Inside the Original Style Sheet Called `style.css`

@import "advanced.css";

Listing 4.9. CSS Code Inside the Import Style Sheet Called `advanced.css`

p {     font-family: arial, helvetica, sans-serif;     margin: 1em;     padding: 1em;     background-color: gray;     width: 10em; }

All modern browsers will read the multiple media type screen, projection, as well as the imported style, so they will display the fully styled <p> element.

Header styles also can be hidden from older browsers by enclosing the contents of the style element inside a comment as shown in Listing 4.10.

Listing 4.10. HTML Code Containing Header Styles Within a Comment

<style type="text/css" media="screen"> <!--     p     {          font-family: arial, helvetica, sans-serif;          margin: 1em;          padding: 1em;          background-color: gray;          width: 10em;     } --> </style>

Listing 4.7. HTML Code Containing a link Element with a screen, projection Media Type

Listing 4.8. CSS Code Inside the Original Style Sheet Called style.css

Listing 4.9. CSS Code Inside the Import Style Sheet Called advanced.css

Listing 4.10. HTML Code Containing Header Styles Within a Comment

Listing 4.7. HTML Code Containing a `link` Element with a `screen, projection` Media Type

Listing 4.8. CSS Code Inside the Original Style Sheet Called `style.css`

Listing 4.9. CSS Code Inside the Import Style Sheet Called `advanced.css`