Cross-browser development

Question

I'm developing a web application for a new service, starting from Firefox 3.5.

The interface design is tableless, only using divs + CSS & performance-blessed practices.

Now, while being compatible with Safari has taken just a small amount of time, IE is a pain.

My question is: is there anything out there that could be used to speedup cross-browser checking? I already know many points of difference between FF and IE for instance, but a specific tool would maybe help some more.

Could you suggest one, if any?

Thanks,

Scarlet

Answer 1

I don't know of any software that actively check for problems, but Adobe has recently released BrowserLab, which really does speed up cross-browser testing.

Answer 2

When you say only using divs and CSS, I hope you're not absolutely positioning everything. That's a sure-fire way to mess designs up in lots of browsers. (Generally the best practice is to use floats.)

You could also try IE7.js to fix a bunch of problems with IE 6-7.

In general I'd suggest developing in IE and one of the standards-compliant browsers side-by-side (Firefox/Chrome/Safari/Opera). And try and keep both the HTML and CSS as simple as possible.

Answer 3

I do cross-browser development and I don't really use any of the prescribed patterns, like cross-browser testing. I instead use a decorative pattern. Sometimes it works wonderfully, sometimes it's a headache, but that can be said for any development pattern.

Most of my development takes place in which browser I consider the most standards-compliant. I prefer WebKit to Presto, but both are generally neck and neck for standards compliance. With these browsers, proper use of HTML and CSS almost always leads to desirable results. My WebKit browser of choice is Google Chrome. Safari works too, but keep in mind that on Mac OS X the font smoothing tends to make text bigger. To ensure compatibility with sites designed for Safari Mac, Safari Win emboldens fonts, so it's not always the most pixel-perfect representation of your site.

Blueprint CSS can be a huge help if you're trying to quickly prototype a cross-browser site design. I'm not convinced that such a framework is always necessary, and they can also influence the way you structure your XHTML markup, and contorting your markup to match a pre-existing CSS class hierarchy isn't always a great idea.

Once I have a design that I'm happy with in my standards compliant browser, I then decorate it with bug fixes in other, less standards-compliant browsers using conditional styles or stylesheets. Firefox, at least since version 3.0, is almost never a huge issue, but there are ways of targeting Firefox specifically, and even differentiating between Gecko 1.9 and 1.8, using only CSS. It's a hack, technically, so CSS purists might scoff at the code blasphemy, but it's a reliable, usable solution. For clarity and ease of maintenance, I usually maintain my Firefox/IE fixes in isolated stylesheets and compile them with some kind of server side script, which I consider preferable to conditional include statements and JavaScript hacks. If you make use of caching with PHP, this isn't a significant bottleneck or waste of CPU time.

IETester is an indispensible tool for checking a design in all of the different IE versions, and it even uses the proper JScript engine for each release, which previous, less reliable solutions like MultipleIEs lacked.

These days, the biggest problem with cross-browser development is JavaScript, and jQuery will basically save your life here. As someone who maintained a sizable JavaScript framework for a corporate website in the days before AJAX and JavaScript interfaces, so there's no limit to the amount of praise I can give for jQuery/Prototype/Dojo.

Answer 4

I'd recommend looking at a CSS framework like BluePrint. It has a generic way to build pages using grids, and also has some default css for forms etc.

Frameworks will have dealt with many of these cross-browser quirks during their development, so it could save you a lot of time.

Answer 5

This will not answer your question, but just an advice based on my personal experience.

When you are developing for many browsers, the best thing to do is to test simultaneously on all of them while you're coding.

This way you will just have to correct small bugs each time as opposed to overwhelming complicated layout problems.

Answer 6

Cross Browser Development

No tool can ever make up for bad behaviour, but they can sure make life easier on you.

That being said, you should really come up with a workflow that lets you optimize for cross-browser compatability in the least amount of work spent. If that means small iterative or large monolithical steps for you, well that is up to you to decide. But generally working against several browsers during development saves you if not time at least a major headache on d-day.

List of tools/resources i find useful

• Selenium is a tool for frontend testing
• IETester lets you view a page in different IE versions
• Browsershots lets you view the page on different platforms as well
• Google lets you search for known and obscure IE perversions
• IE 6 No More saves you a lot of headache not bothering about the preshistorical crap that goes by the name of IE 6
• YUI Graded Browser Support - make sure you know which browsers to focus on
• jQuery - cross browser javascript library
• YUI 3: Reset CSS - reset your CSS (link contains useful information as well as the CSS)
• 9 Most Common IE Bugs and How to Fix Them - very useful tips on how to get the most bang for the buck by fixing the common problems first.
• Cross browser development contains lots of useful tutorials regarding cross browser development.

References

Selenium alternatives / Cross Browser Testing / Litmus