In today’s world where everything is online, a user has a number of options while choosing their web browser. But not necessarily all the web browsers support different websites and software in the same way as others, often causing cross-browser compatibility issues.

Due to this wide variety of web browsers and subsequent browser compatibility issues, it is important for the web developers to ensure that their website is accessible across these web browsers. This accessibility is vital to be able to reach a wider audience without being restricted.

Often cross-browser compatibility can affect the business operations by limiting its reach to the end users. This is why performing cross-browser testing is always considered a priority, right from the initial stages of web development.

This includes taking appropriate measures right from the development stage, to ensure the website is compatible across different versions of web browsers, making the User experience better.

CSS (Cascading Style Sheets) as a style sheet language is responsible for styling the markup language of a website. It is one of the three layers involved for a progressive enhancement of a website. It is why one cannot afford to evade from cross-browser testing their CSS development. It is the CSS which often alters across different web browsers making the website look different on different web browsers. And thus, while developing a website in HTML and CSS, it is important for a developer to ensure a cross-browser compatibility with feature detection.

Before getting deeper into the details of how you can ensure cross-browser compatible CSS with feature detection, it is important to understand what is a Cross-browser compatible CSS, why it is so important and why feature detection is required.

What is Cross Browser Compatible CSS?

When you are coding with CSS, the styling might look perfect as per the desired design on your browser. However, on the others, it might appear different or even broken. This is one of the most substantial cross-browser compatibility concerns that hinder with the website’s growth.

The main reason behind this inconsistency in appearance is due to the fact that not all browsers can interpret the CSS code in the same way. When they can’t interpret it, they chose to ignore it completely. This feature of the browser is called the “fault tolerance”.

So, for a cross-browser compatible CSS, it is important that all the web browsers should be able to understand the entire CSS code to maintain consistency across different versions of web browsers.

Writing a CSS code which is accepted across different web browsers is possible with Progressive Enhancement, where you begin with the minimal design supported by all the browsers (especially keeping the basic version in mind) and then slowly add up different features and enhancements with every successive version.

Using feature detection, you can detect the features which are not well supported by other web browsers and then replace them by altering the code to make it optimal across different web browsers.

Tools to realize CSS support through multiple browser versions

For realizing support through multiple browser versions, diligent tools are available in the market. One such tool is Can I use. Using this tool you can compare different versions of multiple web browsers for CSS support.

This makes it very useful for feature detection and making website CSS cross-browser compatible.

Here are the lists of different CSS elements which are not supported by different web browsers.

• CSS elements not supported by different versions of Internet Explorer (IE)

• CSS elements not supported by any latest versions of Google Chrome

• CSS elements not supported by any latest versions of Mozilla Firefox

This way you can get the list of CSS elements that are not supported by the different versions of multiple web browsers using the “Can I Use” tool

Another tool which helps to realize CSS support is Modernizr. It performs CSS feature detection on different versions of web browsers by conditionally loading JavaScript and CSS files as per the required web browser version.

Learn from the best to create a powerful cross site & cross browser dynamic automation tests using Selenium

How to perform CSS feature detection using Modernizr?

Let us understand how you can perform CSS feature detection using Modernizr.

Modernizr is an open source JavaScript library, which efficiently helps in finding solutions for cross-browser compatibility issues. It conditionally loads JavaScript or CSS files based on the test cases written in accordance with different versions of web browsers.

Modernizr detects the CSS features which are not compatible with the designated version of a web browser, thereby letting you know the open ends of CSS code where you can improve for an optimal cross-browser CSS compatibility.

• You need to add the following line of code in your HTML document

script src="modernizr.js">/script

• Then you can use npm to download and install Modernizr by using the following line in command prompt.

npm install -g modernizr

• Select the CSS features you would want to detect, and then click on Build to download the custom builds.

• Modernizr adds classes in your HTML tag to find out the classes which are supported by the given version of the browser and those which are not supported.

In this way, the features that are not supported by the given web browser are prefixed with a no, as shown in the above image. As class “cssanimations” is not supported by IE9 it is prefixed with no and mentioned as no-cssanimations.

This is how Modernizr works in applying selectively CSS:

• Create copies of supports-feature-detect.html and supports-styling.css and save them as modernizr-detect.css and modernizr-detect.html respectively.
• Update the link element and title so that it points to the newly created file.

<link href="modernizr-detect.css" rel="stylesheet">

• Above the link, update the script element using this code to apply Modernizr library to the code

<script src="modernizr-detect.js"></script>

• Edit your opening tag to

<html class="no-js">

• Upon reloading look at your browser’s DOM inspector. It would consist of the support status of the CSS classes.
• Say the browser doesn’t support cssanimations class, and it appears as no-cssanimations. So if it supported cssanimations class then it would have appeared with the cssanimations class name.
• Further update the CSS to use Modernizr rather than @supports, by simply replacing the two @supports blocks in modernizr-detect.css by the following code:

/* The animation code that changes background color of div */

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Properties for browsers with CSS animations */

.cssanimations main {
  display: block;
}

.cssanimations main div {
  padding-right: 5%;
  animation-name: example;
  animation-duration: 4s;
}

/* Fallbacks for browsers that don't support CSS animations */

.no-cssanimations main div {
 padding-right: 5%;
 background-color: #ffffff;
}

Since the class names are already put on the <html> element, it would help you to target browsers to know whether the version supports the ‘cssanimations’ class.

What does the future hold for CSS feature detection?

Although CSS feature detection has been very much useful so far in building cross-browser compatible UIs (User Interfaces). As far as its future prospects are concerned, so far the developer community have emphasized more on the JavaScript to resolve cross-browser compatibility issues. But with the changing times, developers have started to consider CSS a significant part of cross-browser compatibility.

With this aspect, CSS feature detection would emerge largely with a lot of opportunities to explore this technique to the behest of cross-browser compatibility of websites.