I have been using a lot of CSS3 in my projects this past year. CSS3 makes it much easier to implement design elements such as rounded corners, non-native fonts, etc.
The only problem with the CSS3 approach is that support for it differs among the major browsers. In most cases, it's just a matter of using different vendor prefixes (-webkit
vs. -moz
vs -o
). Internet Explorer (IE 6-8) though, is a whole other story.
Luckily, there are a few work arounds for getting your CSS3 styles to work in IE.
border-radius, box-shadow, text-shadow
Thanks for Remiz Rahnas for providing a way to easily support three very widely used CSS3 properties. Grab the ie-css3 script from this page, and simply add behavior: url(ie-css3.htc)
in your styles. It's that easy. :)
@font-face
Use the Font Squirrel @font-face generator to create cross-browser and optimized font formats and stylesheet. You can also browse through their collection of font packs to see if you can find what you're looking for. The IE support goes all the way back to IE 4, so there should be no reason to not use embedded fonts.
transform: rotate(...)
Let's say you need to rotate an element 30 degrees clockwise using CSS3.
In Chrome and Safari you will use -webkit-transform: rotate(30deg)
. In Firefox you will use -moz-transform: rotate(30deg)
. In Opera you will use -o-transform(30deg)
. Easy right?
But what about IE? Some websites recommend using the rotation filter property. This property only allows for four rotations: 0, 90, 180, and 270 degrees. Well, that sucks right?
The good news is that IE supports matrix transformations, and rotation is just a linear transformation. I found this useful calculator online that allows you to input the degree, and it will spit of the matrix values along with the corresponding CSS -- the rules you want are filter
and -ms-filter
.
opacity
To get opacity to work in IE, use the alpha filter.
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 6,7 */ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 8 */
The opacity
value ranges from 0 to 100, where 0 is invisible and 100 is full opacity.
gradient
Use the proprietary gradient filter.
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cccccc', endColorstr='#ffffff');
The GradientType
can be 0
for horizontal or 1
for vertical. Notice that you can only specify linear gradients.