Home » Tutorials » HTML & CSS » CSS Conditional Comment

CSS Conditional Comment

CSS Conditional Comment

Today, we are going to talk about CSS conditional comment for various browser. Have you guys read the post entitled ‘CSS3: Media Queries For Multiple Devices’ that posted in past few months ago ? If you haven’t, you can go and give the previous post a read.

Introduction to CSS Conditional Comment

Ok, so what is CSS conditional comment? Actually, CSS conditional comment was developed out of the desire to overcome CSS rendering bugs in a wide range of web browsers, ensuring as many visitors as possible see your website’s design correctly. Initially, this method was found in Internet Explorer allowing web designer / developer to overcome layout rendering problem, and now it was extended to include other browsers such as Gecko-based browsers and Webkit-based browsers.

The Conditional Statement Format

The format of writing a CSS conditional statement is quite easy, you can use either way as stated below:

[if browser-name {CSS code here} ]
[if browser-name version {CSS code here} ]
[if conditional-operator browser-name version {CSS code here} ]

Is easy right? Let’s move on!

Browser’s Name

Now, we know the format of writing a conditional statement, the next thing we need to do is find out the name for each browser, so that we can cater the specific style sheet for specific device. Following is the full list of the browser’s name for the desktop and mobile devices:

  • IE – Internet Explorer for PC
  • IEMobile – Internet Explorer Windows Mobile Phone
  • Gecko – Gecko based browsers
  • Webkit – Webkit based browsers
  • SafMob – Mobile Safari
  • Opera – Opera’s browser

Example

For example, we just only want certain CSS code being display in Windows Mobile Phone, so we can write our conditional statement in this way:

<!--[if IEMobile]>
.myClassName {
   color: red;
}
<![endif]--> 

Simple right? Try it now! 🙂

Enjoy The Article?

Are you enjoying this article? Share it to your friends! and join onlyWebPro Facebook Like page to get more latest updates! onlyWebPro Facebook Like Page


  • Alicante Airport

    Your point is valueble for us. Thanks!

  • Terence Milbourn

    I can see how this works when selecting between different browser types, but what I need to do is display one image when the reader is on the WordPress home page, reading a post teaser, and another (link-able) image, when the reader clicks the “Read More” button and arrives at the full post. Is that possible?

  • John

    It’s not clear whether (or which of) these codes go in the HTML file or the CSS file.

Android, iOS Development Tutorials