HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人)主导的“前端开发模版”。HTML5 Boilerplate 是一套具有非常多先进特性的框架,可以让开发者快速制作出面向未来的网站。 开始一个Web项目,HTML的书写总是重中之重,一个好的HTML能从根源上规避大量潜在问题,所以Web App应该全部应用一个标准化的高质量HTML模板,而不是将所有页面交由开发人员自由发挥。 这里推荐使用HTML5 Boilerplate项目作为App的默认模板以及文件路径规范,无论是网站或者富UI的App,都可以采用这个模板作为起步。 可以使用 git clone git://github.com/h5bp/html5-boilerplate.git 或者直接下载HTML5 Boilerplate项目代码。HTML5 Boilerplate的文件结构如下: 从上往下看:
如果是一个主要面向移动设备,则主要将jQuery换成了Zepto.js,以适应移动设备。 HTML5 Boilerplate的模板核心部分不过30行,但是每一行都可谓千锤百炼,可以用最小的消耗解决一些前端的顽固问题: 使用条件注释区分IE浏览器
之所以要这样写:
通过上面的条件注释,就可以在CSS中针对不同情况分别处理:
meta标签的书写顺序 为了让浏览器识别正确的编码,meta charset标签应该先于title标签出现。 meta X-UA-Compatible标签可以指定IE8以上版本浏览器以最高级模式渲染文档,同时如果已经安装Google Chrome Frame则直接使用Chrome Frame渲染。而指定渲染模式的meta X-UA-Compatible标签同样需要优先出现 :
设置移动设备显示窗口宽度
这是移动设备专属的标签,具体设置需要根据项目实际情况调整。 使用Modernizr做浏览器差异检测 Modernizr常做前端的应该都不陌生。引入Modernizr后,html标签的 对于低版本浏览器的向上兼容需要根据项目实际需求处理,Modernizr也非常周到的给出的绝大多数HTML5功能的兼容方法。 脚本一个完整的Boilerplate里还包含一个build目录,里面config目录里有针对ant的配置文 件,default.properties自然是默认属性定义,用户可以修改project.properties来定义自己的属性;tools目录下有 各种编译工具。 编译时,libs下的文件不会再改变,但mylibs中文件以及另两个都会一起压缩到一个js文件中,style.css也会被压缩,同时 images目录下会针对jpg和png优化。js中consloe.log函数将被去除,html文件也可以压缩,默认使用htmlbuildkit, 还可以用htmlclean或htmlcompress来压缩。 再看看default.properties里定义哪些选项
后面是文件目录的定义,以及编译工具的定义。 结语进入 HTML5 Boilerplate 项目的门槛非常低,有充足的空间用于试验。您可以将这个项目作为您的试验项目,探索它带来的好处,如果其中有任何缺失或您不需要的东西,尽管进行相应修改。 【编辑推荐】 |
|