Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

CSS: Browser testing order

I would prefer that clients save money for more valuable things than achieving pixel perfection

It's been a while since I wrote about CSS on And All That Malarkey, (Ed says: It's been a while since you wrote about anything here Malarkey!.) I've been busy documenting some of my working methods and thought that I would share Stuff and Nonsense's current CSS/browser testing order.

Browser testing order

Unless we are working to support a client's specific browser matrix (which might include odd combinations of older browsers), this is the order in which we test our CSS in browsers.

  1. Firefox/Flock/Camino on OSX

    Firefox is my development browser during the first phases of CSS development. No other browsers in my dock gets opened.

  2. Firefox/Flock on Windows XP

    We ask all of the people in a client's team to view our working development files and prototypes only using Firefox and let them know the reasons why.

  3. Safari on OSX

  4. Internet Explorer seven

    Like most, I'm sure, I'm hoping that adoption of seven is going to be rapid. We tweak and apply fixes for seven using Conditional Comments.

  5. Opera on OSX and on Windows XP

    I know that some designers and developers swear by using Opera as a development browser, but for us it's lower down in the testing order. Oh, and we only test the latest Opera versions as it's common wisdom that Opera users are fast adopters of new versions.

  6. Internet Explorer 6 on Windows XP

    Yes, it's almost always the last, the very last, the get ready with your Conditional Comments browser. With seven now released, explaining to customers that their visitors using IE6 will/may get a lo-fi experience just got a whole lot easier.

But what about?

Mac IE5? Unless a client has specified otherwise, we write it into our contracts and specifications that visitors using Mac IE will see the content styled by only the browser styles and no author styles. I do this by hiding all author CSS with @media="all" { } around my all author styles. (If a client specifies Mac IE as part of their matrix, this will usually cost a little more.)

IE5/5.5 on Windows? Again, we make it clear to customers that unless they really need (need, not want) to achieve the same design in these older browsers, that we test only to make sure that the content is accessible. (Again, if a client specifies IE5/5.5 on Windows as part of their matrix, this will usually cost a little more, but I would prefer that they save their money for more valuable things than achieving pixel perfection between a CSS savvy browser and one that is in declining circulation.)

So that is our order, give or take a few obscure/Linux things, and it seems to work pretty well. Any thoughts?

Replies

  1. #1 On November 10, 2006 03:37 PM James Garside said:

    Sounds pretty reasonable to me. I develop using FF on XP then test for IE7, flock and opera. even NN just out of interest.

    I have a neighbour who will check FF/IE/Safari OSX, (We're a bit out in the sticks here)

    I only have the one PC, how can I test if a site works on previous versions of IE?

  2. #2 On November 10, 2006 03:48 PM ganges said:

    In Linux Firefox 2.0 and Opera 9.02 (some minor issues) - are pretty the same as on Win platform.

    As for Konqueror - should be fine (KHTML rendering engine, and Safary use it, i bet, You know this fact)

    I'm always curious, - what, under the Sky, keep people touse IE Win 5.0/5.05? If technical constraints, what is it?

  3. #3 On November 10, 2006 03:49 PM Nick Roper said:

    No mention of Linux implementations of any of the browsers - any particular reason?

  4. #4 On November 10, 2006 03:51 PM Nick Roper said:

    Just seen ganges comments re FF/Opera under Linux. Is it safe to assume that if they work on Windows they'll be OK on Linux ?

  5. #5 On November 10, 2006 03:57 PM ganges said:

    @James

    You can use Virtual Machine or
    Multiple IE Installation

  6. #6 On November 10, 2006 04:00 PM ganges said:

    @Nick Roger #4

    95% YES

  7. #7 On November 10, 2006 04:19 PM Nick Roper said:

    @ganges #6

    OK, thanks.

  8. #8 On November 10, 2006 04:27 PM Jordan Ryan Moore said:

    @gangus:

    There are people who keep IE5.x solely because they don't know any better, or just don't care. My grandma has a Windows 98 PC with IE5. She probably has no idea IE6 even exists, and she wouldn't know how to install it anyway.

  9. #9 On November 10, 2006 05:07 PM Guilherme Zuhlke O'Connor said:

    I develop using Firefox OSX fist, partly because is the browser I personally use and like.

    But I agree with Dan Cederholm when he says you should write the most standards compliant code and then degrade to comply with browser specific situations.

    That makes me think that may be wiser for me to start developping on Opera first, because AFAIK is the most standards compliant well known browser.

  10. #10 On November 10, 2006 05:33 PM pauldwaite said:

    we write it into our contracts and specifications that visitors using Mac IE will see the content styled by only the browser styles and no author styles. I do this by hiding all author CSS with @media="all" { } around my all author styles

    I'm interested that you make the effort to hide CSS from Mac IE 5. As it's no longer supported by Microsoft, I don't think it's worth bothering with at all (like Netscape 4).

    @ganges: only 95%? Isn't the code for the Mozilla rendering engine the same across all platforms?

    @Jordan Ryan Moore: install IE 6 for her! Please!

  11. #11 On November 10, 2006 06:46 PM Philroche said:

    Hi Andy,

    Are there many differences between Firefox, Flock and Camino as they all use the same Gecko rendering engine?. I'd have thought that if it works on one Gecko browser, it's going to work on them all (providing they are all using the same version of the Gecko engine).

    Looking forward to the book ;)

    Regards,

    Phil

  12. #12 On November 10, 2006 07:57 PM Ben Ward said:

    @pauldwaite ’ I guess the point is, for sake of an extra line of code an a closing brace, why not keep things clean and tidy in IE5/Mac?

    Sure, it's no officially supported, but it is still out there.

  13. #13 On November 10, 2006 09:31 PM Matt Robin said:

    IE 5/5.5 has truly died a death hasn't it?! We now consider IE 6 to be the limit of our testing schedule....

    c'mon - do you REALLY test in Camino? :D

  14. #14 On November 10, 2006 10:02 PM Jonathan Nicol said:

    I'm pleased to hear you recommend using conditional comments to target inconsistencies in Internet Explorer. I'm amazed how many talented and respected developers are still banging on about how to get their hacks working in IE7...

    Your browser testing order sounds sensible. Personally I will do all my initial PC testing before turning the Mac on, but that is because I develop on a PC, and getting up to and cross the studio to the testing Mac takes longer than booting IE6/7. In 99% of cases Safari won't give me any grief if the site is solid in Firefox.

    At first I thought your suggestion to hide styles from IE/Mac was a bit extreme, but I guess it is better than serving up a garbled mess. Or even worse, spending the time to get the site working properly in that poor excuse for a browser (yeah, yeah, I know it was 'the bomb' in it's day, but it's 2006 now, and its ship has sailed!)

  15. #15 On November 10, 2006 10:03 PM Malarkey said:

    @ Matt Robin: I do see that fewer clients are asking for IE5/5.5 to be included in their 'pixel perfect' support chart: Perhaps I just have enlightened customers. To answer your's and Phil's question, I happen to use Flock as my own browser (it's snippets feature is great for writers and the Flickr integration is fab for Flickr heads). I test in Firefox too (habit I suppose) but only give Camino the 10 second test on elements where I know problems can creep in.

    @ Ben Ward: I agree, the extra few characters needed to ensure that MacIE5 sees only browser styles is well worth it.

    @ Nick Roper: I have got Umbongo Linus installed on my Big Mac with large fries, but jeebus! Who is geeky enough to want to use it? ;)

  16. #16 On November 10, 2006 11:03 PM Bramus! said:

    Here at work we have a sort-like system (using XP machines):
    - develop site and constand viewing with Firefox + checks in Opera (which will render it well too)
    - start hacking for IE7
    - start hacking for IE6 (not that much hacks needed if you get it to trigger in standards mode and can predict - by experience - what will be encountered)
    - take a peek with OSX' Safari too ... mostly it'll be fine too.

    And by default we to do not provide suppport for the IE 5.x series (both PC and OSX).

  17. #17 On November 10, 2006 11:49 PM Justin Halsall said:

    Personally I use Webkit browsers for development (safari, xyle scope, etc)
    Then I switch over to FF check if there are any tweaks to make and then fire up IE on the PC side

    (Opera gets checked at the same time as FF does)

    For any CSS work I recomend using Xyle Scope as this is my favorite and most used tool (Far better than the FF Web Developer extension)

  18. #18 On November 10, 2006 11:58 PM AlastairC said:

    It's similar at work for us, but if it's a new layout variation I'd get IE6 & 7 out to test the layout before moving onto the details.

    We do tend to (have to) support IE 5.0, 5.5 & Mac IE, but use separate style sheets to do so after it works in the standards based browsers.

  19. #19 On November 11, 2006 06:23 AM ganges said:

    @pauldwaite #10

    Yes, but Opera have some littl diff.
    Ok, may be 97% :)

  20. #20 On November 11, 2006 11:35 AM Andy Hume said:

    Hi Andy,

    I normally try to constantly test in Firefox and IE6 as I go along. Particularly if it's a heavy JavaScript application.

    This covers the two major rendering engines and generally ensures I'm not going to have to make any major refactorings later to allow for bugs on these main platforms.

    To be honest, I'm not quite sure how IE7 fits in to this yet. I'm tempted to stick with IE6 for now and just test IE7 after major chuncks of work (along with Safari, Opera, Camino, etc...), when it always seems to play along quite nicely anyway.

    We're still supporting Win/IE5.5 (as it's DOM support is not too bad) which does give some headaches at times, but generally the odd box model hack pulls it in to line fairly quickly.

  21. #21 On November 11, 2006 12:42 PM Isofarro said:

    Hi Andy, your list of browser support reminds me very much of the Yahoo! Graded Browser Support grid. I was slightly sceptical about it before, but since assimilation, I'm more and more convinced its a sound way of approaching web development.

    On your point about Opera users tending to use the most up-to-date - the conventional wisdom isn't as solid as it seems. There are a large group of Opera users still using pre version 9.0 browsers (and still some using pre Opera 8.5 versions) - big enough, in my opinion, to challenge the conventional wisdom. But yes, its a cost-benefit decision of deciding whether to fix a rendering bug in Opera 8.5.

    The surprising difference between Camino and Firefox is the rendering of form buttons - because Camino uses a Mac-like widgets, the form buttons take up a little bit of extra room. So if you have a form in a small space, check it out in Camino.

    One of the things I'm regretting since joining Yahoo! is chosing a Windows laptop instead of a Macbook pro. The other team members can test virtually all browsers they need using OS X and Parallels (Since Parallels takes full advantage of the MacBook pros Intel chipset, and runs Windows/Linux images at near full speed).

    I'm stuck using a Windows laptop VNCing to a mac mini (which itself is running Parallels). Its okay for static pages, but where there is decent interaction (like drag and drop), testing over a VNC connection borks any interactivity.


    Mike.

  22. #22 On November 11, 2006 01:03 PM Caterwomtious said:

    I've just implemented a new design for our home page, and I went with:

    Firefox 2.0
    Firefox 1.5 (no different to FF2 as it turned out)
    IE7 (very few problems)
    IE6
    IE5.5
    IE5.0 (not looking for perfection, just making sure it's readable)
    IE4 (just for a laugh - it was a hideous mess!)
    Opera 9 (one minor issue I've still to fix)

    Then I switched to the Mac to check:
    Safari 1.1
    IE5.2 (looking for readability, not perfection)

    I used conditional comments to support all versions of IE, and wished for them in other browsers.

    IE5.5 is still at 4% in our stats - higher than all versions of Safari and Opera combined. This is larely due to staff stuck with IE5.5 due to a glacial internal rollout (which'll stop dead with IE6 as everyone's on Windows 2000).

    I use Safari 1.1 because that's all we have thanks to Apple's OS lock-in. Anyone know how to run multiple versions? I leave Mac until last because our vintage G4 isn't allowed on our network (some short-sighted rubbish about viruses) so I have to go 56K onto the Internet and back in through a sluggish portal to see our Windows development server. Each refresh takes about 30 secs.

  23. #23 On November 13, 2006 04:21 PM Robin said:

    Multi Safari

    It's not 100% though. Ideally you'd run an up-to-date Mac with virtualised images of the older MacOSes.

  24. #24 On November 13, 2006 04:46 PM albertofs said:

    Unfortunately still ie6 is vastly extend, at least in Spain. So, for my and many more css designers to test in explorer 6 is the second step in the browser testing process.

  25. #25 On November 14, 2006 02:46 PM Khairudin Lee said:

    Any thoughts?

    To hell with IE5 Mac.

    Just focus on FF and IE 6+. It'll be more than safe.

    ps: oh and a little xmas gift!

  26. #26 On November 14, 2006 02:50 PM Khairudin Lee said:

    Btw, i've yet to read my vendetta! Can you believe it! It's still in my drawer!

  27. #27 On November 15, 2006 03:16 AM Martin said:

    @ ganges: a couple of reasons to account for the continued use of IE5x Win browsers include:

  28. the fact that Windows 2000 comes preinstalled with IE5.5. This OS is still used quite widely especially in corporate and educational environments;
  29. that, though you may find it shocking, Windows 95 (dinosaur that it is) is still used, particularly in situations where old hardware doesn't permit a more recent OS. IE5.5 is the last available version for it (there's your technical constraint; other Windows 9x versions can use IE6 SP1).

    30. Other than the restrictions of one's OS (95) and/or network environment, there is no reason to run IE5x.

  30. #28 On November 15, 2006 10:10 AM Stuart Johnston said:

    I tend to use Microsoft Firefox. :)

  31. #29 On November 18, 2006 06:06 PM Chandra said:

    I am a new CSS developer. I do development on Windows PC using FireFox 2 and IE6. I dont know anything about MAC and even it is very difficult for me to get access to a MAC.Should I really test my designs in MAC if everything is perfect in FF2 and IE6?
    I would be happy if some answers my query.

  32. #30 On November 21, 2006 10:52 AM Rich Archer said:

    As I develop on an XP PC, my (very general) order tends to be:
    Firefox 2.0 and 1.5,
    Internet Explorer 7 and 6,
    Opera 9

    And then I grab a mate with a few Macs and:
    Firefox,
    Safari,
    Internet Explorer 5 (more to ensure use/readability than anything else)

    Those are my top 8, but then depending upon the client and their needs I might open that particular can of worms and stretch out into styling for mobile devices... :D

  33. #31 On November 21, 2006 01:50 PM MW said:

    Leaving IE5.5 behind too soon is dangerous (unfortunately) - we still have major clients with thousands of IE5.5 seats so we still support it fully, which is generally not a significant problem if you know css and browser frailties well enough.

    Mac support is also interesting: we did a survey with a client a few months ago - more than 60% of the journalists visiting their site were using Mac laptops. So in answer to the question about the Mac platform (aside from the fact that it's still huge in real terms and growing again), I'd say you *have* to support it very well if your clients want any good press coverage.

    We took over an account not so long ago because the development team before us had no Mac specific support/knowledge and it cost them dearly when a screenshot of the site appeared in the press looking a mess.

    As with most aspects of life, minorities can be very, very important.

  34. #32 On November 21, 2006 02:31 PM joao said:

    Since the early stages of the layout composition I test in this three (working with windows) and later adapt to safari if necessary:
    ALways (modern browsers): FF 2.0 + IE 6 + Opera 9, later Safari.
    For some projects (old browsers): IE 5.5 + IE 5.0
    I find this much more efficient and easier than build the website to one browser and adapt to others later.

  35. #33 On November 21, 2006 02:58 PM Mark Baber said:

    For those wishing to test layout in multiple browsers for machines that they do not have access to, I've found the service at Browsershots.org to be extremely helpful. As a very small shop, I can't buy loads of gear, and so long as I only wish to test static content (not applications) it's a lifesaver.
    It ain't super fast, but it's better than nothing.

  36. #34 On November 21, 2006 05:27 PM Jay Gilmore said:

    Leaving behind a browser version should always be a conscious decision. That being said. MS has released IE7 and IE5.5- are likely rendering more and more broken looking pages. As an example my father-in-law had been running NS4.75 up until a little over a year ago and couldn't figure out why the web was so bad. I installed FF1.X for him and he couldn't get over the difference. I think that for most users of 5.0 and 5.5 they should be getting little more than browser styling in most cases.
    To the poster above who mentioned that they had tonnes of seats using 5.5 and likely on an Intranet and, in that case, would be silly to abandon 5.5 support. The odd thing is if this is a corporate environment I wonder how vulnerable this net is to hacking or known probs with 5.5 that have never been fixed as it was versioned out for the most part.

    Development:

    FF 2.0 Win XP

    Test:

    IE7 (CC Fixes)
    IE6 (CC Fixes)
    OP9
    FX (OSX)
    Safari (OSX)

    FF is not perfect and the Mozilla team seems to have their own view of layouts in relation to WC3 compared to other browsers.

  37. #35 On November 21, 2006 06:53 PM Martin said:

    I develop on XP having Opera, IE6, IE7, FF2 opened in a random order. I keep an eye on all of them trying to achieve the same look everywhere. Even though Opera is my fav browser, in my company FF gets priority (because all managers use it) and also IE6 because most users have it. IE7 is important because it's the future. Actuallly where I live it is not expected IE7 to substitude IE6 in the near future since most Windows here are pirated. As you know illegal copies cannot get windows update.

    I can target all these 3 browsers with different css (conditional comments.) Unfortunatelly sometimes opera doesn't respond as expected and if I'm in a hurry I have to give it up :( At the end the QA checks FF and IE6 for pixel perfection :(

    If the client requers it we check safari and make appropriate adjustments, which are almost always needed. The pound sign hack helps a lot...
    Otherwise we usually don't check it at all, unless the graphic designer who created the layout is on mac :) Windows designeres don't care about macs much.

    I beleive when Opera behave differently than the rest it is because the othes browser aren't as standard complient as Opera is! :)

    I'm from an eastern europian country.

    Sorry for my English.

  38. #36 On November 21, 2006 08:50 PM Billee D. said:

    Great article! It is nice to get an idea of how others are approaching their browser testing. Here is how we test things at Outer Banks Design Works:

    - PC (Windows):
    - Firefox
    - Flock
    - Opera
    - IE 6+
    - PC (Linux):
    - Firefox
    - Konquerer
    - Mac (OS X):
    - Firefox
    - Safari
    - iCab
    - Camino (just to be safe!)

    Our standard designs do not support IE 5/5.5 for Mac or PC, nor do we support NN 4/5. These are simply given "plain vanilla" content using @import rules in the main stylesheet. If there is problem in IE we have now started using conditional comments to administer "patch and fix" CSS to IE, though we still have numerous sites using some good 'ol hacks that we are addressing. If a client wants it to look good in IE 5/5.5 on Mac or PC (or NN4/5) we let them know that it will cost extra, which is usually a great way to have them dismiss that silly notion! ;)

    Just my 2px. :)

  39. #37 On November 22, 2006 01:30 AM kou said:

    please

    (Ed says: "My pleasure (whatever it is ;))")

  40. #38 On November 23, 2006 03:18 AM BlackMax said:

    In addition to Browsershots.org, you can also try BrowserCam. It's a lot faster, but you can only use it once for free and then you have to pay.

    And Stuart Johnston thanks, I love Microsoft Firefox!

  41. #39 On November 24, 2006 03:32 AM Dan said:

    I think you have to really look at your target market before making assumptions about the level of technology your client's clients are going to have.

    I agree that IE5 is a thing of the past for anyone posting to this blog - after all this blog is by and for people involved in web development on a daily basis.

    However we're hardly representative of the rest of the population. Software updates are actually quite tricky for Ma and Pa users, and often impractical if you only go online to check your email, visit the local news site and do your banking - all on a slow (33.6-56kbps) dial-up connection.

    Auto-updating browsers like Firefox and IE7 are a big step towards keeping the general populace in the same technology ballpark as us developers, but getting people to this level of technology is difficult.

    For example, IE6 and Windows XP may have been out for 5+ years but my Mum's still runnning Windows 98 and IE5, and uses 33kbps dial-up. Unless I go around to her place and set it up for her it's just not going to happen. Even if I did, things would still run slowly because her machine is old (a state-of-the-art souped up 486 in its day) and her connection is slow.

    And of course there's the A word (Accessibility). The internet is a wonderful invention and I believe that humanity can benefit so much from the free and easy exchange of current and historical information between physically distant parties.

    The popularisation of web standards (in particular good semantics in document markup), in partnership with a smattering of common-sense and benevolence, *should* mean that developers are able to build sites that anyone can access. Layers of CSS and Javascript are all well and good but they shouldn't get in the way of this basic information exchange.

    I know this sounds like a rant, but I believe that the more people that are able to use the web the better the world will be for all of us.

    As responsible human beings we need to take our jobs seriously and not leave behind a legacy of web sites that only work for a small percentage of the world's population. Hide your stylesheets in old browsers by all means, just spare a thought for that guy on the donated 486 with the sporadic internet connection in Africa. He's probably got something interesting to share with the rest of us, if we'd only give him half a chance.

    D

  42. #40 On November 25, 2006 03:54 PM Julie Romanowski said:

    Stuart, kudos to the people who created the Microsoft Firefox site! Thanks for the laugh. I especially like AKobe Phlash - "developed and endorsed by Kobe Bryant; and presents no intellectual copyright threat towards Adobe Corporation's Family of Products."