HTML5 Browser Support


You can make some older browsers (that do not support HTML5) support HTML5.


HTML5 Browser Support

Modern browsers all support HTML5.

Furthermore, all browsers, including old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can"Teach"Browsers to handle"Unknown"HTML elements.

Note You can even teach IE6 (Windows XP 2001) to handle unknown HTML elements.

Define HTML5 elements as block elements

HTML5 defined 8 new HTMLsemanticelements. All these elements areblock-levelelements.

In order to make these elements correctly displayed by older versions of browsers, you can set the CSS property value todisplayInstanceblock:

Instance

header, section, footer, aside, nav, main, article, figure { display: block; }


Add new HTML elements

The instance adds new elements to HTML and defines the style for the element, the element name is

Instance<myHero> :

Instance

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>My first heading</title> <script>
document.createElement("myHero")
</script> <style>
myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; }
</style> </head> <body> <h1>My first paragraph.</h1> <p>My first new element</p> <myHero>Try it »</myHero> </body> </html>

JavaScript Statement

This is to add new elements for IE browsers.document.createElement("myHero")Internet Explorer Browser Issues


Internet Explorer Browser Issues

Internet Explorer versions 8 and earlier do not support the above method.

Note We can use the "HTML5 Enabling JavaScript" created by Sjoerd Visscher to solve this problem:

The above code is a comment, its purpose is to read the html5.js file and parse it when the IE browser version is less than IE9. shivNote:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

For domestic users, please use the static resources library on this site (Google resources library is unstable in China):

The HTML5 Shiv is a good solution for IE browsers. html5shiv mainly solves the problem that HTML5 proposes new elements are not recognized by IE6-8, these new elements cannot be used as parent elements to wrap child elements, and they cannot apply CSS styles.Perfect Shiv Solution

<!--[if lt IE 9]>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Instance


Perfect Shiv Solution

Instance

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial for Beginners —— Not only technology, but also dreams!!!</title> <!--[if lt IE 9]> <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>Try it »</h1> <article>html5shiv.js Reference Code must be placed in the <head> element, because IE browsers need to load this file before parsing the HTML5 new elements.</article> </body> </html>

Other Extensions

AI in progress...

HTML Instance