javascript Modernizr、html5shiv、ie7.js 和 CSS3 Pie。什么时候使用?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5667076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modernizr, html5shiv, ie7.js, and CSS3 Pie. Which to use and when?
提问by stefmikhail
I'm just starting to use HTML5 and CSS3 in my documents. I understand the need for JavaScript to bring Internet Explorer up to speed with these new tags and styles, but I don't know which to use and when!
我刚刚开始在我的文档中使用 HTML5 和 CSS3。我了解 JavaScript 需要使 Internet Explorer 跟上这些新标签和样式的速度,但我不知道该使用哪些以及何时使用!
My plan was to use html5shiv and IE9.js to look after the HTML5 tags as well as the transparent pngs (and whatever other pesky errors they fix) but then Modernizr and CSS3 Pie were brought to my attention.
我的计划是使用 html5shiv 和 IE9.js 来处理 HTML5 标签以及透明的 png(以及它们修复的任何其他讨厌的错误),但随后 Modernizr 和 CSS3 Pie 引起了我的注意。
My question is, if I use Modernizr, does it look after my need for html5shiv as well as IE9.js? Or should I include these as well? What is the overlap, if any?
我的问题是,如果我使用 Modernizr,它是否能满足我对 html5shiv 和 IE9.js 的需求?或者我也应该包括这些?如果有重叠,重叠是什么?
And what does CSS3 Pie do that Modernizr or the others doesn't? Or vice versa?
CSS3 Pie 有哪些 Modernizr 或其他没有的功能?或相反亦然?
I appreciate your guys help. Let me know what you do!?
我感谢你们的帮助。让我知道你在做什么!?
回答by Rich Bradshaw
I've got extensive experience with all of these, having used them for a few years each.
我对所有这些都有丰富的经验,每个都使用了几年。
Modernizr
现代化
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
包括 HTML5shiv 功能还有更多功能——如果你不使用其他功能,那就不要使用它,它确实会减慢页面加载速度,但如果你需要它是值得的!
HTML5shiv
HTML5shiv
Very small, just fixes html5 elements in IE, nothing else.
非常小,只修复了 IE 中的 html5 元素,没有别的。
CSS3PIE
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
允许您在旧版本的 IE 中使用边框半径、渐变和框阴影。也可以在 IE 6 中允许 PNG。为页面加载添加明显的延迟。
ie7.js (and ie9.js)
ie7.js(和 ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
为您提供许多 CSS3 选择器、最小和最大宽度、多个类和固定定位。如果您愿意,也可以修复 png。似乎并没有让事情变慢。
Conclusion
结论
My advice would fall into two categories:
我的建议分为两类:
If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.
如果您只是使用新的(互联网上 2 年新的?!)元素和 CSS3 选择器,那么使用 ie9.js + html5shiv。这是轻量级的,只是让你继续做事情,而不必记住 IE6 不支持任何东西。
If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.
如果你使用了很多 CSS3 的东西,那么 CSS3PIE 会整理出 border-radius 和 box-shadow。渐变支持似乎有点不稳定,所以我一直使用后备图像代替。Modernizr 让您可以轻松地向具有不同支持的浏览器提供不同的属性。我主要用它来确定浏览器是否具有 CSS 转换和转换,因为它们对任何图像滑块或内容轮播都很有用。值得使用自定义工具来仅包含您想要的功能 - 网络表单内容会在几毫秒内显示一个带有 50 的文本框,因此如果您不想要它,则值得禁用它。
Hope that's helpful!
希望这有帮助!
回答by Brian Campbell
I would recommend you use only what you need. Build your app in a browser that supports the features you are using, and periodically test in other browsers that you support. If something isn't working correctly, find the appropriate fix, whether it be html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all of the new features in HTML5 and CSS3 all in one page, so you don't need to include every polyfill library in existence. Wait until you find problems with the features you're trying to use, then try and find the library necessary to do that.
我建议你只使用你需要的。在支持您正在使用的功能的浏览器中构建您的应用程序,并定期在您支持的其他浏览器中进行测试。如果某些内容无法正常工作,请找到适当的修复程序,无论是 html5shiv、IE9.js、Modernizr 还是 CSS3 Pie。您不会在一个页面中使用 HTML5 和 CSS3 中的所有新功能,因此您不需要包含现有的每个 polyfill 库。等到您发现尝试使用的功能存在问题,然后尝试找到执行此操作所需的库。
回答by FrEaKi
I've used mainly CSS3Pie...it works great. But this afternoon i tested it on my laptop with I.E8 and there was an problem with it...it was disabling some css lines...when i removed the css3pie code my site gained twice the speed...then i came accross the posts with people arguing about the css3 slowdown...So at the moment i'm busy to find another way for IE7 & IE8 to have border-radius and shades.
我主要使用 CSS3Pie...它工作得很好。但是今天下午我用 I.E8 在我的笔记本电脑上测试了它,它有一个问题......它禁用了一些 css 行......当我删除 css3pie 代码时,我的网站速度提高了两倍......然后我来了与人们争论 css3 减速的帖子交叉……所以目前我正忙于为 IE7 和 IE8 寻找另一种方式来拥有边界半径和阴影。
If you want to use it...please test alot as it is NON-official fixes
如果您想使用它...请进行大量测试,因为它是非官方修复程序