After all, the HTML5 specification is a specification that has just defined, and some browsers cannot support the new labels and new attributes, especially the IE8 and below versions of the browser. Here are some practical methods that use the new tags of HTML5 in the page. The purpose is to make the new label in HTML5 also get limited support in the low -level browser, so as not to affect the entire page function.
IE8 browser has not added new support for HTML5 tags, so it cannot directly display the content in the new HTML5 tag in IE8. Fortunately, the IE8/IE7/IE6 supports the label generated by the Document.createElement method. You can use this feature to allow these browsers to support the new label of HTML5. The code is as follows:
var e = abbr, Article, ASIDE, Audio, Canvas, DataList, Details, Dialog, EventSource, Figure, FOOTER, HGROUP, MARK, METER, METER, OUTPUT, PROGESS , Section, Time, Video.split (' , '); Var I = E.Length; While (i-) {document.createelement (e [i])}After the browser supports the new label, you need to add the default style of the label:
Article, ASIDE, FIGCAPTION, FIGURE, FOOTER, Header, HGROUP, NAV, Section {Display: Block} Mark {background:#ff0; color:#000}}}}In this way, the two simple JavaScript code and CSS code can make the IE8 and below version of the browser support new tags in HTML5. Of course, the best way is to directly use mature frameworks. At present, there are many frameworks based on this idea. The most used is the HTML5Shim framework. HTML5SHIM's use method is very simple.
<!-[If LT IE 9]> <script> SRC = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <! [Endif]->
HTML5 in a broad sense includes HTML5, CSS3 and new APIs. Because the new features are more or less compatible with browsers, it is necessary to detect whether the browser supports this feature when using the new features. When the browser does not support new features, it can be appropriately compatible. At present, there is no uniform method to detect the support of new features. Some new features have corresponding APIs to recognize, and some new features can only be identified through some techniques. Fortunately, there are enthusiastic engineers abroad have developed a number of new features of detection. Among them, Modernizr with higher detection accuracy and use rate.
The principle of the modelnizr framework is to automatically detect whether the browser supports the new features and add the corresponding class to the <HTML> tag. If the browser supports a certain feature, a class named after the characteristic name will be added. On the contrary, add a class named after the nO-prefix and the characteristic name. At the same time, it will also generate an object called Modernizr. By judging the attribute values of the characteristics of the characteristics on this object, you can know whether the current browser supports this new feature. The Modernizr framework also contains the function of the HTML5Shim framework, which can allow the IE8 and below browsers to support new tags.
The use method of Modernizr is very simple. First of all, the JavaScript file of the framework is introduced in the Head part:
<script src = js/modelnizr.min.js> </script>
Secondly, add a class named NO-JS on the HTML label:
<html class = no-js>
If the browser does not disable JavaScript, after the browser loads the page, the class on the HTML tag will dynamically replace and add. After loading, the HTML tag is similar to the following:
<html class = js canvas canvasTtext Geolocation RGBA HSLA No-Multiplebgs BorderRADERRADIUS BOXSHADOW OPACIMANIMAMNS NO-CSSGRA DIENTS NO-CSSREFLECTIONS CSSTRANSFORMS NO-CSSTRANSFORMS3D No-CSSTRANSINIONS VID
In the CSS code, you can use these classes to add backward compatibility code. The following is an example of using multiple background maps:
#NICE {background: url (background-one.png) top left repeat-x;}.}. at-x, url (background-two.png) bottom left repeat-x;}Readers who are interested in this framework can browse the official website of Modernizr to get more and more detailed examples and usage methods.
Audio and videos are commonly used on the page, but browsers are more confusing, so here is a separate topic. Audio and videos are the characteristics of the native support of the browser earlier, so that audio and video playback is no longer limited to third -party plug -ins, especially in mobile platforms. Audio and videos are a big cake, and all browser manufacturers want to distinguish the largest one, which also causes the browser to distinguish the format of audio and video formats. The list of supporting audio formats for the browser is as follows:
Browser | Version | Support format |
Internet explorer | 9.0+ | Mp3, AAC |
Chrome | 6.0+ | OGG VORBIS, MP3, WAV (9.0+) |
Firefox | 3.6+ | OGG VORBIS, WAV |
Safari | 5.0+ | MP3, AAC, WAV |
Opera | 10.0+ | OGG VORBIS, WAV |
About 80%of the browser supports the <UDIO> tag of HTML5, but there is no uniform audio format. From the perspective of the support format, all browsers can play audio on the Audio element. The best way is to provide two formats of MP3 and OGG. The compatible code is as follows:
<Audio Controls> <Source SRC = Elvis.mp3 Type = 'Audio/MPEG; Codecs = MP3'> <Source SRC = Elvis.oga Type = 'Audio/Ogg; > <!- Compatible code behind : For example, display prompt information, provide download links, use Flash player, etc.-> Browser do not support <udio </code> tags </audio>
The video is also similar to the audio. As follows, the browser supports the video list of the video:
Browser | Version | Support format |
Internet explorer | 9.0+ | MP4 |
Chrome | 6.0+ | Mp4, webm, oGG |
Firefox | 3.6+ | Webm, oGG |
Safari | 5.0+ | MP4 |
Opera | 10.0+ | Webm, oGG |
Judging from the video format supported by the browser, the best way is to provide two formats in Webm and MP4 formats. Compatible code is as follows:
<video Controls> <Source SRC = Video.webm Type = Video/Webm> <Source SRC = Video.mp4 Type = Video/MP4> <! ght = 360 SRC = http://www.youtube.com/embed/xzmuyqmaqcw? R = 0 frameborder = 0 AllowFullScreen> </iframe> </video>
The above is the browser compatibility version of the new label of HTML5 introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!