Shulou(Shulou.com)06/01 Report--

This article focuses on "how to test browser support for HTML5 and CSS3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to test browser support for HTML5 and CSS3.

HTML5, CSS3 and other related technologies such as Canvas, WebSocket and so on have brought Web application development to a new level. This technology can develop the effect of desktop application by combining HTML, CSS and JavaScript. Despite the promise of HTML5, the browsers supported by HTML5 and the HTML5 standard itself are not mature enough in reality. It is not realistic to worry about browser support at all now, and it will take time, so when we decide to use HTML5 technology to develop Web applications, we need to test the features supported by the browser.

Modernizr can help you check the HTML5 features supported by your browser.

The following code detects whether the browser supports Canvas:

Copy the code

The code is as follows:

_ window.onload = function () {

If (canvasSupported ()) {

Alert ('canvas supported')

}

}

Function canvasSupported () {

Var canvas = document.createElement ('canvas')

Return (canvas.getContext & & canvas.getContext ('2d'))

}

The following code detects whether the browser supports local storage:

Copy the code

The code is as follows:

_ window.onload = function () {

If (localStorageSupported ()) {

Alert ('local storage supported')

}

}

Function localStorageSupported () {

Try {

Return ('localStorage' in window & & window [' localStorage']! = null)

}

Catch (e) {}

Return false

}

In the above two examples, we can visually check the features of the browser to make sure that the functions we apply to the corresponding browsers work properly.

The advantage of using Modernizr is that you don't need to check items like this. There are easier ways to do this. Let's start with:

When I first heard about the Moderizr project, I thought it was a JS library that enabled some old browsers to support HTML5, but in fact it was not, it was mainly a detection function.

Modernizr can be accessed through the URL http://modernizr.com, the site also provides a custom script function, you can determine what features you need to detect, and generate the corresponding JS file, which can reduce unnecessary JS code.

2015625153003697.png (690 × 533)

Once the JS file for Modernizr is downloaded, it can be introduced into the web page through tags.

Copy the code

The code is as follows:

Detect HTML elements

As soon as we introduce Modernizr on the page, we can declare different CSS classes in the element that define features that we need to support or not, and unsupported features whose class name is usually no-FeatureName, such as no-flexbox. Here is an example that can be run on chrome:

Copy the code

The code is as follows:

You can also determine whether the browser has JavaScript support enabled:

Copy the code

The code is as follows:

You can see some examples of getting started in HTML5 Boilerplate (http://html5boilerplate.com) or Initializr (http://initializr.com)). According to the above steps, add the no-js class to determine whether the browser has JavaScript support enabled.

Use HTML5 and CSS3 features

If you add the CSS attribute to the tag, you can define the desired style directly in CSS, for example:

Copy the code

The code is as follows:

.boxshadow # MyContainer {

Border: none

-webkit-box-shadow: # 6661px 1px 1px

-moz-box-shadow: # 6661px 1px 1px

}

. no-boxshadow # MyContainer {

Border: 2px solid black

}

If the browser supports box-shadows, the boxshadow CSS class will be added to the element, otherwise the no-boxshadow class will be used. This assumes that the browser does not support box-shadow, we can use other styles to define.

We can also use the object of Modernizr to manipulate this behavior. For example, the following code is used to detect whether the browser supports Canvas and local storage:

Copy the code

The code is as follows:

$(document) .ready (function () {

If (Modernizr.canvas) {

/ / Add canvas code

}

If (Modernizr.localstorage) {

/ / Add local storage code

}

});

The global Modernizr object can also be used to test whether the CSS3 feature is supported:

Copy the code

The code is as follows:

$(document) .ready (function () {

If (Modernizr.borderradius) {

$('# MyDiv'). AddClass ('borderRadiusStyle')

}

If (Modernizr.csstransforms) {

$('# MyDiv'). AddClass ('transformsStyle')

}

});

Use Modernizr to load scripts

In cases where browsers don't support certain features, you can not only provide a good alternative, but also load shim/polyfill scripts to fill the missing features where appropriate. (for more information about shims/polyfills, see https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr has a built-in script loader that can be used to test one function and load another script when it doesn't work. The script loader is built into Modernizr and is a valid stand-alone yepnope (http://yepnopejs.com) script. The script loader is very easy to use, and it really simplifies the process of loading scripts depending on the availability of specific browser features.

You can use Modernizr's load () method to dynamically load scripts, which accept properties that define the function under test (test property), such as the script to be loaded after a successful test (yep property), the script to be loaded after test failure (nope property), and the script to be loaded regardless of test success or failure (both attribute). An example of using load () and its properties is as follows:

Copy the code

The code is as follows:

Modernizr.load ({

Test: Modernizr.canvas

Yep: 'html5CanvasAvailable.js'

Nope: 'excanvas.js'

Both: 'myCustomScript.js'

});

In this example, Modernizr also tests whether the canvas function is supported when loading the script. If the target browser supports HTML5 canvas, the html5CanvasAvailable.js script and the myCustomScript.js script will be loaded (using the yep attribute in this example is a bit far-fetched-this is just to demonstrate how the property in the load () method can be used). Otherwise, the polyfill script excanvas.js will be loaded to add support for previous versions of IE9 browsers. Once the excanvas.js is loaded, the myCustomScript.js will then be loaded.

Because Modernizr handles loading scripts, you can use it to do something else. For example, when Google or Microsoft's third-party CDN doesn't work, you can use Modernizr to load local scripts. An example of providing a local jQuery fallback process after CDN hangs is provided in the Modernizr documentation:

The code will first try to load jQuery. Exe from Google CND. Once the script download completes (or fails), a method is called. This method checks whether the jQuery object is valid, and if not, loads the local jQuery script. And then load a script named needs-jQuery.js.

At this point, I believe you have a deeper understanding of "how to test browser support for HTML5 and CSS3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.