How to Make a Cross-Browser Compatible Website

Cross-browser compatibility is important. Very important. We have established that fact in our previous post on the need of a cross browser compatible website. So the next step is, how to make cross-browser compatible websites? How can we make sure that our website provides a smooth and seamless user experience across all browsers that your target audience may have access to, be it Firefox, Chrome, or even Internet Explorer?

While developing a website, normally, you use a combination of JavaScript, CSS, and HTML with CSS3 and HTML5 being the latest.

If you’re also developing your website on these technologies, you might need to take care of some points so as to make your website suitable for every browser.

So, let’s get started.

The very first thing that most developers do is to start developing the website for their favorite browser, or in some cases, the browser most used by your possible target audience. Let’s assume it is the latest version of Google Chrome, which usually is the case. The website uses all the latest CSS, JS, and framework tech. The website is beautiful with awesomely animated transitions and clean fonts. And most important it’s working perfectly. Correction: Working perfectly on the latest Chrome Browser.

The tsunami comes when you decide to go to test it for various versions of IE or Safari. Now nothing is working perfectly, every section is stacking incorrectly, and some elements are not even being shown because the animations are not even triggered.

As I have already explained, IE still holds a major market share and is one of the most underrated browsers on the market. Ignoring it can cause development headaches. So the first and most necessary step is defining a perfect cross browser testing strategy.

So, you now have to test your app for different browsers and, as I said, for the underrated ones and the famous ones, too.

It’s time you found some of the major blunders. So, let’s solve them.

Not Working On Different Browsers?

If you find out that your website doesn’t work on certain browsers, it’s time to make some minute changes to your code. The reason may be some technologies and features used are unsupported by some of the browsers. So, if your website doesn’t work for all browsers you need to find out where the issue is occurring with that specific browser.

Find Cross-Browser Compatibility Issues With Opera Mini Mobile Browser:

If you are using elements like:

• CSS3 3D Transforms.
• 2D transforms.
• Background image.
• HTML5 form features.
• Semantic elements.
• Placeholder-shown CSS pseudo-class.
• Web Authentication API.
• Theme-color Meta Tag.

then your website will fail to perform on Opera Mini browsers.

Find Cross-Browser Compatibility Issues With Firefox Browser:

Firefox usually supports the latest technologies. Mozilla is a trendsetter in web tech. However, there are still some elements that firefox browsers do not support fully such as:

• Filesystem and FileWriter API.
• Web SQL Database.
• XHTML+SMIL animation.
• EOT fonts.

These all are major elements that are unsupported by the latest stable Firefox (60). So, using these technologies and styles may cause your website to break even in the latest versions of Firefox.

Find Cross-Browser Compatibility Issues With Safari

If Shared Web Workers, CSS overflow-anchor, Web Authentication API, are used your app will not work at all in Safari browsers. However, Safari partially supports some of the features like HTML5 form features and CSS Masks. So these features, if used, may also lead your website to not work properly in Safari browsers.

If you use some of other features and technologies and are wondering if a browser supports that or not, then you can find out by using CanIUse. So, to make sure that you’ve used all browser supported technologies you can just enter the technology and compare browsers. It will show you the result like:

So, as you can see that web authentication API is just supported in the latest browser versions of Edge, Firefox, and Chrome so it will not work in the other versions showing cross-browser incompatibility problems. Similarly, you can check for other web technologies and features.

Apart from checking if the tech is supported by the browser beforehand, there are some main guidelines that you must follow to make sure that the final website comes out as cross-browser compatible.

Check for the Doctype

The first thing that you need to make sure is that have you added the DOCTYPE in your HTML file.

If you haven’t then do it immediately.

Doctype basically helps your browser to recognize in which language your website’s code is written. If you don’t specify that, some of the smart browsers will understand it themselves but some dumb browsers will not be able to figure out what happened, and they will render some elements of your website in a way that you would not like.

So, if you want that IE6 and above should imitate the behavior of browser like chrome and firefox you may want to add a strict doctype.

If you don’t do that, the browser will work in Quirks mode and will emulate the behavior of older versions.

Have You Applied CSS Reset?

Different browsers work differently. One style may work on one browser but that will show some different style on the other. The major factor that counts here is CSS.

For example, you may have seen that, many times, submit buttons look differently on different browsers; that's because of CSS. So, if some of the elements are not rendering properly in different browsers then that can be because of CSS. When you apply CSS reset, you tell every browser to remove the styling to default CSS that causes cross-browser incompatibility.

And this holds a hell of a lot of value to Internet Explorer!

The very famous Eric Meyer’s CSS reset can be used to help you out to solve this browser incompatibility issue. Or you can use standards CSS Resets like normalize.css.

However, make sure that you add your reset stylesheet before your main stylesheet.

Use Separate Stylesheets for Different Browsers

This will save you from a heck of stylesheet problem. You can link to the different stylesheet for every browser using conditional comments. So that Chrome will render chrome’s stylesheet, Firefox will go for its stylesheet and so on.

The basic conditional comment will look something like this:

<!-- [if IE ]>   
<link href="iecss.css" rel="stylesheet" type="text/css"> 
<![endif]-->

Or you can try that too.

 <!-- [If IE]>
  <link type="text/css" href="IEHacks.css" />
 <![endif]-->
 <!-- [if !IE]>
  <link type="text/css" href="NonIEHacks.css" />
 <![endif]-->

Use Cross Browser Friendly Libraries and Frameworks

Prefer to use cross-browser friendly JavaScript libraries like jQuery, React.js, MooTools and some of the CSS frameworks like Bootstrap, Foundation, 960 grid, etc.? The reason for using these cross-browser compatible libraries and frameworks is that you can rely on them to know that they won’t introduce some dumb bugs which you can avoid very easily.

All Set? Let’s Validate!

Once you take care of all the coding precautions, it’s time you validated your website. You can use HTML and CSS validators for this. This will point all your mistakes and improvements to make sure your code doesn’t break.

You can use w3 validator to validate the HTML of your website.

Once you validate, you’ll see errors and warnings which you can then solve further.

Similarly, you can validate for CSS, too. Try it using Jigsaw validator from W3. Again you’ll see results like:

Getting information on errors you’ve done, you can then solve them.