javascript - HTML5 样板与 HTML5 重置

标签 javascript css html boilerplate

<分区>

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

  • 快速、稳健、现代的 Web 开发
  • HTML5(呃!)
  • 跨浏览器标准化(包括对 IE6 和移动浏览器的支持)
  • 渐进增强和优雅降级
  • 性能优化
  • 不是框架,而是您下一个元素的起点

显然,它们在功能上非常相似。它们的实现方式有哪些不同(例如,也许特定于 IE 的 CSS 修复是使用不同的技术实现的)?它们的范围完全不同吗?看起来 HTML5 Boilerplate 有点大(构建工具、服务器配置等),但是当涉及到人们将看到的实际站点时,很难知道它超越 HTML5 Reset 的地方。

最佳答案

总的来说,这两个元素都旨在为从事网络元素的开发人员提供一个坚实的起点。他们都摆脱了许多乏味的、有些容易出错的样板文件,许多开发人员发现他们自己为每个元素重新创建这些样板文件。他们如何处理的细节略有不同,但在大多数情况下,他们实现了相同的结果。

如您所述,HTML5Boilerplate 添加了一些构建脚本片段,以帮助开发人员遵循最佳实践,根据服务器端元素(例如远期过期 header 等)加速他们的页面。 HTML5Reset 元素更侧重于语义、内容和样式。例如,HTML5Reset 为 HTML5 中的页面内容提供了更多示例结构(以帮助向人们展示如何使用一些新元素),而 HTML5Boilerplate 则没有。

HTML5Boilerplate 包含的响应时间和页面速度部分变得越来越重要,因为越来越多的用户发现自己在移动平台上,并且随着 Google 提高效果 page response times have on page rank .有很多论文显示页面响应时间的小幅增加对您的网站的表现有显着的负面影响 used and perceived (especially in an eCommerce setting ...通常,页面慢 100 毫秒会减少所售商品的百分比)。

在 CSS 方面,两个元素的大部分重置样式部分非常相似,在基线设置的内容上存在一些细微差别。然而,针对 IE 的特定修复在很大程度上是相同的,HTML5Boilerplate 比 HTML5Reset 对 IE 如何设置表单元素(即复选框/单选按钮和有效/无效状态)的样式有更多的控制

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

我强烈建议通读这两个元素的信息以及它们是如何进行并排比较的,因为它们的相似之处和不同之处(以及它们背后的原因)都非常有用,并且帮助我做得更好决定我想使用的每个部分。

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

关于javascript - HTML5 样板与 HTML5 重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5719424/

相关文章:

javascript - angularjs - ngRoute 无法正常工作

javascript - iOS 5 Safari 中对 Web 开发人员有何新功能?

html - 如果屏幕小,Bootstrap 应用 nav-stacked

Javascript 转义除文本相关的所有 HTML 标签(<h1>、<p>、<img> 等)

html - (X)HTML 中 "PRE"标签的用途是什么

javascript - 防止 Angular 模板的浏览器缓存

javascript - 为什么这个 JavaScript 适用于 FF 而不是 IE8

javascript - 如何在 React Native 中将数据从一个屏幕发送到另一个屏幕?

javascript - 使用 Javascript 更改在按下回车键时激活哪个提交

css - 在 CSS 中剪切文本。可能的?