Hiding Styles from Older BrowsersSome 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.cssp { 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> |