Question

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

但是：我是否必须使用任何JS库来实现它，如HTML5shim，Modernizr或HTML5 Boilerplate（虽然我知道HTML5 Boilerplate不是库）？

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

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

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

修改

好的，在将Modernizr与HTML5 Boilerplate一起测试之后，我不得不说这是一个很好的解决方案。但有一件事让我感到困惑，我不确定我是否做得对。示例：我想在名为border-radius的div上使用#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”，即使在IE中使用JS .htc文件：

.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;
}

这就是我现在这样做的方式。这很酷，但是：重复代码如此之多？这真的是必要的吗？或者我做错了什么？

Answer 1

我在使用html5boilerplate时没有遇到任何问题，虽然我通常会将其缩小并删除我的项目不需要的东西，但这是一个很好的样板文件。

HTML5 Doctype + JS库 - 必要吗？

1 个答案: