Posted on

Feature Detection With Modernizr for Cross-Browser Compatibility

Modernizr is an open source and compact JavaScript library that allows developers to craft various levels of experiences for users with respect to cross-browser compatibility. Modernizr helps developers to perform cross-browser testing to check whether new the generation of HTML5 and CSS3 features are natively supported by their visitor’s browsers or not and to provide dedicated fallbacks for older browsers that are notorious for their poor feature support. Modernizr coupled with the principle of progressive enhancement helps to design cutting-edge websites layer by layer, taking advantage of powerful modern web technologies without discarding users that are still using older browsers like IE.

How Does Modernizr Work?

Modernizr was launched in July 2009 by Faruk Ateş to battle cross-browser compatibility issues in a uniform, standardized manner. Today, Modernizr as feature detection library is one of the most popular JavaScript libraries, offering more than 270 tests, and is being used in 8.76% websites globally (half a million websites in the US alone). Instead of relying on highly untrustworthy browser detection methods using “User-Agent” sniffing, Modernizr is, instead, based on feature detection. While browser detection is centered around the question “what browser is the visitor using?” feature detection revolves around the question, “what features are supported by the visitor’s browser?” Modernizr runs a series of JavaScript-based feature detection tests in a user’s browser to check for cross-browser compatibility for HTML and CSS by allowing you to target each browser's functionality separately.

Posted on

CSS With Feature Detection for Cross-Browser Compatibility

The primary goal of every web developer is to build websites with modern and intuitive designs that deliver a smooth and seamless user experience, irrespective of which browser they might be using to surf the web. The Internet has witnessed a massive unprecedented boom in recent decades. As of December 2018, there are more than 4.1 billion internet users in the world and close to 1.94 billion websites on the web. This consequently implies an expansion in a number of ways websites are being accessed by audiences across the globe. This gives rise to the conundrum of cross-browser compatibility, which poses a huge challenge to developers. As the number of browsers and their versions are growing at such a rapid pace every year, the task of trying to make a website appear and perform consistently across all browsers is every developer’s nightmare. However, as tedious and time-consuming as cross-browser testing may be, it is an imperative phase of every testing cycle. While it is considered nearly impossible to have a website appear and work identically on every browser, there still are a number of ways to deliver consistent user experience and reach a wider target audience. In this article, we’ll explore what cross-browser compatibility issues are and why they occur, how CSS with feature detection is more favorable to browser detection, and tips to achieve near perfect browser compatibility when designing websites.

Why Browsers Render Content Inconsistently

browsers

Posted on

34 Ways to Save Time on Manual Cross Browser Testing, Part 3: Methods 21-34

Welcome back! If you missed Part 2, you can check it out here. 

21. Study the Browser Landscape for the Target Markets

In our last article, we discussed the importance of testing on browsers that really matter, i.e. browsers that are more prevalent. Hence, before you start designing and coding your website/web app, it is important to have a look at resources like CanIUse which outlines features that are supported on different browsers. For example, you can check whether CSS Grid Layout would work on Safari or not. It is a good starting point to know your target audience and develop features that keep your target audience in mind.