Browser Testing Your Site

By CMN Staff

Published: Monday, October 19, 2009

Updated: Thursday, October 29, 2009

Browser percentages

The percentages of browser usage across all CMN sites.

A designer's life would be much easier if only one web browser existed. However, much to our benefit (and dismay), there are a multitude of browsers available to internet users today. This means of course, that it is best practice to make sure your site is displaying correctly in all the major browsers that your readers are utilizing.

As you can see from the graph to the right, Internet Explorer 7 has the highest number of users across the entire CMN network. You should test your site for display consistency in all of the browsers listed to the right, and also the latest versions of Safari and Google Chrome. All of the browser listed are available for browser checking on a PC platform. A good/free program for your PC to make all verions of Internet Explorer available for testing is IE Tester (click here to download). Mac users should have a PC available for browser testing purposes, or run a program like Parallels.

So, say you have made a few CSS tweaks to your site, and after your browser checks your site looks fine in all the major browsers except for Internet Explorer 6. Instead of changing your CSS (which works fine in all other browsers), you can just target a line of CSS to only apply to Internet Explorer 6. How is this possible? Through a great piece of JavaScript that we have implemented on every site, named CSS Browser Selector.

CSS Browser Selector allows you to target your CSS to different browser versions and platforms as well. Click here for a full list of available selectors, and a demo on how to use them.

It is best practice to make a section at the bottom of your stylesheet named "Browser Selector Styles" and place all the browser-specific styles there. This will keep your styles more organized and easier to locate for any future editors of your stylesheet.

 

Comments

Be the first to comment on this article!