Opacity / Transparency

I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. It’s been around so long, that we often forget that it’s actually a CSS3 property. Although IE doesn’t offer support for the opacity property, it does offer similar transparency settings via the proprietary filter property:

The Syntax

#myElement {
    opacity: .4; /* other browsers */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

You really only need the second line, which works in all three versions of Internet Explorer. But if for some reason you needed the opacity setting to apply only to IE8, and not to IE6/7, then you can use the third line, which the older versions don’t recognize.

The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). Also, as many have experienced when using opacity (even when using the standard method), the opacity settings will be inherited by all child elements, for which there is no easy workaround.

The Drawbacks

• The filter property is a Microsoft-only property, so your CSS won’t validate
• As is the case for the opacity property, the IE filter causes all child elements to inherit the opacity

Rounded Corners (border-radius)

The border-radius property (more commonly referred to as CSS3 rounded corners) is another popular CSS3 enhancement. This property has allowed developers to avoid the headache of bloated JavaScript or extra positioned elements to achieve the same effect. But once again, Microsoft doesn’t want to cooperate, so IE doesn’t have any support for this property.

Fortunately, at least one person has come up with a very usable workaround that can be used in an IE-only stylesheet. Remiz Rahnas of HTML Remix has created an HTC file called CSS Curved Corner that can be downloaded off Google Code.

The great thing about this piece of code is that it doesn’t require any extra maintenance if you adjust the amount of radius on your rounded corners. You just link to the file in your CSS, and the script will automatically parse your CSS to find the correct radius value from the standard border-radius property.

The Syntax

.box-radius {
    border-radius: 15px;
    behavior: url(border-radius.htc);
}

The Drawbacks

• The HTC file is 142 lines (minifying or GZipping would help, but it’s still extra bloat)
• The behavior property will make your CSS invalid
• Your server needs to be able to load HTC files for this technique to work
• IE8 seems to have some trouble in some circumstances when the HTC file forces the curved element to have a negative z-index value

Box Shadow

The box-shadow property is another useful CSS3 feature that will even add a curved box shadow naturally to an element that uses the border-radius property. IE doesn’t support box-shadow, but a filter is available that offers a close replication.

It should be noted that the box-shadow property has been removed from the CSS3 Backgrounds and Borders Module, so its future in CSS3 seems to be a little uncertain right now.

The Syntax

.box-shadow {
    -moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

The Drawbacks

• The settings for the IE shadow filter do not match those of the other proprietary properties, so in order to make it look the same, you have to fiddle with the values until you get it right, which can cause maintenance headaches
• The filter property doesn’t validate, but neither do the WebKit and Mozilla properties, so this is a drawback in all browsers

Text Shadow

Adding drop shadows to text elements has been practiced in both print and web design for years. On the web, this is normally done with images and occasionally with text duplication combined with positioning. CSS3 allows developers to easily add shadows to text using a simple and flexible text-shadow property.

Unfortunately, there doesn’t seem to be an easy way to add a text shadow in Internet Explorer — even with the use of proprietary filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof has written a jQuery plugin that implements text shadows in Internet Explorer.

The Syntax

First, in your CSS, you would set the text-shadow property:

.text-shadow {
    text-shadow: #aaa 1px 1px 1px;
}

The values specify the shadow color, position on the horizontal axis, position on the vertical axis, and the amount of blur.

After including the jQuery library and the plugin in your document, you can call the plugin with jQuery:

// include jQuery library in your page
// include link to plugin in your page
 
$(document).ready(function(){
    $(".text-shadow").textShadow();
});

The Drawbacks

There are some significant drawbacks to this method that make it very unlikely to ever be practical. You’re probably better off creating an image to replace the text for IE instead.

• In order to make the shadow look almost the same in IE, you need to use different settings in an IE-only stylesheet, adding to development and maintenance time
• Requires that you add the jQuery library, in addition to a 61-line plugin file (GZipping or minifying would help)
• The IE version of the shadow never looks exactly the same as the other browsers
• When using the overriding parameters, the plugin seems to be rendered somewhat useless, displaying a big ugly shadow that won’t change with new values
• Unlike the CSS3 version, the plugin doesn’t support multiple shadows
• For some reason, in order to get it to work in IE8, you need to give the element a z-index value

Transparent Background Colors (RGBA)

CSS3 offers another method to implement transparency, doing so through an alpha channel that’s specified on a background color. Internet Explorer offers no support for this, but this can be worked around.

The Syntax

The solution for this is not the greatest, but is a legitimate method. For the CSS3-compliant browsers, here’s the syntax to set an alpha channel on the background of an element:

#rgba p {
    background: rgba(98, 135, 167, .4);
}

With the above CSS, the background color will be set to the RGB values shown, plus the optional “alpha” value of “.4″. To mimic this in Internet Explorer, you can use a semi-transparent 1-pixel PNG image set as a repeating background in an IE-only stylesheet, which would override the previous setting. The PNG can be set to the same level of transparency when the image is created:

#rgba p {
    background: transparent url(rgba-ie.png) repeat 0 0;
}

The repeating PNG image will look exactly the same in IE as in other browsers, duplicating the RGBA transparency effect.

The Drawbacks

Maintenance requires creation of a new PNG file every time the color or transparency is adjusted Adds an extra HTTP request by referencing the image instead of a color value IE6 doesn’t support PNG transparency natively, so a JavaScript hack is needed, which is a little trickier to achieve with backgrounds and will add two more HTTP requests

Gradients

Another practical and time-saving technique introduced in CSS3 is the ability to create custom gradients as backgrounds. Although Internet Explorer doesn’t support gradients of the CSS3 variety, it’s pretty easy to implement them for the IE family using proprietary syntax.

The Syntax

To declare a gradient that looks the same in all browsers, including all versions of Internet Explorer, use the CSS shown below (the last two lines are for IE):

#gradient {
    background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

For the IE filters, the GradientType can be set to “1″ (horizontal) or “0″ (vertical).

The Drawbacks

Some of the usual drawbacks apply to gradients created with the IE-only filter, along with some other problems.

• Your CSS won’t validate, although that’s also true for the WebKit and Mozilla values
• Different code is needed for IE8, adding to maintenance time
• The WebKit and Mozilla gradients allow for “stops” to be declared; this doesn’t seem to be possible with the IE gradient, limiting its flexibility
• IE’s filter doesn’t seem to have a way to declare “radial” gradients, which WebKit and Mozilla support
• For a gradient to be visible in IE, the element with the gradient must have layout

Multiple Backgrounds

This is another CSS3 technique that, when widely supported, could prove to be a very practical addition to CSS development. Currently, IE and Opera are the only browsers that don’t support this feature. But interestingly, IE as far back as version 5.5 has allowed the ability to implement multiple backgrounds on the same element using a filter.

The Syntax

You might recall trying to hack a PNG in IE6 and noticing the image you were trying to hack appearing twice, which you had to remove by adding background: none, then applying the filter. Well, using the same principle, IE allows two background images to be declared on the same element.

To use multiple backgrounds in Firefox, Safari, and Chrome, here’s the CSS:

#multi-bg {
    background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

To apply two backgrounds to the same element in IE, use the following in an IE-only stylesheet:

#multi-bg {
    background: transparent url(images/bg-image-1.gif) top left repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
}

The Drawbacks

• Your CSS will be invalid
• The second background image applied using the filter property will always be in the top left, and cannot repeat, so this method is extremely inflexible and can probably only be used in a limited number of circumstances
• In order to get the element to center (as in other browsers), you have to create an image with the exact amount of whitespace around it, to mimic the centering, as I’ve done in the demonstration above

Element Rotation (CSS Tranformations)

CSS3 has introduced a number of transformation and animation capabilities, which some have suggested are out of place in CSS. Nonetheless, there is a way to mimic element rotation in Internet Explorer, albeit in a limited fashion.

The Syntax

To rotate an element 180 degrees (that is, to flip it vertically), here is the CSS3 syntax:

#rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

To create the exact same rotation in Internet Explorer, you use a proprietary filter:

#rotate {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

The Drawbacks

• Your CSS won’t validate, although that’s also true for the WebKit and Mozilla code
• While the Mozilla and WebKit code allows for rotation changes to increment by a single degree, the IE filter only permits 4 stages of rotation, minimizing its flexibility