How to solve browser compatibility issues in websites?

Websites we develop should always ensure better user experience keep in my mind the tough competition in the market by contemporary players

How to solve browser issues in website

How our website or web applications looks in different browsers and in different platforms matters the most. We are seeing increase in range of browsers and we may not know from which browser users visit our site.
Every browsers have their own way of being an ideal browsers and they have their own features. Making our functions and UI across all the browsers should follow certain guidelines. By ensuring browser compatibility in our SDLC, it would be a safe game to play instead of going about things in the final end. To solve common browser compatible inconsistencies, we are discussing few effective points  here.

Browser compatibility for modern browsers

Keeping in mind, the cost and time constraints, making sure our websites work for Chrome, Mozilla Firefox, Safari is ideal.

Handling common issues for browser compatible






Incorrect DOCTYPE

For every valid HTML document, DOCTYPE should be the first line.If the doctype is absent, the html document may be invalid. Adding an incorrect doctype may lead to browser issues.
<!DOCTYPE HTML>
This is a key web standard,which will make the browsers render the web page smoothly. If doctype is missing in an html, when rendered in IE, the webpage renders in Quirks mode instead of Standard mode.

Include CSS Reset

Every browser have set of styles and rendering. So, first step is to reset all the styles commonly in all browsers so that our custom styles will be applied uniformly in all user agents. All the basic styles will be rewritten uniformly.
Normalize.css
HTML5reset
Eric Meyer web
Many people use CSS Frameworks like Twitter Bootstrap where they reset the basic styles in their own codebase.

Valid HTML / CSS

HTML/CSS files of the website should be a valid one. In sense, it can be validated by the W3 validator

Using vendor prefixes

Certain CSS Property, may need vendor prefixes. Failing to add those may lead to inconsistencies
.animated-car{
 -webkit-transition: all 1s ease-out;
 -moz-transition: all 1s ease-out;
           -ms-transition: all 1s ease-out;
            transition: all 1s ease-out;
   }

Detecting Browser

We can detect browser from the following script
Opera 8.0+ 
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; 
Firefox 1.0+ 
var isFirefox = typeof InstallTrigger !== 'undefined'; 
Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification)); 
Internet Explorer 6-11 
var isIE = /*@cc_on!@*/false || !!document.documentMode; 
Edge 20+ 
var isEdge = !isIE && !!window.StyleMedia; 
Chrome 1+ 
var isChrome = !!window.chrome && !!window.chrome.webstore; 
Blink engine detection 
var isBlink = (isChrome || isOpera) && !!window.CSS; 

Testing browser compatibility

Browser compatibility should be considered as a factor while testing.
Browser Stack is one of the widely used tool for testing websites apart from testing in native devices.
Browser Stack
Browser Stack
Browser shots is one of the free tools check how our websites render across standard browsers with range of versions.

Using new CSS properties

When using CSS properties we may use caniuse.com to check the browser compatibility as some properties may not be standard one. While using CSS properties which are in draft mode, inconsistencies may be occuring. It is advisable to avoid such.

Caniuse.com :

browser-compatibility

Ignoring browser compatibility issues

Even though making our websites look quite the same across all the browsers there are some cases
1. where it is enough if it appear in a decent way in according to browsers nature.
2. you may not need to deal inconsistencies with minor browsers like Opera based on customers usage.
3. Your website may not compulsorily need to support legacy browsers.

Key points:
1. It is always better to avoid flash websites
2. Always check whether animations are loading in all browsers correctly
3. SVG effects like filter do not have browser support. It is important to give them fallback. Probably, CSS Filters.
4.Floats may cause browser incompatibility issues.
Apart from browser compatibility, there are few other points to check before launching websites

Feel free to share your feedback / queries and  Subscribe to Creative Technocrayts and be a part of growing community.
Fb link : @CreativeTechnocrayts

Comments

Popular posts from this blog

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

How to initialize Datatable plugin?

Datatables.net - Plugin options