Measure the test taker's knowledge about HTML5 and CSS3 support methods.
This article describes how to check the browser's support for HTML5 and CSS3. Modernizr is used to check the browser's compatibility with HTML5 and CSS3 Code. For more information, see
HTML5, CSS3, and other related technologies such as Canvas and WebSocket bring Web application development to a new height. By combining HTML, CSS, and JavaScript, this technology can develop the effects of desktop applications. Although HTML5 promises a lot, HTML5-supported browsers and HTML5 standards are far from mature. It is unrealistic and time-consuming to support browsers. Therefore, when we decide to develop Web applications using HTML5 technology, we need to check the features supported by browsers.
Modernizr can help you check the HTML5 features supported by browsers.
The following code checks whether the browser supports Canvas:
The Code is as follows: <script>
Window. onload = function (){
If (canvasSupported ()){
Alert ('canvas ororted ');
}
};
Function canvasSupported (){
Var canvas = document. createElement ('canvas ');
Return (canvas. getContext & canvas. getContext ('2d '));
}
</Script>
The following code checks whether the browser supports local storage:
The Code is as follows:
<Script>
Window. onload = function (){
If (localStorageSupported ()){
Alert ('local storage ororted ');
}
};
Function localStorageSupported (){
Try {
Return ('localstore' in window & window ['localstore']! = Null );
}
Catch (e ){}
Return false;
}
</Script>
In the above two examples, we can intuitively check the features of the browser to ensure that the functions applied on the corresponding browser can work normally.
The advantage of using Modernizr is that you do not need to check such items, and there is a simpler method. Let's start:
When I first heard about the Moderizr project, I thought it was a JS library that allowed some old browsers to support HTML5. In fact, it was not. It mainly used the detection function.
Modernizr can be accessed through the web site http://modernizr.com, the site also provides a Custom Script Function, you can determine what features you need to detect, and accordingly generate the corresponding JS file, this reduces unnecessary JS Code.
After downloading the Modernizr JS file, you can use the <script> label to introduce it to the webpage.
The Code is as follows: <script src = "Scripts/Modernizr. js" type = "text/javascript"> </script>
Detect HTML elements
Once Modernizr is introduced on the page, it can be used immediately. We can declare different CSS classes in the
The Code is as follows:
<Html class = "js flexbox canvas canvastext webgl no-touch geolocation postmessage
Websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla
Multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
Cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d
Csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers
Applicationcache svg inlinesvg smil svgclippaths ">
You can also determine whether the browser enables JavaScript support:
The Code is as follows:
You can see some Getting Started examples in HTML5 Boilerplate (http://html5boilerplate.com) or Initializr (http://initializr.com), based on the above steps, adding the no-js class can determine whether the browser has enabled JavaScript support.
Use HTML5 and CSS3 features
You can directly define the required style in CSS for the CSS attribute added to the
The Code is as follows:
. Boxshadow # MyContainer {
Border: none;
-Webkit-box-shadow: #666 1px 1px 1px;
-Moz-box-shadow: #666 1px 1px 1px;
}
. No-boxshadow # MyContainer {
Border: 2px solid black;
}
If the browser supports box-shadows, the CSS class boxshadow is added to the
In addition, we can use the Modernizr object to perform this operation. For example, the following code is used to check whether the browser supports Canvas and local storage:
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:
The Code is as follows:
$ (Document). ready (function (){
If (Modernizr. borderradius ){
$ ('# MyDiv'). addClass ('borderradiusstyle ');
}
If (Modernizr.css transforms ){
$ ('# MyDiv'). addClass ('transformsstyle ');
}
});
Use Modernizr to load the script
When the browser does not support certain functions, you can not only provide a good alternative solution, but also load the shim/polyfill script to fill in the missing functions as appropriate (want to know)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
