Ways and Tips to Support Cross Browser Compatibility

Home » Blog » Web Design » Ways and Tips to Support Cross Browser Compatibility

This article is about Cross Browser Compatibility . You can know how to support cross browser compatibility. Discuss about some ways and tips that might help you

What is Cross browser:

It is easy to say that cross-browser is a web-application or the work we do to show correctly in all versions of all browsers.
If it doesn’t show up properly, then the work we do is not cross-browser compatible.

Why Cross Browser Compatibility Problems?

Suppose we made a website with HTML5 version and CSS3 and gave all the information correctly, but if we turn it to version 1.0.154 of Google Chrome then Google Chrome will not show our site properly. Because before the invention of HTML 5 version or CSS 3, Google version 1.0.154 was born. So naturally he is not aware of the newer versions of HTML5 version and CSS3.

As a result, Google is showing HTML and CSS codes that it is aware of, and it is not showing the rest of the new content properly.

The above example is meant only with Google order, moreover, all such older browsers have more or less the same problem.

Not only is browsing a problem with older browsers, all browsers run according to their own religion, and these browsers have a variety of bugs that prevent them from displaying our site or the code perfectly. But later when we fix the browser bugs and release the new version, the browsers are able to show our site more accurately than before.

These problems are more common in Microsoft’s Internet Explorer. This is because this browser receives less updates than other browsers, and it is very strict about coding transparency. So if we make a mistake in coding or forget to provide any information, then we have to cross-browser problems in Internet-Explorer. Moreover, due to Internet-Explorer’s own bugs, we also have cross-browser problems.

Recommended: Test your programming knowledge – Programming quiz!

Below are some ways / tips to support cross browser compatibility


One of the main requirements of Cross Browser is that HTML documents and CSS documents are fully valid. 

  • How to validate For valid HTML documents:

  • For CSS document validation:

Note: If there is any error or warning in HTML and CSS here, it must be corrected, otherwise our documents will not be fully validated.


Of course we have to declare the correct doctype. Because the correct doctype tells the browser which code / version we are using (for example: if we use html 5, we have to declare the doctype for it), so the browser will show our website accordingly.

And if we do not declare a doctype, the browsers will show our website according to its own religion or rule. As a result we have to wear cross browser problems.

  • Where do we declare the doctype?

If you go to this link, you will get a list of all the dock types. We can declare the dock type from there as per our requirement.


By default browsers show our website according to their own CSS rules, and so we first use some code in CSS called Reset Code to make all browsers behave the same or to show our web design correctly. Eg: * {margin: 0; padding: 0}

Below are some reset code sources:

  1. http://www.cssreset.com/
  2. https://cutt.ly/FRFW2Aj
  3. https://cutt.ly/rRFTztX

Note: It is better to save the reset codes of HTML and CSS in separate documents, while reading and working, the reset codes can be copied from there to the original file, which saves us a lot of time.


We need to use the latest versions of Mozilla, Chrome, Safari, and Internet-Explorer to see if our web site is performing properly according to our design.


Some tags in HTML that have been canceled or deprecated must not be used.
For example, the <blink> tag of HTML 4.01 no longer appears in all updated browsers.

Below is a resource about the Deprecated tags and attributes of HTML:


We need to use the kind of font that is in the computer of all visitors. E.g. ‘sans-serif’. Otherwise it is best to use different types of fonts or fonts that are more likely to not be on the user’s computer through Google’s ‘Google Fonts’ service.


Browsers usually show line-height, font-size, font-family, font-color, etc. according to their own rules or religions, so in CSS we have line-height, font-size, font-family, font to avoid cross-browser problems. -Color etc. Reset codes need to be declared as required.


It is best not to use any type of script, such as JavaScript, without the need for cross-browser support. This is because JavaScript can be disabled by default in the visitor’s browser or by the user himself.

As a result, visitors / users will not be able to see my site properly. So it is better not to use JavaScript unnecessarily. Moreover, JavaScript may cause some delay in site loading.


It is better to resize the image through Image Editor (Photoshop), moreover it is better to specify the size of the image in CSS. Moreover, it is better to use alt attributes in image tags in HTML.


We need to keep our codes as simple as possible, and it’s best to keep the code clean and not use unnecessary codes.

Below are some resources on cross browser compatibility support:

Some IE bugs and some resources needed to fix them-

  1. https://cutt.ly/kRFEjdt
  2. https://cutt.ly/VRFEmoN

Some resources on how to support cross browser Compatibility :

  1. https://cutt.ly/7RFEAsw
  2. https://cutt.ly/cRFEXuD
  3. https://cutt.ly/LRFRtv6

Some resources to test cross browser Compatibility —

  1. https://cutt.ly/5RFRsgZ
  2. https://cutt.ly/5RFRcoc
  3. http://browsershots.org/
  4. https://cutt.ly/WRFRjZn


Above are discussing and about cross browser compatibility and share some resources, Hope all are benefited with that.

Find it helpful? Please share with your friends and Read my others article about coding and programming, Tips, Productivity , Resources etc…

Read Next

JavaScript ES6 Cheat Sheet with example. ES6 is the latest standard specification of JavaScript.Here's a cheatsheet to show you...
Continue Reading
Download Free PSD to HTML with source code. Are you a absolute beginners or in intermediate level? Grow up your skills with practice...
Continue Reading
CSS Shorthand properties are properties that let you set the values of multiple other CSS properties simultaneously. Using CSS...
Continue Reading
Git is the free and open source distributed version control system that's responsible for everything GitHub related. This git cheat sheet...
Continue Reading
Implicit type coercion in JavaScript is automatic conversion of value from one data type to another. It takes place ...
Continue Reading
A responsive website design responds to the device it is being viewed on, whether a desktop computer, laptop, tablet, or smartphone.
Continue Reading

Reach Out to me!

Discuss a project or just want to say hi? My Inbox is open for all.

"Client satisfaction is the key to me.Always try to provide the best possible services to my clients in every steps."

Narayanganj , Bangladesh
Open for opportunities: Yes!