Your website will be viewed by possibly millions of people for as long as it stays out there on the web. Because everyone uses a different browser, there's really no way of determining which browser -- or device even -- will be used to access your website. It only makes sense that you try as much as possible to ensure that your site is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. Designing for cross-browser compatibility can be quite a bit of a headache since various web browsers parse/render web code differently; but as far as cross-browser compatibility issues go, Internet Explorer (IE) is undoubtedly the "head honcho". I have never hidden my distaste for Internet Explorer and its handling of web code. Though 'most' of the code handling issues have been fixed in IE9, Internet Explorer still remains a pain for most front-end developers. The issue: If you have been developing websites for some time, you would surely have noticed that certain things that work fine with other browsers either simply don't or require some type of iteration to display/function correctly in IE. A good example of this is the HTML5 placeholder design attribute -- a very useful User Experience (UX) design tool by the way. Placeholders are used to relay information to the user about what is required from them when filling out a form text field without having to include additional code. The code for this is as simple as: <input type="text" placeholder="Search this site" /> The output for this would be: As always, this works fine in all the major browsers (Firefox, Chrome, Opera, Safari) except the legendary Internet Explorer; and holds true for all versions, including IE9. Getting around this: The original way to do this would be to drop the placeholder attribute altogether and use Javascript (or jQuery) like so: <input type="text" onBlur="if(this.value=='') this.value='Search this site';" onFocus="if(this.value=='Search this site') this.value='';"> OR You could enable HTML5 placeholder support for legacy browsers using a plugin such as Daniel Stocks' jQuery placeholder plugin. We actually use this plugin and can confirm that it works, and that it is compatible with IE 6+, Firefox 3+, Safari 3+, Chrome, Opera, iPhone, and Android. What's more, the plugin is real easy to use: 1. Load the jQuery script into your page: <script src="jquery.placeholder.js"></script> 2. Call the function by including this at the very end of the page's html code (i.e. right before the </body> tag): <script type="text/javascript"> $('input[placeholder], textarea[placeholder]').placeholder(); </script> What this does is it toggles a ".placeholder" class for browsers that don't natively support placeholders so, in order to make this work, you would have to create a style rule for this class in addition to your native styling for HTML5 placeholders, as follows: ::-webkit-input-placeholder {color: #ABC0D4;} :-moz-placeholder {color: #ABC0D4;} .placeholder {color: #ABC0D4;} What I particularly like about this script is that it also provides support for password fields. Did I mention that it works with all legacy IE browser versions as well as IE9 ? As much as I hate to admit it, if your work involves designing for the web, you simply cannot run away from Internet Explorer. Why? Well, it's only the 3rd most commonly used browser in the world (next to Chrome and Firefox), and chances are that nearly 30% of your site's total visitors could be using Internet Explorer - that is of course if you share the same geographic niche as us. As annoying as this can be, you might as well learn to incorporate workarounds such as this one in your front-end design.
