onlyWebPro.com - For Designers & Developers

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