1

在我的下一个个人项目中，我想使用 HTML5 文档类型。我知道几乎所有浏览器都支持 HTML5，甚至 IE6，因为 HTML5 向下兼容。

但是：我是否必须使用任何 JS 库才能真正使其工作，例如 HTML5shim、Modernizr 或 HTML5 Boilerplate（尽管我知道 HTML5 Boilerplate 不是库）？

我的意思是，如果我不必使用它们，这些项目是什么 - 我读过使用 HTML5shim 将是所谓的“最佳实践”，这是真的吗？如果我不使用其中任何一个会怎样？section一些浏览器会忽略标记元素aside吗？

我还读到使用这些库本质上是不好的，因为如果用户停用了 JS，网站就会中断 - 但另一方面：现在谁停用了 JS？我可以只包含一个noscript标签，不是吗？

另外，我在一篇文章中读到，这些库会导致更多问题，然后才能给我们带来好处。在我看来，这似乎是作者的个人观点，还是它们真的造成了这么多问题？

编辑

好吧，在测试 Modernizr 和 HTML5 Boilerplate 之后，我不得不说这是一个很好的解决方案。但是有一件事困扰着我，我不确定我是否做得对。示例：我想border-radius在一个名为#form-box. 对于这个例子，我假设圆角对于网站是必不可少的。如果它们不是必需的，如果 IE 用户看不到它们，我不会看到问题。

所以我有了这个类，为这个盒子提供了每个浏览器应该能够解释的基本样式：

#form-box {
    background-color: #f0eeee;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    margin-top: 50px;
}

然后，对于知道的浏览器border-radius：

.borderradius #form-box {
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

对于不知道的浏览器border-radius（即 IE6），我使用添加圆角的 polyfill“PIE”，即使在使用 JS 的 .htc 文件的 IE 中：

.no-borderradius #form-box {
    behavior: url(PIE.htc);
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

这就是我目前的做法。这很酷，但是：这么多重复的代码？这真的有必要吗？还是我做错了什么？

4

1 回答 1

1

我在使用 html5boilerplate 时没有遇到任何问题，虽然我通常会精简它并删除我的项目不需要的东西，但它是一个很好的样板开始。

于 2012-02-24T17:55:34.090 回答