A few new and cool CSS3 styles become realistic options if you are designing website. That is: as long as you combine them with IE’s counterpart filter.

The list of things that Safari, Chrome and Firefox support is getting larger and larger. Not all functionality is that interesting since we still have to make sure that IE users receive a functional site. And if you’re building something for a customer, you have to make sure that the website looks like what the customer expects it to look like. Most of the time that means that the website must be more or less an exact copy of the designs in Photoshop.

But what is easily forgotten is that for years Internet Explorer sort of supports some CSS styles through the proprietary filter property. I mostly use filter for setting opacity or forcing alpha channels in a PNG24, but when I saw a text shadow in a website I realized that IE can do that trick already for years. So I came up with this list of things that should work on almost any browser:

• Text shadow
• Box shadow
• Blur
• Gradient background
• Opacity
• PNG24 alpha

A little on browser support

A little warning about the “works in”-lines you’ll seewith each example. I didn’t dig very deep to see which version of Opera started to support text-shadow. If see in a support chart that Opera 9.62 supports text-shadow, I haven’t dug deeper to if it was also supported in Opera 9.61. Especially when I relate it to the small share of people who use that browser. If you can point a source that speaks of an earlier version, I’m more than happy to correct the article.

Things you can do with CSS and filters combined

Text shadow

Works in IE 5.5+, Firefox 3.1b+, Safari 3+, Chrome 2+ and Opera 9.62+
Used sparingly can create a nice subtle effect and is a great way to make something a bit more stylish. Watch out with loss of anti-alias. More on that issue at the end of the article.

Text-shadow in IE8

Text-shadow in Firefox 3.5.5

.textShadow {
	width: 250px;
	text-shadow: 1px 1px 1px #cccccc; /* CSS3-compatible browsers */
	filter: dropshadow(color=#cccccc, offx=1, offy=1) /* IE */
}

Blur

Works in IE 5.5+, Firefox 3.1b+, Safari 3+, Chrome 2+ and Opera 9.62+
This one is a bit of hack: CSS3’s text-shadow is misused to create a blur. It was a trick I saw on www.css-tricks.com (hence the name, I guess). And although you can see the differences between the two screenshots, both are definitely blurs. A conditional comment was used to make the text in IE a bit darker so it would match with other browsers.

Blur in IE8

Blur in Firefox 3.5.5

.blur {
	width: 250px;
	color: #ddd;
	text-shadow: 0 0 2px #aaaaaa;
	text-shadow: 0 0 4px #aaaaaa;
	text-shadow: 0 0 6px #aaaaaa;
	filter:
		progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
		progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

<!--[if IE]>
	<style type="text/css">
		/* This style is for IE browsers only by
		   using IE's Conditional Comments */
		.blur {
			color: #aaaaaa;
		}
	</style>
<![endif]-->

Opacity

Works in IE 5.5+ and in all major browsers for years and is safe to use
Definitely the most used combination of CSS and IE’s filter. I mostly use it to make the website almost invisible in favor of an absolute placed div which floats like popup window on top of the greyed out website.

Opacity 0.5 in IE8

Opacity 0.5 in Firefox 3.5.5

.opacity {
	width: 250px;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8+*/
	filter: alpha(opacity=50); /* IE7 and lower */
}

Gradient

Works in IE 5.5+, Firefox 3.6+, Safari4, Chrome 3+
The soon to be released Firefox 3.6 supports gradient background. Safari and Chrome already supports that cool CSS3 feature. Although you can do more with CSS3’s background gradient than IE’s filter, there’s nothing to stop you from using a simple gradient. Well, poor browser support may stop you. Firefox 3.6 still has to be released and Opera does not seem to support gradients at all.

So the browser support for gradients is less than desirable. But since all major browsers except Opera now supports gradients in their latest versions, it will become a useful styling tool soon.

Background gradient in IE8

Background gradient in Chrome 3.0

.gradient {
	background: -moz-linear-gradient(top, bottom,from(#cccccc),to(#888888));
	background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#888888)) no-repeat;
	background; -o-gradient(top, bottom,from(#cccccc),to(#888888));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcccccc, endColorstr=#ff888888)"; /* IE8+ */
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcccccc, endColorstr=#ff888888); /* IE7 and lower */
}

Box shadow

Works in IE 5.5+, Firefox 3.6+, Safari 3, Chrome 1
If you look at the screenshots below you see a striking difference in what is called a “Shadow“. IE’s box shadow looks more like the right and bottom side of a 3D object than a real life shadow. CSS3’s box-shadow provides a shadow that’s much more realistic.

.boxShadow {
	-moz-box-shadow: 5px 5px 5px #888;
	-webkit-box-shadow: 5px 5px 5px #888;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=125,strength=5)"; /* IE8+ */
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=125,strength=5); /* IE7 and lower */
	background: #cccccc;
}

Use alpha channel in PNG24 images

Not really a CSS feature, neither something that lacks in modern IE browsers. But it is dearly missed in IE6. The only way to use alpha channels in IE6 (although many have found different ways apply it) is by using the filter’s AlphaImageLoader. Although this filter can save the day, it has many bugs you need to be aware of:

• It can only be used as a background image.
• You cannot position it like a normal background image, nor can the image repeat itself on the x or y axis.
• Links or form elements inside a box with a transparent PNG24 are not clickable. You have to make sure that such elements have a parent that has position: relative.
• Having lots of relative positioned elements scattered around can add extra complexity to your website if it has absolute positioned items floating on top of each other as well.
• You’ll lose text anti-alias.

This technique is only needed in IE6. Other modern browsers use the alpha channel as it ought to be.

.imageAlpha {
	display: block;
	width: 250px;
	height: 40px;
	padding: 5px 10px;
	background: #aaf url(alpha.png) 0 0 repeat-x; /* PNG24 image with alpha layer that works in all modern browsers */
}
* html .imageAlpha { /* these styles are only picked up by IE6 */
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png', sizingMethod='scale')
}

Filter bugs

Filter can clear Cleartype

The main drawback of using IE’s filter is that in some cases the element that has a filter style in IE, will lose it’s anti-aliasing. That may not sound like a big deal, because we have lived for a long time without Microsoft’s Cleartype, but it can get real ugly with larger fonts as you can see in the screenshots below. If you use a filter and it does remove the Cleartype, it’s best to keep the font-size 16 pixels or lower.

Filters can only be applied to boxes

Filters can only be applied to block elements like div or p and they need a width or height. If not, the filter won’t work. The exception to the rule is IE8, which can show filter effects without a width or height.

View demo

No related posts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I only build websites in Standards Mode, so Quirks Mode is an almost non-existent issue for me. This week, however, I had to restyle an old website. And while rewriting the CSS I remembered that the difference between the two modes goes farther than just a difference in box model. Simple things you’ve learned to rely on in Standards Mode are gone in Quirks Mode.

No * html

If I want a class to specifically target IE6 or IE7 I always prepend selectors with * html (IE6) or *:first-child+html (IE7) in case the rendering is a bit off with other browsers. But that simply doesn’t work in Quirks Mode. On Wikipedia there’s a list of browser bugs you can exploit in CSS. I chose to exploit the ”!important quirk“ since future browsers will just ignore the invalid CSS code that only runs in IE6 and IE7.

To use the ”!important quirk“ you misuse the !important keyword. Normally that keyword is used like this:

.classname {
    width: 100px !important;
}

The !important keyword ensures that the width of 100px cannot be overruled by other styles unless you use another !important. In IE6 and IE7 any keyword that starts with a ! works like a !important, so you can write something like this:

.classname {
    width: 100px; /* works in all 'normal' browsers' */
    width: 150px !lteIE7; /* for IE 7 and lower */
}

No fancy selectors

What surprised me much more is that some advanced selectors like the attribute selectors are not possible in IE7 when running in Quirks Mode. So the CSS code below will only work in Standards Mode:

table[width='160'] { /* this selector will not run in IE7 Quirks Mode */
    width: 100px;
}

The same holds true for selectors like :first-child, the Adjacent Sibling (+) Combinator and the Child (>) Combinator. Bummer.

Why not use conditional comments?

If you want to have some classes that are specifically targeted towards IE6 and IE7, Conditional Comments are the easiest and safest thing.

<!--[if lt IE 6]>
<link href='/css/IE6.css' rel='stylesheet' type='text/css' media='all' />
<![endif]-->


But I prefer CSS filters above conditional comments. By using CSS filters I have all the styling of an element in one page and not scattered around in different CSS files. In most cases I only use conditional comments to hide CSS code that won’t validate.

More information about conditional comments

Code for the sake of Technorati: 4252WKT38H9D

No related posts.