Post
Ask Question

Cross Browser Compatible Applications

In modern web application development, progressing with a cross-browser compatible application helps users or customers to communicate without losing any information or compromising the UI experience.

A cross-browser-compatible application is one that works seamlessly with all browsers like Chrome, Safari, Edge, Firefox, and many more older versions of the browsers. This allows users to access and interact with applications irrespective of the browser.

We need to follow a few techniques to overcome browser limitations and issues.

Use Standardized HTML5, CSS3, and JavaScript.

Use the latest versions of markup language, which the code must include.

Use! DOCTYPE for the html page so that the browser renders the page in standard mode.

<!DOCTYPE html>

Write semantic HTML tags that are cross-browser and responsive-friendly.

Example. <form>,<table>,<caption>,<section>,<header>,<footer> etc.

For example

<table>
    <caption>This is my employee table with SSN number</caption>
    <tbody>
        <tr>
            <th></th>
            <!-- Table details go here -->
        </tr>
    </tbody>
</table>

Add <meta> tag for the file like.

<meta charset="UTF-8">

Meta tag describes metadata about the document. <meta> is machine-readable and used by the browser to have information on how to load the page and display the content.

Use reset CSS, which removes any default styles applied by the browser and provides a consistent styling throughout the application.

A default CSS snippet

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

or use normalise.css, which standardizes the code without adding any default styles(like reset css)

How to use normalise.css?

Download and use normalise.css locally in the HTML file header and add styles accordingly.

<link rel="stylesheet" href="css/normalize.css">

They use CSS frameworks like Bootstrap to have their own classes for style, which provides seamless and consistent styles.

Add Bootstrap to your project by downloading it or using the CDN path in the file.

Use ES6, ECMA Script 2015 JavaScript, where the syntax and features are matched with standardized code to meet the expectations.

Use polyfills in JavaScript for backward compatibility. Polyfill identifies if some features are not available or not compatible with the browser and provides alternative solutions to maintain the consistency of the function’s features.

The code snippet below shows polyfill with string’s trim () using regular expressions. Here, a regular expression from the start and end of the string is written with an empty string to replace the whitespaces.

String.prototype.trim = function (string) {
    let regex = /^\s+|\s+$/g;
    return string.replace(regex, "");
}

let str = " This is polyfill demonstration with trim ";

let trimmedString = str.trim();

console.log(str);

We can use JavaScript transpilers like Babel, which manages the polyfills and makes sure the translated code is compatible with the browser.

Install Babel and dependencies with the npm command as below.

NPM Command

Add the code below to the .babelrc file at the project root. This file instructs the Babel tool on how to transpile the code.

{
  "presets": [
    "@babel/preset-env"
  ]
}

Use Linters to check JavaScript code errors, bugs, and undefined variables during runtime.

Example. jslint and eslint

Steps to lint the JavaScript code

  1. Install the lint using the below npm command.
    Install
  2. Initialize the configuration file with the below init command. Here, we will be asked to select which module we use in the project, frameworks like react or vue, and other plugins.
    Terminal
  3. Once selected, the .eslintrc.json file will be created. To start the linting, use the command below. This command will output errors on the javascript file.
    Output
  4. The zoom level of the application: Work on the design that handles the zoom level properly wherever it’s necessary for the application.
  5. Responsive Design: Make sure the application works irrespective of the screen size. Use specific frameworks like Bootstrap and CSS’s @media queries for different screen sizes and devices.
  6. CSS vendor prefixes: CSS’s vendor prefixes are special prefixes that make sure properties are compatible with specific browsers, as below.
Vendor Prefixes
WebKit -WebKit- for chrome, safari
Mozilla -moz- for firefox
Microsoft -ms- for Edge and IE


How to use them in CSS?

/* Without Prefix */
transform: rotate(30deg);

/* With Vendor Prefixes */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
  1. Avoid features that are deprecated: For example, in earlier versions of CSS, we had <marquee> and <center>, which are no longer in use.
  2. Proper testing using tools: Test in real browsers and tools like browser Stack, cross-browser testing, etc. Use Dev tools from Chrome to check the potential errors and warnings and manually test the application in all the browsers to make sure the application won’t break in terms of look and feel functionality and any information.

With these above key steps, we can achieve Cross-browser compatibility. Also, please refer to my blog on Keyboard Accessibility for more information.


Similar Articles