Conditional statement in CSS

You must have come across some .css issues related to the browser behaviour. Some of the styles that work 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 demonstrates how to write the conditional statement in 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>
           Conditional CSS
       </p>
   </body>
</html>

Suppose you copy-paste the above code as an a.html file and browse it into IE 7. In that case, you will get the background colour of the page as red and the colour of the text as blue, but if you browse the same page in Firefox, the background property of the body tag will not be applicable. It will be default (white), while you will see the colour of the text as blue as you saw into IE 7. This is because the colour of text has been specified as default style while the background is written as a conditional statement.

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru