Using CSS3 and Making Internet Explorer Play Nice, too!

Tips for Making CSS3 Work with Internet Explorer

CSS3 opened up a whole new world of options for web designers and goes a long way to support SEO since it allows designers to replace images used to deliver fancy text with standard code.  CSS3 works beautifully in most modern browsers, however, making Internet Explorer play nicely and render pages that look similar to those visitors using other browsers see is a whole other issue.

In trying to keep things visually equal, I was determined to find a way to work around Internet Explorer’s issues. Since SEO is always at the top of my mind when designing sites, I really didn’t want to fall back to Internet Explorer’s limitations and continue to use images in all browsers, I wanted a solution that would keep my code spider-friendly. The best answer I tested was the use of conditional comments and special CSS for Internet Explorer. This lets me deliver the full CSS3 experience to visitors using Firefox, Safari, or Chrome and provide a reasonable equivalent to visitors using Internet Explorer. So how do you do it? Read on!

Targeting Internet Explorer With CSS3 Using Conditional Comments

Amazingly, Internet Explorer, the least progressive browser, has a completely safe and easy method of serving CSS/HTML to only IE. The other standards favoring browsers (Firefox, Opera & Safari) don’t (perhaps because it’s not necessary?).

For our purposes, the easiest way to target IE is with conditional comments. I’m not going into detail about the syntax that Microsoft has created to allow you to do this, let’s just focus on what you need to know!. Here is what the basic code looks like:

<![endif]–>

Putting it All Together

We need to add code to both our CSS file and the actual web page. Here is an example of how it works.

Here is the sample CSS3:

First, we have the original CSS style and then the new conditional style for IE.

/*original formatting for all the other browsers*/
#con01_sub {
 background-color: #414139;
 background-image:
 -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.15, transparent), color-stop(0.15, rgba(32,32,32,0.75)), color-stop(0.50, rgba(32,32,32,0.75)), color-stop(0.50, transparent), color-stop(0.65, transparent), color-stop(0.65, rgba(32,32,32,0.75)), to(rgba(32,32,32,0.75)));
 background-image:
 -moz-linear-gradient(right bottom, transparent, transparent 15%, rgba(32,32,32,0.75) 15%, rgba(32,32,32,0.75) 50%, transparent 50%, transparent 65%, rgba(32,32,32,0.75) 65%, rgba(32,32,32,0.75));
 -webkit-background-size: 5px 5px;
 -moz-background-size: 5px 5px;
 background-size: 5px 5px;
 }
/* For IE 7 and up */
#ie7andup #con01_sub {
 background:#414139;
 background-image: url(https://www.example.com/images/ie_bkg.png);
 background-repeat: repeat;
 }

Here’s the sample changes to the page code:

You can see that we have wrapped the entire page in a special div with the id “ie7andup” to allow for our special conditional CSS formatting.

<!–[if gte IE 7]>

<!–[if IE]> <![endif]–>