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.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> |