Cross browser support: Which ones do I need to check?

[Readie]

I'm beginning to get into the cross-browser support practice, and until recently I was only checking

• Firefox 3.6
  
• IE 8
  
• Chrome 4.1
  
• Opera 10.5 (beta)
  
• Safari 4

I've now got IE 6 & 7 (happily all of my sites look fine in them :)) but I'm wondering if people could share with me a list of what they feel I should be checking my sites in, because I am fairly certain I'm not checking enough.

[incrediBILL]

What about smart phones?

You might want to test just to make sure stuff works on an iPhone and Android emulator if you don't have the real phones available.

[LifeinAsia]

Check your logs- that will tell you what browsers people are using to visit your site. Don't ignore the ones without a lot of page views- those people could be bailing because your site doesn't work with their browser.

[Fotiman]

Note, I think you mean Chrome 4.0 (there is no 4.1 yet). :)

Some good references might be the Yahoo Graded Browser Support page:
[developer.yahoo.com...]

As LifeinAsia pointed out, checking your own site stats is also good practice. For example, I personally don't try to explicitly support Opera because I don't get any visitors using that browser (and also because I trust that by developing to Firefox/Chrome/etc. that Opera should behave correctly for the most part).

And as incrediBILL pointed out, smart phone usage is on the rise... again, check your site stats to see if users are visiting your site with smart phones to determine what level you want to support them.

IE6 support has been dropped by a number of major sites, though it still has a pretty large market share. I would expect to drop support for IE6 in the not-too-distant future.

[drhowarddrfine]

I trust that by developing to Firefox/Chrome/etc. that Opera should behave correctly for the most part

I've found it better to check in Opera first. While Firefox does an excellent job of touching all the bases, they sometimes don't have 100% coverage or they let errors slide through you wouldn't otherwise catch. Opera doesn't cover all the bases but, what they do cover, is usually very thorough.

For example, I've been working on a web app that's served as XML. The first few pages looked great in FF but, when I checked later in Opera and Chrome, I got the yellow XML error screen. My XML was not well formed at a couple points. Other times things were slightly askew with my CSS that needed minor adjustments. (Note: these were minor things and not any major problems like in IE which failed hard.)

As for IE6 support, I now charge a 30% premium for anyone wanting their pages to work in it.

[Fotiman]

Well, nothing beats Firebug for debugging, which is why I choose to test against Firefox first. Plus, as I said, I don't get any Opera users... it just doesn't have enough market share for me to worry about it that much. I would be more likely to explicitly support IE6 than I would Opera, simply because it still has more market share (not that there's anything wrong with Opera).

[Readie]

You might want to test just to make sure stuff works on an iPhone and Android emulator if you don't have the real phones available.

Emulators it is then! :)

---

Check your logs- that will tell you what browsers people are using to visit your site. Don't ignore the ones without a lot of page views- those people could be bailing because your site doesn't work with their browser.

Will do, thanks for the tip :)

---

Note, I think you mean Chrome 4.0 (there is no 4.1 yet). happy!

On "About Google Chrome" it reads as:

Google Chrome
4.1.249.1036 (41514)

So my assumption was "It's V4.1" - So I'm probably just misinterpreting it.

---

Well, nothing beats Firebug for debugging, which is why I choose to test against Firefox first.

It's my go-to check too, though mainly because it's just my preferred browser.

---

Thank you for the replies guys :)

[drhowarddrfine]

I don't get any Opera users

The point is to make valid markup, not to design to a browser. My point is Opera is more likely to find errors in your markup which is the point of debugging.

Dragonfly is pretty good but I, too, have trouble tearing myself away from Firebug. Probably cause I'm so used to it.

[g1smd]

Just checked a site on a mobile phone and every page of content has the whole lot in one long column one word wide down the middle of the screen with the longest scrollbar I have ever seen. Unusable.

[rocknbil]

I'll add, my "cross browser checking" has become lax in recent years.

I think it's validation [validator.w3.org] that has made me lazy. The reason being is that if I validate every page without fail, including script output, when I do go to check it in various browsers, it's always spot on. There are always "minor" differences - slight bit more space here, type slightly larger there, but if I design in such a way that these differences don't cause navigation rows to run on two lines or otherwise blow up the layout, it's a safe bet it's going to fly well across all browsers.

For a new design, definately, I run it through FF, IE 7, then a machine with IE 6. I rarely worry about Safari, it was one of the first most compliant browsers, but run the design through the Windows version. If it makes it through IE 6, chances are very good it's going to fly. Repeat all tests with zoom and text enlarge/reduce. Then I have an old Mac here through which I test on . . .

get ready for it . . .

Mac IE 5 and Mac NN 4.

When you pick your jaw up off the floor . . . I know these are extinct, and I likely have the only two copies of them in existence, but I consider them my "acid tests." There's little doubt no one is using these, but if it flies in these, I'm feeling good about the implementation.

The ones you really have to worry about are ones that rely on font availability and font sizing to "work." The most common example is a navigation using text-based links within a fixed width container. Fonts will render very differently in, say, Linux browsers versus Windows, even with a basic arial, helvetica, sans-serif. Design in enough wiggle room to stay out of trouble, and you should be OK.

[Readie]

I do run my sites through the validator, but that doesn't stop some display errors creeping through in some browsers (ā-la annoying little 1px off errors).

Mac IE 5 and Mac NN 4.

I hadn't even heard of these before :/

The ones you really have to worry about are ones that rely on font availability and font sizing to "work."

That's quite worrying for me - I use this for low-height cells sometimes:

<td class="something"><span style="font-size: 1px;">&nbsp;</span></td>

[rocknbil]

Not to veer O.T., but . . .

I use this for low-height cells sometimes:

<td class="something">&nbsp;</td>

.something { font-size:2px; }

IE doesn't seem to like anything less than 2px . . . and can sometimes create "issues" when you try it. I forget where I picked that one up.

I doubt that in particular would wreak much havok, what does is when you have actual characters.

[Readie]

IE doesn't seem to like anything less than 2px . . . and can sometimes create "issues" when you try it. I forget where I picked that one up.

Now that you mention it, I vaguely recall reading something of the sort too.

Anyways, thanks for the tidbit there ^^

[drhowarddrfine]

I consider them my "acid tests." There's little doubt no one is using these, but if it flies in these, I'm feeling good about the implementation.

I wouldn't think so since their implementations of the standards is so poor I don't know what it proves. If a broken calculator can still show 2+2=4. does that mean anything?

[rocknbil]

I don't know what it proves.

It proves only that the document will endure rough territory. Sometime we forget that it's not our place to dictate what our visitors do, they **shouldn't** use this and it's **not safe** to do that, but it's our job to deliver the content to them regardless. I have a contact that refuses to upgrade to FireFox, and is still using NN 8 . . . hence it's still installed on my system. For updates to his projects, I still check against it, though it's probably the only copy browsing the Internet (and, true to my original statement, when the pages validate, they're fine.) His checks are still good.

Visited a client last week and witnessed four 15" monitors in the office, for example. Outdated conditions exist, it's not about me as a developer, it's about them accessing the content I create.

[drhowarddrfine]

I no longer agree with that. People who run older browsers are used to what they get and know they are running old stuff. I only support current versions of browsers and the previous versions. I've not had one complaint.

I deal with web apps and most of the things I create wouldn't run in those browsers anyway and no one is going to pay me the extra time to deal with it either. In fact, I've started charging a 30% premium for those wanting IE6 support but no one has ever asked me to do it either.

[JAB Creations]

Already on page two and no mention of Gecko?

You can't discuss this topic without directly talking about rendering engines. You might as well have everyone suggest you test in IE and AOL even though both use Trident.

Gecko - Firefox, Camino, Netscape
KHTML - Konqueror
Presto - Opera
Trident - Internet Explorer, AOL, Maxathon
WebKit - Safari, Chrome

You don't need to test all possibly browsers, just the versions of rendering engines.

KHTML is so rare it's just not something most would consider. I mean if you care about the single digit percentage then sure, load up a KDE/Linux OS and test it out, there are some issues that you'll not appreciate and want to fix unless you're not doing anything fancy.

Gecko versions are pretty easy to figure out...

Gecko 1.7 = Firefox 1.0
Gecko 1.8 = Firefox 1.5/2.0
Gecko 1.9 = Firefox 3.0
Gecko 1.9.1 = Firefox 3.5
Gecko 1.9.2 = Firefox 3.6
Gecko 1.9.3 = Firefox 3.7...possibly to become Firefox 4.

Presto is used in Opera which simplifies that. Consider what your users are using and test with a version or two older, not that you'll have difficulty with that as Opera users are very good at upgrading.

Trident can essentially be tested as IE versions. Eric Lawrence actually posted that Trident was not versioned until IE8 as Trident 4.0. IE 5.0, 5.5, and 6.0 generally have 90% of all the same bugs however I wouldn't recommend going earlier then 5.5 as 5.0 has some very nasty JavaScript bugs. Of course we're all trying to kill off IE6 and naturally will be badmouthing IE7 if people already aren't.

WebKit is a fork of KHTML. You don't need to test both Safari and Chrome. Also Chrome's versions aren't like Safari's with major WebKit releases.

Safari's major releases have been (that you may want to support) 2.0, 3.0, 3.1, and 4.0; 3.2 was not a rendering engine update according to it's documentation.

That's how the engines and browsers correlate. Why this hasn't been discussed yet well...let's just say that's why Microsoft won't remove the Mozilla bit from the user agent.

- John

[Noddegamra]

For testing in IE, I use software called "IETester" which allows you to view your site in IE 5.5, 6, 7 and 8.

I still get asked to develop for IE6. Very frustrating.

[Readie]

>> JAB Creations

Thank you very much for that very informative post - it answered a lot of questions :)

>> Noddegamra

I found a program called "Multiple IE" which can install stand alone versions of:

IE
3.0
4.01
5.01
5.5
6

I also have a stand alone version of IE7, and naturally have IE8

Cheers,
Mike

[bateman_ap]

IE6 is still used by a decent amount of users, and as long as they make up 10% of my traffic I will make a site they can buy from. If you all want to not support them thats an extra 10% for me!

[soluml]

>> JAB Creations
In regards to what you say about rendering engines, while in theory what you say is true, I've found that when it comes to actual web designing Chrome and Safari are not always identical. It's never anything major, but I had issues one time with how Safari was treating a form design I was working on while it looked fine in Chrome. Safari was adding extra space to the elements.

YMMV, but that's been my experience and it honestly can't hurt to try both of them.

[drhowarddrfine]

solumi is correct. Each browser may not be on the same webkit version level and there may be other interface bugs that affect it. However, as said, they're generally minor differences or little noticed areas.

[fedem]

@Readie you should check your analytics to figure out which browsers are the most used to enter your site.

Sometimes userīs browsers vary depending on your industry.

[albo]

I agree with @JAB Creations on one thing especially: AOL catches me every danged time. I have two friends (one of whom is also a client) who have AOL, and one, to boot, has it on a low-res monitor: a REAL challenge!

We're fortunate, at home, to have both MacOSX and Windows boxes, so I get a good spread of browsers. I've quit supporting IE6 (except for "graceful degrade"). I put in warning code adapted from ie6nomore dot com advising visitors to upgrade and providing links to do so.

Else, I test with "major 5" (Webkit, FF, Opera, Chrome, IE) and throw in Camino, Flock, Avant, and visit persnickety W3 browser Amaya offline just for the heck of it.

[roots]

I'm using some free web service to check all major browsers in case of new website.
In case the site is already running for some time, you have the browser stats (in GA for example).

[penders]

>> JAB Creations
In regards to what you say about rendering engines, while in theory what you say is true, I've found that when it comes to actual web designing Chrome and Safari are not always identical.

There appears to be differences in unicode / font handling between these two browsers on WinXP. Win7 might be OK in this respect.
[webmasterworld.com...]

So, what importance do you place on OS when browser testing?

[Nobias]

What about smart phones?

I personally wait until they get smarter :)

[dingloo]

As we develop websites for many clients, during the requirements gathering process itself, we try to find out the client's interests in:
1. Machines: (MAC, PC, Ubuntu, etc)
2. Browsers and Versions (IE 5.5, IE 6.0, IE7, IE8, FF3, FF3.5, etc)
3. Screen Resolutions (800 by 600, 1024 by 768, 1600 by 1200, etc)

We also get the client's primary choice browser and develop the application to work on that browser only - we call it 'Single Browser Functionality'. Our QA team approves this and as soon as it is done, we give it to the client to check it on this browser.

While the client tests it on that browser, our QA team now tests the application for 'Cross Browser Functionality', which also includes various resolutions, etc.

This process helps us to make sure the right expectations are set and delivered accordingly. This also helps us in our pricing accordingly.

We also believe this model will help us scale to mobile devices (iPhone, WAP, etc) based on the client's choice.

Sorry if this post was not exactly on the topic (which was only about cross browsers), but felt it would help any one who is unsure about how to handle clients who might come one day and say 'Hey why does the site not work on this browser', etc.

[Fotiman]

@dingloo, IE 5.5 has all of .01% of the browser market share... I think it's probably safe to take it off your list. ;)

[soluml]

>> Penders

There are definitely differences in browsers across operating systems. I check all my sites in XP, Vista, and Win 7 with IE 6,7,8. The other browsers I don't worry about as much.