Cross-browser development

Question

Hi all,

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

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 let's 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 let's you view a page in different IE versions
• Browsershots let's you view the page on different platforms as well
• Google let's 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
• jQquery 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

Answer 3

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 4

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 5

I would also recommend using CSS reset. This way you get a lot of inconsistencies out of the way right from the start.

Answer 6

A couple more tools include

• Browsera - automatic detection of cross-browser layout problems
• LitmusApp - screenshots with pass/fail tagging
• SuperPreview - extension to Microsoft Expression Web (currently available standalone download) where you can view an overlay screenshot of a different browser
• Browserlab - extension to Adobe Dreamweaver (currently available standalone online) where you can view an overlay screenshot of a different browser

I'd also strongly recommend using a CSS reset to start such as http://meyerweb.com/eric/tools/css/reset/

Why? Because many of the cross-browser inconsistencies stem from the fact that the default style in the browser differs. For instance, a default margin may make an element layout correctly in one browser, but not the others.

It may seem weird to always be overriding default behavior, because it seems like a waste, but its absolutely necessary in order to have a baseline with which to work.

Answer 7

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 8

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.