What's the best way to test cross-browser compatibility? - css

Since the portable versions of Internet Explorer are no longer supported (and never fully worked) I'm trying to find a way to test sites in a number of different browsers.
The lag on something like browsershots.org is far too high to be practical, plus you can't test functionality.
I'm looking at using VMWare images of Windows XP with different versions of browsers installed, but it seems like a right pain.
Is there any other method of testing CSS compatibility on browsers?

If running Windows, for Internet Explorer try IETester or IE Collection. They contain all versions of Internet Explorer.

The best way is to actually install these browsers, and really use them to test. You may use virtual machines in some cases (when you want to test Internet Explorer 6 on a Mac, for example).

Like Flakron Bytyqi suggested, the easiest way is to use IETester or similar software. Using IETester for a year, I never saw any difference between its IE6 implementation and the rendering by real IE6.
Now, having multiple virtual machines can be a good idea, since:
You have to install three VM only,
You may test other browsers. For example, install side by side IE6, Firefox 2 and Opera 8,
There is no doubt: you are using real browsers, so everyone using the same browser will have the same result if the same browser options are specified.
Since installing three VM and buying three Windows licenses is not funny, I personally suggest using IETester, as said before, or using services of companies like Litmus (but it's true, you can't test functionality).

Have you tried Adobe BrowserLab?
But for functional testing I'm afraid you will have to do it in browsers. If you are using Linux, you can have a Windows XP installation with (Internet Explorer 8, Safari, and Chrome) on VirtualBox on a Linux machine (Internet Explorer 8 has an option to behave like Internet Explorer 7). And do Internet Explorer 6 testing on Wine in Linux. Checkout PlayOnLinux for running Internet Explorer 6 on Linux.

Related

What's the font-end IE version compatibility debug tools (easy shifting from IE 8 9 10 11) on Win8?

Compatibility issues are always front-end headache. need Emulators to test with diff browser versions.
As we known by default it's not allowed to install older IE versions on latest Win8 directly.
instead of using virtual machines or sandbox,
or online tools such as morden.IE / browser stack (need network or payment)
Are there any tools for front-end debugging of different IE versions that can be installed on Win8 for such kind of font-end cross-ie-version debugging?
Many thanks.
Hit F12 inside of IE. There are developer tools built in to IE 9/10/11.
The last tab on dev tools will give you options for emulating different versions of IE (note that the emulation isn't perfect, however)

Can I test on Safari 7.0 in Windows 8.x locally?

I am developing my web application locally on a Windows 8.x machine. Right now I am updating the web design for Flexible Box Layout Module support.
It is easy to test the design for Chrome and IE. But is there a way to test Safari 6.1+ support also locally?
It seems like Apple is no longer developing Safari-browser for Windows and that Safari 5.1 is the most recent release for Windows. Safari 5.1 doesn't support the most recent syntax of flexbox.
Is there an easy way to test this locally on Windows 8.x or must I get my hands on a iOS-device for local testing or put the new design live so I can test it on various testing sites?
I think it is possible if not for apples greedy licensing agreements. Search google for "OSX on VirtualBox". Virtualbox is virtualization software for running other operating systems and there are posts on how to install OSX in VirtualBox (this violate apples Terms btw - so you are warned).
I'm trying to find a legal way to test newer versions of Safari for my companies website and the answer is to buy a Mac or violate terms and conditions. We are going with Apple + Aqua Connect software. I guess the other option is to use a cloud solution like BrowserStack that allows you to test web pages for different OS's / browsers. These are browsers opened on their servers controlled by scripts you set up (so you'll spend a lot of time trying to setup the scripts if they are in anyway complex). I think they use selenium or some other browser automation tool.
FYI you can test all versions of IE on all versions of MS for free at the following website: http://www.modern.ie. This is one Microsoft actually got right. kudos to MS for making web developers lives easier.
Apple is greedy/annoying/stupid and tries to find ways to force developers to buy a Mac. Most software developers are smart enough to look under the hood and realize macs are overpriced PCs. So Apple license says you can only install OS-X on Apple hardware (or people would buy/build a cheap PC and install their software). Try developing an iPhone app without buying an overpriced Mac (look at the hardware and then look on NewEgg - you'll see they charge 3x what the hardware should cost). There is no technical reason Apple does this - its just to get your money (and I used to think MS was greedy).
No you can't test web application on Windows with Safari. Possible alternates (which you already know):
Arrange iOS device.
Use older Safari 5.1.15
Use any browser screenshots tool.
Sorry but no good solution is possible for this problem.
BrowserStack allows one to test local websites in the Safari browser from Windows using their tool: https://www.browserstack.com/local-testing. I have also seen that Sauce offers similar functionality: https://wiki.saucelabs.com/display/DOCS/Sauce+Connect+Proxy.

I realise OS specific browser testing is necessary but what about the specific OS's version?

I've been testing a website I design on my mac and also on windows. To be more specific mac osx snow leopard and windows 7.
Now I'm wondering if I will need to test further e.g. mac osx leopard, tiger ... windows xp, windows vista?
I've been wondering since I started all this browser testing stuff.
Kind regards
The only browser that's an issue IMO is IE as running multiple versions takes some setup and is not completely decoupled from the OS. The Developer Tools in IE 8/9/10 let you choose the rendering mode of earlier versions, but there are sometimes differences in the rendering between the simulated and "native" browser. Users of the other browsers (Firefox, Chrome, Opera, Safari) tend to upgrade quickly and in addition, even early versions of those browsers were fairly compliant (aside from CSS3 capabilities that were codified after they were released, but those usually degrade gracefully)
Great article in Smashing Magazine about setting up testing for IE using virtual machines.
Fonts are dependent on if the user's OS has them installed by default. Fonts have kerning (space between the characters), and if changed to a backup font with different kerning can affect the flow of your page.
Form elements (text inputs, radio buttons, dropdowns, etc.) are rendered by the browser but adhere to the OS standard settings.
In short, it's always good to get your hands on as many environments (OS/browser combinations) as possible to see what your site will look like. If you have a friend with a different set up, check it out, ask them to send you a screenshot or use one of the online services that provide this ability.

What's the most efficient and reliable method to test CSS design in multiple legacy browsers?

I'd be very interested to hear what professional developers think about this, particularly frontend developers.
How do you go about testing your designs in multiple browsers? Do you use virtual machines, each with a different version of Internet Explorer installed? What is your setup/workflow?
So, what's the most efficient and reliable way to test a design in several legacy web browsers?
Thank you.
I mostly use Spoon virtualization. They removed IE from the service aftyer Microsoft told them to however it's still a good service for testing other browsers/versions.
For IE I tend to use the Microsoft provided IE VMs.
If you need virtualization product then VirtualBox is pretty good and free.
I've also just discovered Browserling which does something similar to Spoon virtualization and has support for multiple IE versions.
Oracle's VirtualBox is free. I have the following VMs set-up:
Windows XP - IE6, Firefox 3
Windows XP - IE7, Firefox 4
Windows Vista - IE8
Really, I don't test older versions of Firefox, Chrome, or Safari. All three of those browsers are on quick update cycles now and the push their updates almost immediately. The chance that users are still using an older version of those is much less than those using Internet Explorer.
Even now, I don't really test in IE6 anymore (thank god), but I know this is different depending on the audience of your website.
Really, if you can get away with it, do your basic testing in IE 7, 8, 9 and the latest versions of Firefox, Chrome, and Safari. Don't go completely out of your way to fix layout issues in older IEs; If you can get the information you want from the site, then the site is functioning. If someone complains about the site not looking exactly right, recommend they upgrade or switch browsers. "I can't upgrade from IE6 because my company uses it" is not really a valid excuse anymore with Chrome and Firefox being as light weight as they are, unless their computer admins have things completely locked down.
IE Tester allows to see web from ie5 till ie9.
http://www.my-debugbar.com/wiki/IETester/HomePage
It depends how legacy you wonna go but there is also Adobe browser lab.

How to emulate IE7 and FF2?

I build a webpage and in IE8 + FF3 it goes well, but a friend opens it in ie7 and it's terrible.
How can I emulate IE7 / other things / FF2 in my Windows 7 envoirement?
You need to run in in a virtual machine as you can't have multiple versions of IE installed on the same machine the same time.
Downlaod Virtual PC 2007
Download the IE7 Virtual PC image from Microsoft. There's also an IE6 image there.
You can also install FF2 on the virtual machines safely.
IE8 has a Developer Tools utility under Toos->Developer Tools. You can change Compatibility Mode to view how the page would look in IE7. As for FF2, the only way I know of is to actually have FF2 installed. Maybe you can find an older download package?
Once the utility opens there is a Browser Mode: box on the top menu. Change that to IE7, and it will render the page as IE7 would.
I've used the 'Superpreview' feature that comes with Expression Web 3, it has help me to get a page working with IE8,7 and even 6, along with FireFox. You can get a free trail if you can't get the full version.
You can use IETester for IE 5.5 to 8 for emulation. You can add on DebugBar (by the same developer) into IETester for Firebug-like debugging.
However Firefox I'm not sure. The only thing I can think of is to download a clean FF 2 and install it on another computer.
As for Firefox, you can use a portable version.
Various options locally:
Run multiple virtual machines hosting different browsers (or combinations of browsers)
The latest version of expression has a fairly comprehensive browser comparison tool
There are some clever IE hacks out there too.
Also online
Browsercam (and similar sites)
Adobe Browserlab possibly - not sure how "live" it is yet.
There are a number of simulators, one at least from MS to let you view in different IE browser versions. However they are simulators so may not accurately reflect the actual browser. Another way, but it might be over the top for your purposes is to install VM's and put the real browser in each VM to do the testing.
I'm currently using Internet Explorer Collection which gives me over a dozen versions of IE, not that I test that many but it's interesting to look back at occasionally.

Resources