在我的下一个个人项目中,我想使用 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;
}
这就是我目前的做法。这很酷,但是:这么多重复的代码?这真的有必要吗?还是我做错了什么?