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.

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

Comments

Post a Comment

Popular posts from this blog

CSS Flexbox Layout

Image
CSS Flexbox Layout – Complete Guide with Examples Before diving in, make sure to read our guide on CSS Display Property . Traditionally, web layouts like the above were created using CSS floats . However, with CSS Flexbox , you can achieve the same results more efficiently and responsively. Why Use CSS Flexbox? ✅ Flexbox is a modern alternative to CSS floats and table layouts. ✅ It gives control over alignment, direction, order, and size of elements within a container. Let’s explore each concept of Flexbox step by step. Basic Components of CSS Flexbox a) Flex Container b) Flex Items Browser Compatibility CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations. ...
Read more >>

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

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu...
Read more >>

Datatables.net - Plugin options

Image
DataTables jQuery Plugin Options – Complete Guide In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin . The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently. CDN Links for DataTables Add the following CSS and JS files to your project using CDN links: Stylesheet References https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Script References https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Disable All Options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” dropdown at the bottom of the data table $('.promo-prici...
Read more >>