CSS, How to Hide Styles from Older Browsers?

by admin on Aug.14, 2009, under Tutorials

Some older browsers, such as Netscape Navigator 4 and IE 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. Netscape Navigator 4 does not support multiple media types.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>CSS, How to hide content</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen, projection”>
</head>

The remaing styles will be hidden from IE 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. IE 4 can not read imported files.

@ import “advanced.css”;

//Code inside advanced.css

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

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 can also be hidden from older browsers by enclosing the contents of the styled element inside a comment.

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

–>
</style>