Cross browser compatibility

Hi,

what is the best way to check cross browser compatibility? How are You dealing with that. There are many browsers, operating systems, mobile devices etc. What to do?

Cheers!

The best way is to install multiple browsers on your computer, and then you can check pages in all of them. I’ve got Opera, Chrome, IE8, Firefox and Safari. The biggest problem is not being able to install multiple versions of IE on a single computer easily, because (i) IE shows much more differences between newer and older versions than other browsers, and (ii) there are loads more people using old versions of IE than of all the other browsers put together, due to its market share and the lack of auto-upgrade. Likewise, the only way to test mobile compatibility is to try it out on a mobile phone.

That seems like a very hard task… And what about Linux etc… Isn’t there a service that can do that? How are other people handling that?

If you’ve written decent HTML and you’re using standard CSS and proven scripts then it isn’t such a big deal. You don’t need to constantly check every page in every browser, because the critical factors will probably be the same on every page, and once you’ve solved them once then they will work in the future. For example, I very rarely check my sites in multiple browsers when I’m adding and updating, it was only the first time through when I was designing then, or if I make any major changes.

What do you think of programs like IETester for allowing you more easily test in multiple versions of IE?

I myself have used IETester before but have ditched it for virtual machines on my Mac and just IE9 on my PC to switch between IE7/8, i have found IETester to be buggy and sometimes inconsistent with testing because of it’s emulated environment. If you can’t afford setting up virtual machines and such which on Windows isn’t needed anyway unless you still support IE6 still IETester would be an acceptable solution for IE testing but not a recommended one.

Just my 2 cents.

I have also installed IE Tester, its great allows you to test you website on different IE version, you might get more similar kind of tools which can fast your cross browsers checking process.

I think that virtual machines are also cool option. Are there any good emulators for smartphones?

You could have a read at this recent thread. http://www.sitepoint.com/forums/showthread.php?820657-How-To-Check-If-Your-Website-Is-Compatible-With-Mobile-Devices

If you write standards compliant html and css (validate using the w3c validator) then you should be pretty much ok regarding browser compatability. Well with IE7+ and the other major browsers. During development, and certainly before publishing live, I test the website in all the browsers I guarantee to support. With subsequent minor updates or edits I test in only the latest IE and FF. If the page works in those 2, then it should still work in the other browsers I support. With major changes I would normally then check them in all the browsers I support. As long as any updates, major or minor, still make the page w3c standards compliant then you should be ok.

for mozilla you can use Utilu Firefox Collection.

I use IE Tester as a guide only, it is very buggy and has issues with Javascript too.

My standard tests are Firefox (Latest), Google Chrome (Latest), IE9 and IE6 through IE9 in IE Tester. I also use Adobe Browser Lab (12 month subscription comes with most of the recent Adobe products) for all others required by a specific task, I only support basic cross browser compatibility as default, the client needs to specify if they want more than basic IE6 support.

As said a few times above, generally speaking good code that validates is a good starting point, allot of cross browser issues is in the code not the browser. As you get more experienced you will start knowing what is going to or likely to cause an issue and where the issue will come from (IE6 double margin bug for example) and you will either code around it or apply fixes at the same time.

Don’t get bogged down in cross browser pixel perfection, it is a waste of time and effort, make sure your sites work well (should be almost perfect) across the latest browsers (IE9, FF, Chrome and Safari), ensure your site is presentable and works well in IE7, IE8 and Opera and then try to maintain at least reasonable IE6 support. The only time a separate style sheet should be used is for IE6 and if really necessary on complex layouts IE7 only style sheet can be useful. There should be no instances where IE8+ requires there own style sheet if your code is good to start with and you are willing to live with minor pixel differences in places.

Thank You :). Cross browser pixel perfection is rather a dream anyway as fe. fonts in Linux usually tend to be a little bit different etc. Still we have to take care of many browsers. Isn’t there a trend now to dump IE6 and not care anyomore?

I don’t trust most ‘tools’ for testing – IETester is cute, but it’s buggy, unreliable, unstable, and to be frank, doesn’t do all that great a job of pretending to be IE. The testing websites like browsershots are even more useless given the delay in getting results, inability to test interactions, and again results that don’t come close to ‘the real thing’.

Which is why I test in VM’s. I have VM installs of 98, 2k and XP in Oracle VirtualBox with the appropriate ‘native’ copy of IE installed in each… with XAMPP running under the host Win7 I’m easily able to access my templates as I build them, testing as I go. I use VirtualBox because I’m sick of how vmWare basically cripples the host OS by sinking it’s tendrils in needlessly deep, and because again, to be frank, Microsoft Virtual PC is even more buggy, unstable and unreliable than IETester.

<aside>Shame as Virtual PC used to be so good back when Connectix was on the job, but Microsoft has let the parts that need updating fester, while tacking on bloat for Blake only knows what. (Connectix 2.2 was better than the current release!)… it’s worse than what Symantec did after buying out Powerquest… or what Adobe did to Aldus.</aside>

Off Topic:

Hmm, now THERE’s someplace ASIDE would be semantically correct – marking up OT, related to the discussion but not the topic, back-explaining the conclusions.

Indeed! It’s certainly not what a sidebar is for.