Приглашаем посетить
Чулков (chulkov.lit-info.ru)

Hiding Styles from Older Browsers

Previous Page
Table of Contents
Next Page

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>


Previous Page
Table of Contents
Next Page