- October 2nd, 2007
- 55 Comments
Cross-browser compatibility is still one of the most complex issues when it comes to web-development. Web standards usually guarantee a (relatively) high degree of consistency, however no browser is perfect and particularly older browsers have always been quite good at surprising web-developers with their creative understanding of (X)HTML/CSS-code. Still you need to make sure that (at least) most visitors of your web-site can use it, navigate through it and find what they’re looking for as quickly as possible.
Browsers Tests Are Necessary
The truth is that a) you never know who might type in your url in his/her navigation toolbar and b) the browser-environment is still very quirky and the risk of inconsistent presentation is simply too high to ignore it. For instance, different browsers and operating systems use different techniques for rendering fonts (Win vs. Mac on handling fonts1). The font size isn’t identical on different platforms and some fonts might not be installed on the user’s system.
Firefox on Linux doesn’t display web-sites as Firefox on Windows does. As bonus web-developers have to cope with dozens of versions and, of course, Internet Explorer 6 — 46% of browser usage share4, which is a true godsend for hardcoders and hackers. It’s almost impossible to keep all possible problems in mind — a detailed test helps you to identify the critical issues — also and particularly if these are the smallest details of your layout.
Browsers Tests: What Can You Do?
In fact, browser inconsistencies are hard to deal with, and to be able to deal with them you have to know what the problems are and what browsers render your site in a quite creative way you probably haven’t expected. To ensure the (more or less) identical presentation in browsers you need to verifiy its consistency in a number of browsers — before going live with your project.
And to do just that you can either install a number of web browsers or use web-based browser test services; the latter provide you with an instant remote access to the browsers (via Virtual Private Network (VPN)) or instantly deliver the screenshots of your site
- in different browsers (Mozilla family, Internet Explorer, Opera, Safari, mobile Browsers),
- in different screen resolutions (usually 640×480, 800×600, 1024×768, 1200×800)
- and on different operating systems (Mac OS, Linux, Win).
The effect of your changes can be observed instantly — although you don’t have the browser installed on your PC.
Let’s take a look at some useful services, web-tools and applications you can use to keep an eye on the cross-browser presentation of your site in older, current and new browsers.
Problem Case #1: Internet Explorer
By default you can install and run only one version of Internet Explorer on your PC. However, usually you need at least two versions (IE 6 and IE 7) to cover the most quirky bugs in the most used browsers out there. You can use Microsoft’s Virtual PC5 to run multiple browsers simultaneously. But it doesn’t have to be that complex — alternatively you can use TredoSoft’s Multiple IE’s package6.
It is not difficult to follow the instructions and get any version of Internet Explorer (IE3, IE4.01, IE5, IE5.5, IE6) running in standalone along side other versions. All versions are included in the installation package (10 Mb). Please notice that the package doesn’t always work properly; for instance, sometimes IE5, IE5.5 and IE6 crash unexpectedly. Still the tool is useful and better than nothing. The installer works in Windows XP, Windows Vista users have to use Microsoft Visual PC 20078.
Problem Case #2: Safari
Also only one version of Safari can be installed under Mac OS X. The current version of the Web Kit Framework determines the rendering of web-sites. Multi-Safari11 offers 10 Safari-versions (1.0 to 2.0.4), which can be installed along side other versions.
Multi-Safari offers a dozen of Safari versions.
Problem Case #3: Linux
If you need to test your web-sites in browsers which run under Linux — for instance for your intranet — you might want to check out Knoppix13 or Ubuntu14. With Knoppix you can run Debian GNU/Linux in 5 minutes. In both cases you can start Linux from your CD-ROM. No setup and no installation is required.
Smashing Magazine in Ubuntu’s Firefox
Knoppix has Konqueror and Mozilla already preinstalled; Ubuntu has Firefox 2.0 already “on board”. The free download is possible via BitTorrent or FTP (in both cases 700 Mb); you can also order a free CD.
Browser Tests: Online-Services & Tools
If you have critical issues with your sites you might find it extremely useful to install multiple versions of web browsers on your PC. However, if you need to find your way through some minor inconsistencies you might use web-services and web-tools instead. The choice is quite big, however most services aren’t free.
- IE Web Renderer16
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5. The Mixed- und Difference-Views instantly display the differences in site presentation (IE6 vs. IE7) overlaying both screenshots upon each other.
When you submit your URL, it will be added to the job queue; so it depends on the server load when you can observe the taken screenshots. Therefore it’s useful to set a bookmark and visit the site later — the tool offers neither e-mail- nor RSS-notification. You can also download all screenshots in a .zip-file. And there is some nasty advertising. We’ve got a fake security message (pop-up) on load.
Formerly SiteVista, this web-based application doesn’t only provide you with the screenshots of your web-sites, but also offers you the management of your compatibility tests. The screenshots are created in 30 different browsers within seconds; you can also see your entire page from top to bottom, not just the area visible above the fold which is similar for other services. The service also includes a version management tool, and a bug tracking system.
The tool currently generates screenshots for 17 browsers under Windows and 6 browsers under Mac OS X — more browsers will be added shortly. The tool isn’t as comprehensive as other services, however the price is quite high – 39$ per month for an individual license. What is interesting is that you can also generate screenshots of your email newsletters as they appear across email environments Outlook 2007, Outlook 2003, Outlook 2002, Outlook 2000, Gmail, Hotmail and AOL Mail.
The service offers screenshots of Internet Explorer, Opera, FireFox and Safari under Windows, Mac, and Linux. This results in 24 possible combinations. Price: 15$ for one time use, $150 per domain/year for unlimited use.
Browsrcamp generates Safari 2.0.4-screenshots (full size) in five screen resolutions (800 – 1600 px width). The tool itself is free, but Browsrcamp also offers the OS X Live Test24 — a service which gives you the possibility to test your websites by taking full control of a Mac OS X system. You only need to have a VNC client25 (Virtual Network Computing) and a fast connection. Thus you can control your presentation on Camino, Firefox, Flock, iCab, Mozilla, Netscape, OmniWeb, Opera, Safari, SeaMonkey and Shiira remotely. The price range: between 3$ for two days and 99$ per year.
Of course there is a fullsize screenshot – full page length
Browsercam, probably the master of screen capture services, also offers an extensive browser remote control via a virtual network client. The number of available browsers, versions and operating systems is permanently growing. 70+ browsers, Linux, Win, Mac and even the presentation in different versions of browsers on mobile devices (BlackBerry, Win Mobile) can be tested. You can also adjust the screen resolution (640×480, 800×600, 1024×768), set up the access to password protected sites and download all screenshots in a .zip-archive.
The service offers everything you might ever need. Browsercam has different price plans; the price varies bettween 20 and 1000$ per month. There is also a 24 hours free test evaluation which requires the registration on Browsercam.
The choice is huge……
…and there are even more screenshot options!
Browserpool offers a number of possibilites and screenshot options – probably everything you ever might come up with. Hundreds of combinations, dozens of browsers, thousands of screenshots. This screenshot-service also offers a remote access via a VNC-client. The price range: $40 (per month) und $477 (per year). This package includes 40 free hours per month. You can hold the connection to several dedicated servers at the same time or use the account together with other colleagues simultaneously. To use BrowserPool you need to download a viewer program. Using it you can directly work with a remote browser. There is a free limited test account.
- How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)33
The number of extant browsers we need to check with are enormous: Internet Explorer (IE) 7, 6, 5.5 and 5.0, Firefox 2.0 and 1.5, Opera 9 and 8, and so on. And then there are the different platforms: Windows, Macintosh (Mac), Linux, etc. The problem for most people is that multiple versions of certain browsers cannot co-exist with each other, the most notable example of this is IE for Windows. Unless you are privileged to have multiple computers, this presents a certain difficulty for the average webmaster. This article suggests some ways for you to run multiple versions of multiple browsers on one computer.
What can your browser?
New browser versions offer new techniques for web-developers; for instance, Safari offers the support of some CSS 3 attributes. You can also test what your browser can and what other browsers are capable of. For instance to find out which attributes you really should use in your projects. And which attributes you shouldn’t use.
- Acid 2 Test34
A modern browser should be able to render this complex image, generated with CSS. Most browsers fail.
- CSS 3 Selectors35
Is your browser compatible?
- CSS2 Test Suite: Prototypical Pages36
by Eric Meyer
- Acidic Float Tests37
The following tests show a floating logo that should stick out of its parent header, a DIV. Subsequent boxes should respect this float.
- CSS Test Suite38
These test pages test every aspect of CSS 2.
- CSS Tests and Experiments39
A number of examples check what the browser supports and what it is capable of.
- Cascading Style Sheets Test Suites40
Test suite for Cascading Style Sheets level 2 revision 1 by W3C
- PNG Test41
The suite of PNG icons for testing PNG decoder engines, PNG viewers, and PNG browsers. Most of the icons are 32×32, and they run the gamut from 1-bit to 64-bit depth; grayscale, colormapped and truecolor; interlaced or not; and with or without simple transparency, full transparency (alpha channel), background chunks, histograms, gamma or chromaticity data, comments, time stamps, and physical pixel dimensions. There are even three invalid PNG images included, one 0×0 in size and the other two corrupted by non-binary transfers.
- 1 http://www.joelonsoftware.com/items/2007/06/12.html
- 2 http://www.w3counter.com/globalstats.php
- 3 http://www.w3counter.com/globalstats.php
- 4 http://www.w3counter.com/globalstats.php
- 5 http://blogs.msdn.com/ie/archive/2007/08/20/ie6-and-ie7-vpc-refresh-available.aspx
- 6 http://tredosoft.com/multiple_ie
- 7 http://tredosoft.com/multiple_ie
- 8 http://tredosoft.com/Multiple_IE?page=2#comment-2619
- 9 http://www.iecapture.com/
- 10 http://www.iecapture.com/
- 11 http://www.michelf.com/projects/multi-safari/
- 12 http://www.michelf.com/projects/multi-safari/
- 13 http://www.knoppix.net/
- 14 http://www.ubuntu.com/
- 15 http://www.ubuntu.com/
- 16 http://ipinfo.info/netrenderer/
- 17 http://ipinfo.info/netrenderer/
- 18 http://browsershots.org/
- 19 http://browsershots.org/
- 20 http://litmusapp.com/
- 21 http://litmusapp.com/
- 22 http://www.netmechanic.com/products/browser-index.shtml
- 23 http://www.browsrcamp.com/
- 24 http://www.browsrcamp.com/osx_livetest.php
- 25 http://en.wikipedia.org/wiki/Virtual_Network_Computing
- 26 http://www.browsrcamp.com/
- 27 http://www.browsercam.com/
- 28 http://www.browsercam.com/
- 29 http://www.browsercam.com/
- 30 http://www.browsercam.com/
- 31 http://www.browserpool.de/
- 32 http://www.browserpool.de/
- 33 http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml
- 34 http://www.webstandards.org/action/acid2/guide/
- 35 http://www.css3.info/selectors-test/
- 36 http://meyerweb.com/eric/css/tests/css2/index.html
- 37 http://www.satzansatz.de/cssd/acidicfloat.html
- 38 http://www.richinstyle.com/test/
- 39 http://www.brunildo.org/test/
- 40 http://www.w3.org/Style/CSS/Test/
- 41 http://www.libpng.org/pub/png/pngsuite.html