0 0 Votes

Simple CSS Browser Switch for Internet Explorer without Hack

Tip by Progger99 | 22/05/2012 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.

ReplyPositiveNegative

About the Author

Avatar AuthorThe author has not added a short description to his profile yet.
Show Profile | Message

 

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.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.