Simple CSS Browser Switch for Internet Explorer without Hack

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.