00 Votes

Simple CSS Browser Switch for Internet Explorer without Hack

Tip by Progger99 | 2012-05-22 at 23:02

Here is a short, simple but all the more brilliant browser switch for CSS to distinguish between the old versions of IE and modern browsers: All this without a hack!

.class {
   background-image: url('img.png') !important; /* Firefox, Chrome etc */
   background-image: url('img.gif'); /* Internet Explorer */

In the second line, a PNG background graphic is set, in the third line there is one in the GIF format. Because the Internet Explorer browser, for example, in version 6 does not support transparent PNG files, we would like to show in this version the GIF image instead.

In modern browsers, the !important ensures, that this property will not be overwritten later. So, in Firefox, Chrome, and so on, the PNG graphic will be used as background. Old versions of the Internet Explorer do not know about the !important. In these browsers, the second line with the GIF overwrites the first line with the PNG and the GIF will be used instead if the PNG. 

This is a super easy way for a browser switch, which can be applied of course also to other CSS properties, for example, to outsmart the faulty box model of the Internet Explorer.


About the Author

AvatarThe author has not added a profile short description yet.
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.