[HTML5] How to Deal with the browser compatibility issue of HTML5 new tags, html5 browsers
Original address: http://www.dang-jian.com /? P = 196
After all, HTML5 standards are just defined. Some browsers cannot support new tags and attributes, especially IE8 and earlier browsers. The following describes some practical methods to use HTML5 new tags on pages. The purpose is to make HTML5 new tags have limited support in low-level browsers, so as not to affect the entire page function.
The IE8 browser does not support HTML5 new tags, so the content in the HTML5 new tags cannot be directly displayed in IE8. Fortunately, IE8, IE7, and IE6 support tags generated using the document. createElement method. This feature allows these browsers to support HTML5 new tags. The Code is as follows:
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
After the browser supports the new tag, you also need to add the default tag style:
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 allow IE8 and earlier browsers to support new tags in HTML5. Of course, the best way is to directly use mature frameworks. Currently there are multiple frameworks based on this idea. The most popular frameworks are html5shim. The method of using html5shim is very simple, add a reference to the framework in the head part of the page:
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
In the broad sense, HTML5 includes HTML5, CSS3, and new APIs. Because the new features are more or less compatible with the browser, it is necessary to check whether the browser supports this feature when using the new features. When the browser does not support new features, you can perform appropriate backward compatibility processing. Currently, there is no uniform method to detect new features. Some new features can be identified by corresponding APIs, while some new features can only be identified by some techniques. Fortunately, enthusiastic engineers outside China have developed multiple new detection frameworks. Modernizr is the most accurate and frequently used framework.
The principle of the Modernizr framework is to automatically check whether the browser supports new features and add corresponding classes on the
Modernizr is easy to use. First, introduce the JavaScript file of the Framework in the head section:
?| 1 | <script src="js/modernizr.min.js"></script> |
Next, add a class named no-js to the html Tag:
?| 1 | <html class="no-js"> |
If the browser does not disable JavaScript, the class on the html Tag will be dynamically replaced and added after the browser loads the page. After loading, html labels are similar to the following:
?| 1 | <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready"> |
In CSS code, you can use these classes to add backward compatible code. The following is an example of using multiple background images:
?| 1234567 | #nice { background: url(background-one.png) top left repeat-x;} .multiplebgs #nice { background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;} |
Readers interested in this framework can visit the official website of Modernizr for more detailed examples and usage.
Audio and video are commonly used multimedia tags on pages, but browser compatibility is confusing. Therefore, this is a separate topic. Audio and video are early features supported by browsers, so that audio and video playback is no longer limited to third-party plug-ins, especially on mobile platforms. Audio and video are a big cake, and each browser manufacturer wants to get the most out of it, which also leads to the support for the differentiation of audio and video formats. The list of supported audio formats in the browser is as follows:
Browser |
Version |
Supported formats |
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, and WAV |
Opera |
10.0 + |
Ogg Vorbis, WAV |
About 80% of browsers support HTML5 <audio> tags, but there is no unified audio format. From the supported formats, to enable all browsers to play audio on the audio element, the best method is to provide MP3 and Ogg formats. The compatible code is as follows:
?| 123456 | <audio controls> <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'> <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'> <! -- Backward compatible code: for example, displaying prompt information and providing Download Links for flash players --> The browser does not support <code>audio</code> Tag</audio> |
The video format is similar to the audio format. The following is a list of formats supported by the browser:
Browser |
Version |
Supported formats |
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 |
From the video formats supported by the browser, the best way is to provide video in WebM and MP4 formats. The compatible code is as follows:
?| 123456 | <video controls> <source src=video.webm type=video/webm> <source src=video.mp4 type=video/mp4> <! -Backward compatible code: --> <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe> </video> |
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
