browser_compatibility

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…

<!DOCTYPE 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:

  • HTML5Reset
  • css
  • 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.

css


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:

-moz-opacity: 0.6;

opacity: 0.6;

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

Many web designers and developers are still making use of the old JavaScript Code in their apps. These may not run in the modern browsers, leaving you with an error that says outdated browser detection. To solve this, you may have to work on your browser detection and make sure it handles current browsers too. If not, you can just remove the browser detection and go for detect features. Handy library Modernizer can help you with this.

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!


outdated_browser

Leave a Reply

Your email address will not be published. Required fields are marked *