Even with the upcoming release of Internet Explorer 9, which will theoretically have CSS3 support, a lot of people are guaranteed not to upgrade. There are many cool features made easy in CSS3 that are still available to these users. We’re going to cover the big ones.
Rounded Corners
Everybody loves rounded corners. But Internet Explorer 8 and below does not support this at all. Luckily Curvy Corners makes cross-browser round corners easy. It uses CSS3 on browsers that have it and JavaScript on those which don’t.
Box Shadows
Due to an IE specific script, box shadows are easy to create on Internet Explorer.
.box-shadow {
box-shadow: 10px 10px 20px #000; /* Define the regular box shadow */
behavior: url('ie-css3.htc'); /* Include the IE script */
}
Download ie-css3.htc
Just make sure you put the ie-css3.htc in the same directory as the CSS file, and don’t forget to add the -moz- and -webkit- prefixes for other browsers!
Selectors
CSS3 introduces a lot of nice selectors, but Internet Explorer 8 and below supports none of them. Fortunately, there is a script which adds a lot of the cool CSS3 selectors to IE. Just download the script from here and link to it in your HTML code.
Gradients
Gradients in Internet Explorer are surprisingly simple using their proprietary “filter” property.
.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#000000);
}
You can replace #FFFFFF with the first color and #000000 with the other color.
Things made possible by CSS3 are certainly available in Internet Explorer if you take the time to support IE. So the question is, is it worth giving IE users the same eye candy as Firefox, Webkit and Opera users?
CSS3 Alternatives for IE
Even with the upcoming release of Internet Explorer 9, which will theoretically have CSS3 support, a lot of people are guaranteed not to upgrade. There are many cool features made easy in CSS3 that are still available to these users. We’re going to cover the big ones.
Rounded Corners
Everybody loves rounded corners. But Internet Explorer 8 and below does not support this at all. Luckily Curvy Corners makes cross-browser round corners easy. It uses CSS3 on browsers that have it and JavaScript on those which don’t.
Box Shadows
Due to an IE specific script, box shadows are easy to create on Internet Explorer.
.box-shadow { box-shadow: 10px 10px 20px #000; /* Define the regular box shadow */ behavior: url('ie-css3.htc'); /* Include the IE script */ }Download ie-css3.htc
Just make sure you put the ie-css3.htc in the same directory as the CSS file, and don’t forget to add the -moz- and -webkit- prefixes for other browsers!
Selectors
CSS3 introduces a lot of nice selectors, but Internet Explorer 8 and below supports none of them. Fortunately, there is a script which adds a lot of the cool CSS3 selectors to IE. Just download the script from here and link to it in your HTML code.
Gradients
Gradients in Internet Explorer are surprisingly simple using their proprietary “filter” property.
.gradient { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#000000); }You can replace #FFFFFF with the first color and #000000 with the other color.
Things made possible by CSS3 are certainly available in Internet Explorer if you take the time to support IE. So the question is, is it worth giving IE users the same eye candy as Firefox, Webkit and Opera users?