CSS – Conditional Statements
November 1, 2009 by Nauman · Leave a Comment
For CSS to work in cross browser environment, we have to write some conditional statements to make our styles look same in all the browsers.
Below is the sample code that demonstrate how to write conditional statement tin CSS.
<html>
<head>
<title>Conditional CSS</title>
<style type="text/css">
body
{
color:blue;
}
</style>
<!–[if IE 7]>
<style type="text/css">
body
{
background-color:red;
}
</style>
<![endif]–>
</head>
<body>
<p>
Nauman Farooq
</p>
</body>
</html>
If you copy-paste above code as an .html file and browse into IE 7, you will get the background color of the page as red and color of the text as blue but if you will browse the same page in FireFox, the background property of the body tag will not be applicable and it will be default (white) while you will see the color of the text as blue as you were seeing into IE 7.
This is because the color of text has been specified as default style while the background is written as conditional statement.
