If you’re building web sites you should know that cross browser compatibility is part of the job title. For the layman, cross browser compatibility means that your web site should work in all browsers as well as browser versions. From IE8 to Google Chrome to Firefox and now a day all of the mobile browsers that are native to smart phones, tablets and other hand held devices.
All browsers render code differently. What looks good in your version of Firefox may well be broken in another browser. For instance with Internet explorer a broken or missing image displays as a box with a red x in it whereas with Firefox the image just doesn’t display at all. For these reasons and a whole lot more, it’s important to view your website in multiple browsers to make sure you are seeing what your visitors do.
In this post, I will be talking about using Internet Explorer 10 to test websites for older versions of IE and make sure that they are compatible across the board. Testing in older versions of IE can be a chore since you need to have different machines to run different versions of this browser. However by using IE 10 you can take advantage of ‘Developer Tools’ to see how pages appear in the older version of this browser down to IE7 and if you have to develop for IE 7 standards I am truly sorry.
How to Launch Developer Tools in IE
If you’re already using Firebug in Firefox to track down code issues this should sound fairly familiar to you. Simply press F12 to launch Developer Tools. This will launch Developer tools which will give you a number of options for debugging code. Outlined below are a few tools for tracking down issues in IE.
This is more of a tool for the search engine optimization developers out there. This is a great tool for seeing what the bots see. Bots only see the code when they index your website. By disabling the css you can view the hierarchy of your code. From here you can get a better idea of what is getting more importance and optimize your headers, links, strongs and in a better visual representation.
Under the images tab, you can get design information in the form of a report. Included in this report generated by Internet Explorer are things like image height and width, alt and title text, files size and file location. If you’re performing a lot of image updates this information can come in extremely handy as this type of work can be extremely tedious.
Cache & Cookie Options
When developing new web sites it’s often necessary to clear your browser cache in order to see updates and changes you make. This is accomplished using the cache option built into the compatibility tab in IE 10.
IE 10 Compatibility Mode Screen
Once you’ve launched IE10 into compatibility mode you’ll see the option for browser mode in the top chrome of the browser. IE10 goes all the way back to Internet Explorer 7. Again I’m truly sorry if you’re testing for this browser.
User Agent Panel
As you can see from the User Agent screen you can choose various browsers, bots, and devices to test for. I’ve only tested the IE versioning. I don’t know from using this to emulate bots, devices and or tablets. It’s been my experience that the majority of device emulators currently available render code differently than the browsers and devices that you’d be testing for and are no good for CBC testing.
Browser Resize Panel
In the browser resize screen you can test that your designs fit into a given desktop size. You can use this to make sure that your elements will fit the various screen resolutions of your visitors. You can also set custom sizes in here as well if there’s a particular resolution you continually develop for.
HTML Validation Screen
Last but not least, is the validation screen. From here you can run your html, css, feeds, links and local code through the W3C validation on validator.w3.org. Running this tab will evoke a new window that the validation service runs in and gives you notifications of what elements aren’t W3Compliant.