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
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.
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.
Normalize.css
HTML5reset
Eric Meyer web
Many people use CSS Frameworks like Twitter Bootstrap where they reset the basic styles in their own codebase.
Browser Stack is one of the widely used tool for testing websites apart from testing in native devices.
Browser Stack
Browser shots is one of the free tools check how our websites render across standard browsers with range of versions.
Caniuse.com :
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
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>
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 validatorUsing 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 scriptOpera 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 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 :
Ignoring browser compatibility issues
Even though making our websites look quite the same across all the browsers there are some cases1. 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
Post a Comment