Typical Pitfalls of Cross-Browser Compatibility

Typical pitfalls of cross-browser compatibility

Quirksmode has a comprehensive list of a lot of differencies requiring attention !-)

-- but he is, like most other sites and bloggers on the net, focused in his way, and that results in some minor or major bugs and inconsistencies ...

What Cross-Browser issues have you faced?

Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):

• Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.

• onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.

• You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().

• When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).

• Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.

• Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.

• Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)

• IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)

• I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.

• The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.

• Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.

• In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.

• In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.

I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)

What steps could be taken to avoid cross-browser compatibility issues?

1. I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.

2. Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.

3. Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.

4. LitmusApp

5. There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.

Cross-browser compatibility issues

I'm sure someone will answer this much better, but here's a start:

Yes, there are standards that are supposed to be adhered with respect to CSS rendering. The problem is, some browser editors (cough Microsoft cough) don't consider it a priority to implement the specifications correctly (or even fully, for that matter). Even, when the layout engine is being worked on to attempt to ensure compatibility, it can get quite nasty figuring out how things should be rendered correctly when mixing various CSS properties and units (see for example, the ACID test http://en.wikipedia.org/wiki/Acid3)

To have a cross-browser website, you'll basically have to check all of your website's pages render correctly in the browsers your visitors use (or that you support). Various tools such as Selenium (seleniumhq.org) can help with this.

You basically have to decide what you're going to do

• design for the lowest common denominator (if it's IE6, there isn't much you'll be able to do)
• design using validating CSS and using hacks (e.g. clearfix) to correct erroneous behavior in certain browsers
• decide not to support certain browsers (IE6 being a prime candidate)
• sniff browser and adapt display accordingly (NOT the preferred way to do it)

With respect to differences in manipulating the DOM, libraries such as jQuery help a lot as they hide the implementation differences from you.

For reference, it's a good idea to test your website in at least the following:

• WebKit-based browser (Chrome, Safari)
• Gecko-based browser (Firefox)
• IE
• Opera

@Font-Face cross browser compatibility issue

You have a comma and a semicolon mixed up. The correct block would be:

@font-face {
  font-family: 'RobotoLight';
  src: url('../font/jura-demibold.eot');
  src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
       url('../font/jura-demibold.svg') format('svg'),
       url('../font/jura-demibold.woff') format('woff'),
       url('../font/jura-demibold.ttf') format('truetype');       
  font-weight: normal;
  font-style: normal;
}

Cross-browser development

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

---

Related Topics