There was one time when all of us would be stuck with the Internet Explorer. Fortunately, today we have a lot of browser options – Mozilla Firefox, Google Chrome, Opera, Safari and more. The increase in browser choices however has increased the work for designers and developers, who have to ensure the websites they create, are compatible with all the browsers that their users use.
Although crucial, it can be quite tough to fix cross browser compatibility issues. However, if you know what to look for and where to look, you can find the right solutions to many such problems. For your benefit, here is a list of common browser compatibility issues that people face and a bit of information on how to solve them:
No DOCTYPE or Incorrect DOCTYPE
You must have seen something like this in your html…
This is the Doctype I am talking about. It is usually the first line of your html. Although it looks simple it can make a huge difference to the rendering of your website.
This is something by which a browser identifies the exact markup language, in which your web page is written. Not all browsers may recognize this short Doctype that I have mentioned above. Here is the syntax that you need to use for the different versions of HTMLs.
- For HTML 3.2, the syntax is <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
- For HTML 4.01, the syntax would be <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>or<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>, depending on whether the transition is loose or strict.
- For HTML5, the syntax is as mentioned above, which is <!DOCTYPE html>. You can use <!DOCTYPE html SYSTEM “about:legacy-compat”>if it doesn’t work.
If you want the browser to display your pages correctly, you will have to make use of the correct DOCTYPE declaration. If not, the browser will render your page in the Quirks mode.
No CSS Reset
Every browser comes with its own set of basic CSS styles. Any lack of CSS styling can make the browser render your webpage in a completely different way. So, you will have to include a CSS reset style sheet on your webpage to make sure all browsers render your web page in the right way. Here are a few reset style sheets that are used commonly:
- Eric Meyers CSS Reset
You can add any one of these to your page by copy pasting it on top of your style.css. As an alternate option you can even save this reset sheet as a different file and call it from atop your style.css. Nevertheless, it is important to make sure you follow certain things while including a CSS reset style sheet in your page.
- Reset the margins and the paddings for your body, your html and for your various other elements, which you may not wish to style individually.
- The latest version Eric Meyer’s CSS reset is considered as a standard one. If you happen to be in a hurry, you can always grab this.
If your website is already finished, there is no point in adding a CSS Reset. However, if you are starting a new website adding this might help.
Vendor Specific CSS Styles
Whenever a browser vendor comes up with a brand new CSS functionality, he ends up hiding it behind something known as ‘vendor specific CSS style.’Once established, this will be replaced with a modified version that will not have the vendor prefix. This is how a Mozilla Firefox opacity style will look without the vendor specific prefix:
Therefore, if you want your code to work well in all browsers you will have to add the versions without this vendor specific prefix alongside their prefixed ones so that the browsers can pick them up well. However, there are way too many prefixes that you may need to focus on. Luckily there are tools that can help you do this in an easy way. One such tool is the Autoprefixer.
Lack of Valid HTML / CSS
The interpretation of CSS and HTML differs from one browser to the others. While a few are liberal, others are not. For instance, you could have missed out on closing a <div> while typing your code. Firefox or Chrome might just add this missing <div> and render your webpage correctly. Not all browsers are this forgiving. The result? The rendering may be very much different than you expected. And in most cases you may not even get a hint as to what exactly is wrong. If you are working on a large web project it might be really frustrating to try looking for a missing closing tab.
The solution to this is to use the W3C Validators to automatically validate your CSS and HTML. The tool is available online for free. You can use this to find out the various errors of your webpage and then fix them up to create an accessible webpage
Outdated Browser Detection
Finding your browser compatibility issues is one thing you need to do before you try fixing them up. Luckily there are many cross-browser testing solutions available to make your life easier. All you need to do is choose one of them and start testing your website for browser compatibility issues. Once you identify them, you can start correcting them one by one with the help of the right tools.
So, get to work right away and make sure your webpages get rendered in the best way, no matter which browser your users use!