It’s great that Internet users have so many browser options. Unfortunately, this creates a lot of work for developers and designers who need to make sure websites are compatible with as many browsers as possible. Google Chrome, Internet Explorer and Mozilla Firefox are pretty much the standard and most used browsers, but there is enough of an audience for the likes of Safari and Opera that website creators cannot afford to ignore them. And of course there are many more browsers you might never have heard of to begin with.
Fixing cross browser compatibility problems can be a tough task. Luckily it is simply a matter of knowing what to look for to find a solution to the most common compatibility issues. Here are the five most common issues (and how you can correct them).
Incorrect (or no) DOCTYPE
The so called Doctype should always be the very first line in your html. It looks something like this:
<!DOCTYPE html>
This simple one-line of code can make all the difference between a cleanly rendered website and a strange rendering. This is especially true for Internet Explorer as it will fall back to it’s own Quirksmode where it interprets quite a few web standards entirely different. So if some browsers acts up in any way check your Doctype first!
No CSS Reset
Did you know that every browser comes with a different set of internal, basic CSS styles which apply if the current website does not override them? Yep every browser will render a page differently even if it lacks any CSS styling of there own. To avoid having any side effects you can use a so called CSS reset style sheet in your page to make sure that every browsers starts rendering with the same basic set of rules. A few commonly used reset style sheets are:
Make sure to have one of these added as the first style sheet to your page to ensure a proper CSS reset. Of course many popular front-end frameworks like Twitter Bootstrapped already include a CSS reset so there is no need to add a second one.
Vendor Specific CSS Styles
If a browser vendor implements a new CSS functionality they will often hide it behind a so called vendor specific CSS style. After the style has been established the vendor will often remove the vendor specific version or add a modified version without the vendor prefix. Let’s look at the opacity style for Mozilla Firefox (-moz) and without a vendor specific prefix:
-moz-opacity: 0.6;
opacity: 0.6;
So to make sure your code works in all browsers you’ll need to add the unprefixed version alongside all prefixed one’s to make sure it get’s picked up by all browsers. But how many prefixes are there:
- -ms for Microsoft (Internet Explorer)
- -moz for Mozilla Foundation (Firefox)
- -o for Opera Software
- -webkit for Safari and Chrome
Therefor a full declaration of opacity should look like this:
|
1
2
3
4
5
6
|
.test{ -moz-opacity: 0.6; -ms-opacity: 0.6; -webkit-opacity: 0.6; opacity: 0.6;} |
Luckily there is a tool designed to help you with that!
Lack of Valid HTML / CSS
Different browsers interpret HTML and CSS differently, and some are more forgiving than others. For example it could happen that you forgot to close one <div> in your code. Now maybe Chrome and Firefox will just add the missing </div> and it will render correctly. Other browsers may not be so forgiving and the rendering will look different without so much as a hint on what might be wrong. And finding the missing closing tab manually can be quite frustrating, especially on a larger web project.
Luckily you can automatically validate your code using the W3C Validators for HTML and CSS. Problem solved!
Outdated Browser Detection
Are you still using older JavaScript code in your application? Trying to detect the browser rather than features? Unfortunately many older browser detection scripts out there will break if the used version of a browsers is unknown. So if your code does not run in more modern browsers check if maybe your browser detection is outdated and does not handle the more current browsers that well. Or even better remove the browser detection and detect features instead! You can use the handy library Modernizer for this.
Conclusion
Fixing common browser compatibility issues can be frustrating. But usually such issues have easy solution if you know where to look! Of course correcting those problems is only possible if you can find them. So pick your favorite cross-browser testing solution and go to work.
