IE Only, Cool Features, That Should Exist On Other Browsers Too

OK Internet Explorer (mainly <7 ) is the source of headache for most of us.  The box model, the transparency problem and it’s poor CSS support have made designers hack their code to have their designs look the same (not always though) on IE as they would on all other browsers. But, there are some awesome, IE specific, features that should be present on other browsers too. In this article, we will list some IE features that Firefox, Opera and other browsers should have.

The CSS Filter Property

Internet Explorer supports a filter:command style CSS property that can add some style to HTML elements on your pages. For example you can create a fade effect on any block element on your pages with:

ELEMENT {filter: Chroma(Color=#C1DEFF) Alpha(Opacity=200, FinishOpacity=0, Style=2, StartX=gradient start X position, StartY=gradient starting Y position, FinishX=gradient finishing X position, FinishY=gradient finishing Y position)
}

where “ELEMENT” is any block element. You can use the above code to transform this image:

to something like this:

You can also create gradient div elements with the same trick. Another great method of the filter property is “filter:gray” which, when used on images, the images will be gray-scaled. So by doing this:

img{
filter:gray;
}

will display the image like this:

while by using the “filter:fliph” or “filter:flipv” methods, the images will be flipped horizontally and vertically accordingly. The next cool filter method is “filter:invert” which when used on images, would display the image like this:

Another image transformation can be achieved with “filter:wave“. You might have guessed what this method does but if you didn’t, put this code in your page:

img{
filter:wave(Strength=5,lightstrength=15)
}

and you should get an image with a wave effect like this:

A method similar to the “filter:invert” method is “filter:xray” which produces the following effect:

wait.. There’s some more.

You can pixelate any image with this code:

img{
 filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=6)
}

eg:

add some blur with “filter:blur(strength=VALUE)“:

img{
blur(Strength="50")
}

or add some glowing effects to some text and keep the text selectable as shown here:

with this code:

p{
filter: glow(Color="#000eee",Strength="6");
 width:200px;
 font-size:30px;
}

and adding shadows to text can be done with this code:

p{
filter: dropShadow(color="#ddd0d0",offX="2",offY="2");
 width:200px;
 font-size:40px;
}

The result is not 100% what we expected though since the transformation sharpens our text:

The MSDN site has a lot of info about the filter property and some other IE specific CSS properties in case you are interested in it.

We do not advise you to use any of these CSS properties on your pages here. We are just trying to show that some of these properties could be added to other browsers too, since most of them have to do with presentation and style. For example why use a heavy JS library to add some effects like fade or gray-scale when you can do it with 1 line of text?

For flame lovers:

We use Opera (70%) and FireFox (30%). So, no IE lovers here…

Popularity: 1%

Related posts:

1. CSS Snippets That Can Come Handy Sometimes doing something with CSS that looks the same for...
2. Awesome (Chrome) Javascript Experiments I was surfing the web when i got back to...