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 回答