Target IE Specificly in HTML/CSS Using Conditional Comments

Out of all the most popular browsers used, Internet Explorer (IE) renders HTML and CSS with the most issues. In most cases, there are fixes for IE that can be implemented by using some different CSS properties. However, sometimes it is important to make a call specifically to Internet Explorer telling the browser what to render, and in some cases, what not to render.

To make an explicit call to the Internet Explorer browser, use:

<!--[if IE]> 

Special instructions for IE here 

<![endif]-->
<!--[if IE 7]> 

Special instructions for IE 7 here 

<![endif]-->
<!--[if gt IE 6]> 

Special instructions for versions of IE greater than 6 here 

<![endif]-->
<!--[if gte IE 6]> 

Special instructions for versions greater than or equal to IE 6 here 

<![endif]-->
<!--[if lt IE 9]> 

Special instructions for versions less than IE 9 here 

<![endif]-->
<!--[if lte IE 9]> 

Special instructions for versions less than or equal to IE 9 here 

<![endif]-->

Lastly, you can target all browsers that are not Internet explorer using conditional comments as well:

<!--[if !IE]> 

Special instructions for browsers that are not Internet Explorer 

<![endif]-->

I hope this helps some of you that are looking for some help with cross browser compatibility. IE can be difficult but by using conditional comments, it makes cross browser testing a lot easier.

Important Browser Specific CSS Properties You Should Be Aware Of

There are many different browsers being used this day in age. For the most part, browsers render CSS the same but there are a few instances where certain browsers just do not recognize some properties. This is where Cross-Browser Compatibility testing comes into play.

Sometimes, there is an easy fix to make the styles on a website to look the same across browsers. Today, the most common browser according to W3Schools, the browsers used most often currently are listed in the chart below:

browserstats

For now, I will ignore Internet Explorer as I will talk about how to use special instances for IE in a separate post.

Firefox has a special property prefix in some instances, this prefix is: -moz-

Similar to Firefox, Safari and Google Chrome are similar as in they both use webkit. The prefix for webkit properties is: -webkit-

Opera has a special property prefix in some instances, this prefix is: -o-

Below are important CSS/CSS3 properties to keep in mind while doing cross browser compatibility. These are the most common properties that can be easily rendered across browsers using these prefixes:

Border Radius (CSS3)

.RoundedCorners{

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;

}

Border Radius can take one input for the radius measurement, or four inputs:

.RoundedCorners{

border-radius: 5px 5px 10px 10px;
-moz-border-radius: 5px 5px 10px 10px;
-webkit-border-radius: 5px 5px 10px 10px;
-o-border-radius: 5px 5px 10px 10px;

}

 

Box Shadow (CSS3)

.DivWithShadow{

box-shadow: 5px 5px 5px #333333;
-moz-box-shadow: 5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-o-box-shadow: 5px 5px 5px #333333;

}

Gradient (CSS3)

Below is a linear gradient from the top to the bottom:

.GradientDiv{

background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);

}

Below is a linear gradient from left to right:

.GradientDiv{

background: linear-gradient(left, red , blue); 
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: -webkit-linear-gradient(to right, red , blue);

}

Below is a linear gradient that goes diagonally:

.GradientDiv{

background: linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: -webkit-linear-gradient(to bottom right, red , blue);

}

 

Animation (CSS3)

For this example we will do a simple CSS3 transition that changes the color of a link gradually from one color to another.

First we set the color of the link:

a:link{

color: #333333;

}

Then we set the hover with the transitions, time transitions should take place, and cross-browser properties:

a:hover {

 color: #FF0;
 transition: color 0.5s;
 -moz-transition-property: color;
 -webkit-transition-property: color;
 -o-transition-property: color;
 -moz-transition-duration: 0.5s;
 -webkit-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;

}

 

Transform (CSS3)

For this example, we will use the transform property of rotate:

.TiltedDiv {

 transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -webkit-transform: rotate(2deg);

}

In the next post, I will explain how to detect, add custom CSS, or remove certain properties in Internet Explorer. Keep Coding!

30 CSS Selectors you Must Keep in your Head

Couldn’t write this information on CSS selectors any better. Kudos Raghavendra, well said. Good information and easy for the beginner to understand.

Raghavendra Prasad

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in November, 2010.

So you learned the base idclass, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

1. *

* {
margin: 0;
padding: 0;
}

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you…

View original post 3,098 more words