理解html5shiv
The HTML5 Shiv enables use of html5 sectioning elements in legacy Internet Explorer and provides basic Html5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
—— GitHub aFarkas/html5shiv
html5shiv有什么用?
html5shiv使得传统浏览器支持部分HTML5元素并提供相应的基本样式。传统浏览器,即主流浏览器的低版本,包括IE6-9、Safari4.x和Firefox 3.x等。
html5shiv怎么用?
下载html5shiv,在html文档的head
标签里引入链接。
注意:引入的文件路径要正确
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
html5shiv支持哪些html5元素?
目前最版本为3.7.3,默认支持
abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video
html5shiv并不能让传统低版本浏览器正常实现html5元素所有功能,而是对不支持html5元素,如video和audio等,当成相应的成块状或行内元素进行显示,并可以为html5元素添加样式。
可以通过JavaScript定制需要支持的html5元素,如通过在head
中并且在引入html5shiv之前插入以下代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
其中elements
的属性值是html5元素标签,可以是由空格分隔的字符串或数组;shivCSS
的属性类型为Boolean,默认为true
,给html5元素添加CSS样式;shivMethods
的属性类型为Boolean,默认为true
,覆盖createElement
和createDocumentFragment
方法。
注意:
- 定制的html5元素会覆盖默认元素,所以
elements
的属性值要包含文档中出现的所有html5元素。 shivCSS
主要为块状元素添加dispaly:block
。若shivCSS: false
,默认所有元素按照行内元素显示。- 当使用第三方库或框架,如Jquery 1.7+,已经解决为IE6等浏览器动态创建元素,无需重写
createElemnt
方法,所以shivMethods
可以设置为false
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
不用html5shiv解决问题
有时,页面中只需用到section header footer article
等少数几个html5语义化元素。能不能不通过html5shiv,自己写javascript实现低版本浏览器支持这些元素呢?
其实很简单,把下面的代码嵌入到head
中。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
再对html5元素添加相应样式
- 1
- 2
- 3
- 1
- 2
- 3
这样IE6-8就能正确识别上述几个html5元素并为之添加样式了。
深入html5shiv
html5shiv可以说是解决html5兼容问题的一个小框架。阅读并html5shiv源代码有助于理解html5shiv的工作原理,并学会自己开发一套符合工作需要的html5框架来支持html5。
框架学习方法
阅读框架源代码需要精通JavaScript。若对JavaScript的语法有基本了解,也可以从以下几点对源代码进行粗略分析:
- JavaScript模块化。知识点:封装、接口、规范。
- 健壮性。处理异常的能力,代码覆盖所有分支,便于测试。
- 注释。每一个变量,每一个函数都有美而小的注释。
- 代码组织结构。变量->函数->接口,这样结构清晰明了。
- 浏览器检测。前端经常遇到检测浏览器兼容问题,看看html5shiv是如何检测浏览器是否兼容html5的。