Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 2 HTML DESIGN PATTERNS


Conditional Style Sheet


Rendered in Firefox without the conditional style sheet

Rendered in Internet Explorer with the conditional style sheet

HTML


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

<head><title>Conditional Stylesheet</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="page.css" media="all" type="text/css" />
<!--Embed the following style sheet only in IE 6 and higher-->
<!--[if gt IE 5.5]>
<link rel="stylesheet" href="ie6.css" media="all" type="text/css" />
<![endif]-->
</head>

<body>
<h1>Conditional Stylesheet</h1>
<p class="test">In Internet Explorer 6, this box has a border and background.</p>
</body>
</html>

CSS page.css


*.test { font-size:18px; }

CSS ie6.css


*.test { border:2px solid black; background-color:gold; }
Free download pdf