HTML5 Boilerplate与HTML5重置

时间:2011-04-19 16:13:29

标签: javascript html css html5 boilerplate

嘿大家 - HTML5 BoilerplateHTML5 Reset是两个HTML,CSS和JavaScript模板,内置了许多现代最佳实践。他们的目标基本相同:

  • 快速,强大,现代的Web开发
  • HTML5(呃!)
  • 跨浏览器规范化(包括对IE6和移动浏览器的支持)
  • 渐进增强和优雅降级
  • 效果优化
  • 不是框架,而是下一个项目的起点

显然,它们的功能非常相似。它们的实现方式有何不同(例如,可能使用不同的技术实现IE特定的CSS修复)?它们的范围有何不同?看起来HTML5 Boilerplate有点大(构建工具,服务器配置等),但是当涉及到人们将看到的实际网站时,很难知道HTML5重置的范围。

4 个答案:

答案 0 :(得分:47)

总的来说,这两个项目都是为开发Web项目的开发人员提供一个坚实的起点。它们都摆脱了许多开发人员发现自己为每个项目重新创建的繁琐,易于出错的样板。它们如何进行的细节略有不同,但在大多数情况下,它们都能达到相同的效果。

正如您所说,

HTML5Boilerplate在一些构建脚本中添加了一些内容,以帮助开发人员遵循最佳实践来加速其服务器端项目的页面,例如远期过期标题等等。 HTML5Reset项目更侧重于语义,内容和样式。例如,HTML5Reset在HTML5中有更多的页面内容示例结构(以帮助向人们展示如何使用某些新元素),而HTML5Boilerplate却没有。

HTML5Boilerplate包含的响应时间和页面速度部分越来越重要,因为越来越多的用户发现自己在移动平台上,并且随着Google增加效果page response times have on page rank。有很多论文显示页面响应时间略有增加,对网站的排名方式产生了可衡量的负面影响used and perceivedespecially in an eCommerce setting ...通常情况下,速度较慢的网页将减少百分比)。

在CSS前端,两个项目的大多数重置样式部分非常相同,基线设置的一些细微差别。然而,IE特定的修复程序大致相同,HTML5Boilerplate声明比HTML5Reset更多的控制,而不是IE样式表单元素之类的东西(即复选框/单选按钮和有效/无效状态)

HTML5Boilerplate涵盖HTML5Reset的两个主要CSS区域不是帮助使网站更易于访问的常见帮助类,例如.hidden.visuallyhidden,以及对打印样式的一些实质性调整这既可以使浏览器中的打印更加相似,也可以节省成本和可访问性,例如使背景图像透明(不浪费碳粉),并将实际URL添加到链接和标题缩写。

我强烈建议阅读两个项目的信息以及他们如何在并排比较中做事情,因为相似之处,以及差异(及其背后的推理)是非常有益的,并帮助我更好地决定我想要使用的每个部分。

最终,就像任何“库”类项目一样,您作为开发人员需要了解您正在做什么,并且可能应该调整您的基线以满足项目的特定需求。

答案 1 :(得分:0)

我在一个环境中工作,以前的开发人员将公司用于JQueryPrototype ......并且这是一团糟。我们不仅要完成兼容模式,还要考虑它带来的额外开销。在调试时,Prototype“劫持”Firebug中的调试消息,这导致更多的工作。令人抓狂的部分是我几个月来一直在解开这个烂摊子而且刚刚开始接近完成它......就在我即将拔掉原型的时候,我似乎总是找到另一个依赖它的部分......

正是出于这个原因,我每次都反对具有类似目的的框架组合。例如,无论你认为YUI Grids有多酷,如果你加载整个YUI Framework,你最好不要做Jquery,Moo或Prototype。你只是不必要地让自己陷入困境。它会导致加载时间(wrecks the user experience),并且只会给开发人员带来麻烦和不必要的工作。

请查看您网站的这个阶段,例如构建基础。你有机会使用你想要使用的任何东西,但你必须要小心,不要“把自己画成一个角落”,可以这么说。因此,请使用基于您的资源可用的专用和最佳工具。不要只是用可爱的东西!我们很幸运,许多高质量的工具都是免费的,所以我们有一个选择。但要知道,你正在指导未来的网站方向,如果你的决定是匆匆做出的话,你可能就像我这样必须处理后果的人。

所以,除非你不打算使用另一个框架,否则我支持重置......或者甚至只是做符合顶级质量标准的CSS。

答案 2 :(得分:0)

你可以使用其中任何一个......

就像@murtaugh说的那样(http://5by5.tv/bigwebshow/45)当你刚开始使用Reset时,你不需要学习任何东西。根据我的经验,在R& D部门工作,当您需要演示或快速迭代时,您可以使用重置(或锅炉,如果您已经知道它)。当我需要构建产品进行部署时,我转向Boiler只是因为有更多东西。 适合我,但现在因为我知道我可以很容易地使用其中任何一个。

答案 3 :(得分:0)

我实际上几乎想说使用传统的reset.css是最好的...我发现移动应用程序中的兼容性没有问题。但是,我正在使用jQuery移动框架开发这些应用程序。

所以我猜你使用什么样的工具确实是有条件的。 Phonegap似乎没有任何问题将我的代码编译到所有操作系统中。在模拟器中查看我的源代码看起来非常好......

所以除非你试图实现polyfill,否则我真的不明白样板。