When working on an existing web application you may be placed in a situation where you need to support new browsers, or just other browsers that your app wasn’t originally coded for or tested in. In my case, this took the form of a web app developed exclusively for Internet Explorer that now needed to support other browsers. As I went through and corrected many of the browser incompatibilities, I noticed a few common ones, and wanted to mention them in case it’s beneficial to others in the same situation.
So a couple of things to look out for… I wanted to list the easiest ones to spot first as you can do a text search and usually find all of them:
- CSS Expressions:
- Were deprecated in IE8 standards mode, see http://blogs.msdn.com/ie/archive/2008/10/16/ending-expressions.aspx for details.
- IE specific.
- Search for: “expression(”
- “Get or set the HTML of the entire node x, including the outermost tag (element x itself).”
- Example: x.outerHTML = “Let’s <u>change</u> it!”
- IE specific.
- Search for: “outerHTML”
- Replace with innerHTML or W3C DOM methods. innerHTML is in theory faster, but IE and Konquerer have some issues when innerHTML is used with tables. Replacing outerHTML with calls to innerHTML will also require some changes to the logic using outerHTML as innerHTML is slightly different in behavior.
- Visual Filters:
- Used commonly to create gradients without using images.
- More information on Visual Filters: http://msdn.microsoft.com/en-us/library/ms532853.aspx
- IE specific.
- Example: <ELEMENT STYLE=”filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)” … >
- Search for: “DXImageTransform”
- Replace with… Unfortunately there really isn’t an equivalent for this. Some of the visual filters can be replicated using standard CSS properties, but not all of them. As convenient as the visual filters are, they will only work in internet explorer at the moment.
- IE Specific.
- Search for: “window.event”
- Custom Attributes:
- Used to defined custom element attributes.
- Getting or setting custom attributes without using DOM methods is not cross browser compatible.
- Example: element.MyProp = “This doesn’t work in all browsers.”
- Replace with: calls to .getAttribute(“MyProp”) or setAttribute(“MyProp”) or if using jQuery, element.attr() as shown here: http://docs.jquery.com/Attributes/attr.
This list is by no means exhaustive, but I wanted to point out many of the common issues I have come across. Your mileage may vary. I recommend checking out the references listed below for a lot more good compatibility information. I’ve tried to check all of my facts, but if you notice anything that seems off, let me know so I can fix it!
- http://www.reloco.com.ar/mozilla/compat.html – “Making your web browser compatible with Firefox”
- A good overview of many of the common browser compatibility problems faced when making an web app written for IE work in Firefox
- http://www.quirksmode.org/compatibility.html – “Compatibility Master Table”
- The holy grail of browser compatibility information. Seriously… Want to know if a browser fully supports CSS2, CSS3, DOM, etc? It’s here.
- http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx – “Site Compatibility and IE8”
- A page detailing potential issues and fixes for making your pages compatible with IE8 in Standards Mode. This is actually a good reference for potential cross browser problems as most of the items listed are cross browser compatibility issues as well.