有哪些工具/库/模板可以帮助您开始使用 HTML5/CSS3？答案

【问题标题】：what are some tools/libraries/templates which will help to get started with HTML5/CSS3?有哪些工具/库/模板可以帮助您开始使用 HTML5/CSS3？
【发布时间】：2012-01-15 09:18:22
【问题描述】：

我们是小型网络应用开发公司。我们计划升级到 HTML5/CSS3，我们正在经历培训阶段（我们正在使用视频教程）。虽然 HTML5/CSS3 看起来很有希望，但跨浏览器兼容性以及许多新 API 似乎存在很多问题。有没有什么模板可以在等待 W3C 的完整推荐时立即使用？目前，是否有我们可以用来确保跨浏览器支持的库/工具？

帮助非常感谢。 :)

【问题讨论】：

对于 HTML 5 中的大量 API（或者不是但经常被说成是）。如果您需要特定的 HTML 5 功能，那么可能有一个库可以帮助您，但您需要专注于您想要实现的目标，而不是“HTML 5”。
现在，我们只想开始。由于 HTML5 的许多功能仍在开发中，我们希望从主流浏览器支持的成品部分开始，并观察 HTML5 的整体演变。
原因导致结果。问题导致解决方案。 HTML 5 特性就是解决方案。遇到问题然后寻找解决方案，这可能是 HTML 5 功能。不要寻找 HTML 5 的特性，然后试图找到要解决的问题。
嗯，是的，你是对的。我们是网络开发公司。目前，我们正在编写 HTML/XHTML/CSS 代码，我们希望将其替换为 HTMl5/CSS3。
Modernizr 为您提供了一个很好的平台来检测查看浏览器支持哪些功能，然后根据测试结果加载不同的 css、javascript 或其他资源。以 css3 动画为例：如果支持，则在悬停时运行花哨的 2d 链接旋转，如果不支持 - 甚至不要尝试。

标签： html css

【解决方案1】：

您不会“升级”到 HTML5 和 CSS3。 HTML5 是 HTML，句号。由于此类标准需要数年时间才能最终确定，因此您过渡到使用新元素和属性。有一天，您使用所有新工具而很少考虑旧工具，这绝不是一次大规模的改变。

库和模板是帮手，但不是必需品。根据需要选择元素和属性。不要仅仅因为有了新东西就开始使用它。

【讨论】：

HTML5 和 CSS3 也不是一回事：参见 diveintohtml5.info/introduction.html#one

【解决方案2】：

html 和 css3 会得到支持还需要一段时间，但与此同时，如果您想抢占先机，请查看themeforest，他们有很多 html5 和 php 模板供您开始使用。另一个很棒的工具是查看这个noupe 帖子，其中列出了一些免费的 html5/css3 教程。

【讨论】：

【解决方案3】：

让我们将跨浏览器兼容性分为两部分：新的 HTML5 元素/属性和 HTML5 API。

元素：不支持新 HTML5 元素的浏览器（如 <section>），例如旧版本的 IE，只会打印内容并忽略样式。您可以使用一点 JavaScript hack 使元素在 IE 中具有样式：HTML5shim。

属性：使用新的 HTML5 属性也完全没问题。不理解它们的浏览器只会忽略它们。使用Modernizr，您可以检查 HTML5 / CSS3 功能是否可用，如果不可用，则仅提供 JavaScript 后备。

要为新的 HTML5 APIs 提供支持，您可以使用 polyfill 添加对缺失功能的支持。这是一个很好的清单： https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

顺便说一句：使用一些 HTML5 API（如 localStorage）作为渐进式增强是一个好主意。如果只是为了增强用户体验的一个小功能，用 HTML5 来做就行了，让老版本的浏览器只用普通版本。

【讨论】：

【解决方案4】：

HTML5...从哪里开始？

现在，您最好的选择是遵循浏览器的功能。因此，请关注不同供应商关于该主题的浏览器开发博客。

顺便说一句，HTML5 主要是一组不相关的功能，从标记到 WebGL 和客户端存储 (WebSQL) 等新功能。 HTML5 建立在以前的规范 HTML 标准之上，并阐明了许多特性。另一方面，CSS 是 CSS1+CSS2+CSS3 的巅峰之作。

上网吧，所有的信息都在那里！

资源

A brief history of markup（信息）
HTML5 Rocks（资料+教程）
Dive Into HTML5（信息）
CSS3（资料+教程）
Quirksmode（浏览器兼容性）
WebGL experiments（实验，可以查看源码学习）
HTML5 demos（演示）
Mozilla's development blog
Webkit

库和模板

工具

StackOverflow 相关问答

我会尽量继续添加资源...

【讨论】：

【解决方案5】：

jQuery 是最流行的跨浏览器库。它将在支持它的浏览器上使用 HTML5 功能，并在需要时优雅地回滚到其他内容。它经常更新，功能非常丰富。

quirksmode http://www.quirksmode.org/compatibility.html 是所有 HTML/CSS/DOM 功能以及哪些浏览器支持它们以及支持程度的列表。

w3schools http://www.w3schools.com/ 是了解特定 HTML/CSS/DOM 功能如何与代码示例配合使用的绝佳资源。

jsfiddle http://jsfiddle.net/ 是一个在线 javascript/HTML/CSS 编辑器。这是在将想法放入代码之前测试想法的好方法。这也是与他人共享代码示例的好方法。

jsPerf http://jsperf.com/ 是一个在线代码速度检查器。如果您不确定在 javascript 中做某事的最佳方式，您可以在此处运行示例。结果也可以分享。

【讨论】：

【解决方案6】：

Paul Irish 和朋友们刚刚推出Move The Web Forward：

您喜欢网络标准。你想回馈社会。好奇从哪里开始？我们随时为您提供帮助。

...

学习

网络最美妙的地方之一就是它在不断变化。虽然这些变化和改进可能是压倒性的，但我们在这里帮助您赶上！以下是一些很好的资源，可引导您了解浏览器的工作原理，并帮助您及时了解它们的改进。

...

【讨论】：