Useful JavaScripts when dealing with browser compatibility

Just finished some jquery/javascript stuff when the customer called and told me „It’s not working“, after some talks we’ve found out, they use IE8. And the page was optimized for „current“ browsers, while I wouldn’t say the ie8 is current, it seems that IE8 is shipped with some (all?) windows 7 installations. Hence everything had to be modified to work with IE8. Then the customer called again and asked „Uhm, can we make sure it works for IE7, too?“ – That was the moment I was looking for some ways to test pages in IE7 and by doing so I stumbled over a few interesting JavaScripts:

A JavaScript library to make MSIE behave like a standards-compliant browser.

https://code.google.com/p/ie7-js/ This fixes a lot of trouble when dealing with such old browsers.

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

HTML5 IE enabling script

http://code.google.com/p/html5shiv/ Many start to use html5 now, but those old browsers don’t understand the new tags.

HTML5 IE enabling script. Source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section.

CSS3 selectors for IE

http://selectivizr.com/ Just like with HTML5 many use CSS3 nowadays.

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

JQuery, write less, do more

http://jquery.com/ JavaScript libraries usually implement fixes and workarounds for older browsers, which means if you code as much as possible using the library, you’re also making sure your stuff will work in more than one browser.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

There’s one more interesting script worth mentioning here:

-prefix-free Break free from CSS prefix hell!

http://leaverou.github.com/prefixfree/ Interesting article about it, also take a look at the comments: http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

I’m not sure if I would have done it like that. The idea is really good, question is: What happens with browsers which are not taken into account because they don’t support CSS3 anyway? What about unknown browsers the author didn’t think of? And how should the -moz prefix be handled as it has been removed from recent firefox? Just saying: I would have implemented all possible tags. That way some browsers get tags they for sure don’t need or ignore but you’re making sure that every browser might work, even those, you haven’t initially thought of. This could be pretty general, like: if internet explorer, if webkit, if khtml, if unknown. Dunno maybe I can come up with something similar, let’s see.

By the way: I’d start with the script for the ie fixes, then the html 5 fixes, then selectivizr, then jquery and last but not least prefix-free. Like this:

...
<!-- Meta Tags //-->
...
<!-- JavaScripts //-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/ie7-squish.js"></script>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<!-- Cascading Style Sheets //-->
...

Then, code your website as you would usually do, make sure it passes the w3c validator checks and when you’ve finished your work, check it in all browsers, starting with the usual ones (IE9+, Chrome, Firefox, Opera) – Everything works as expected? Take a look at IE6+ and not-so-usual-browsers like Safari, Midori, etc. Any further work required? No? Lucky one.

No Comments

Post a Comment