Conditional statement in CSS

SheoNarayan
Posted by in CSS 3 category on for Advance level | Views : 17696 red flag

You must have came across some .css issues related with the browser behavior. Some of the styles that works in IE doesn't work in FireFox.

In that situation you need to write conditional code for both 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>
SHEO NARAYAHN
</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.

Thanks
------------------------------------------------------------------
Edited: Found a detailed article on this topic later on, see here
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp
Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)