html5shiv aka html5shim

Question

我是响应式设计世界的新手。

我在设计中使用http://www.responsivegridsystem.com/。它告诉我添加以下标记

<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->    
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>

由于媒体查询在IE8中无效，根据此问题IE7, IE8 support for css3 media query我也使用以下标记

<!--[if lt IE 9]>
    <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

是否需要所有这些？什么是html5shim，modernizr和css3mediaqueiries之间的区别？

我需要使用modernizr吗？因为我在js文件中没有做任何事情，比如jQuery。

Answer 1

它们有三个非常独立的目的，一切都非常重要，但并非总是需要所有（如果有的话）。

html5shiv aka html5shim

html5shiv是一个脚本，允许您在此答案时正确使用旧版浏览器，Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）以及Firefox 3.x中的html5元素。

那么，这究竟意味着什么？它非常简单。 html5中有许多新元素（例如<section>，<aside>，<header>和<footer>来命名一对），以及创建自己的元素的能力自定义元素。这意味着我们可以编写更多语义（和更清晰）的代码。所有精彩内容，但不幸的是，旧版浏览器不会将您的css应用于与支持一起发布的元素之外的元素<div>，<p>，<span>，这些内容）。幸运的是@sjoerd-visscher dropped some knowledge并保存了这一天。他发现如果你使用document.createElement来创建任何新元素，它会将其注册为受支持的元素之一，并且css可以工作！这意味着您实际上可以在生产中使用 html5元素。当时这是一个巨大的交易，幸运的是，随着那些旧浏览器的濒临灭绝，它变得越来越不重要。

除了注册元素之外，它已经扩展为为浏览器添加一些基本样式。

如果您不必支持Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）或Firefox 3.x.，那么不要需要使用html5shiv。

css3-mediaqueries-js

css3-mediaqueries-js在不支持它们的浏览器中添加了对名为media queries的css功能的支持。如果您不确定这意味着什么，请查看The Boston Globe，Mitsubishi Australia或techcrunch等网站，然后调整浏览器大小。

媒体查询允许您根据浏览器的某些属性或属性组合（宽度，高度等）有条件地应用css。它们非常强大，并且为很多现代网页设计提供动力。

现在，问题是你是否真的需要像css3-mediaqueries-js这样的东西。曾经一度流行，但人们（包括我自己）推荐mobile first design越来越普遍。这意味着基本样式应该是移动网站，媒体查询添加到基础设计，而不是隐藏/删除某些内容。因此，不支持媒体查询的浏览器（css3-mediaqueries-js所针对的浏览器）将获得“移动”设计，而不是填充，然后在每次调整大小时应用媒体查询。较旧的浏览器通常意味着较旧，较慢和较小的计算机。他们不仅缺乏对媒体查询的支持，而且他们的javascript引擎比现有的Chrome，Firefox和IE浏览器的引擎要慢几百（有时几千倍）。对于那些不那么强大的东西的所有额外工作很容易导致这些旧浏览器的用户体验降级。

您是否应该使用它最终取决于您，但请务必问问自己什么对用户最有利，而不一定是设计师：]

Modernizr

Modernizr是一个功能检测库，允许您以简单的方式检查新的Web功能。默认情况下，（（您可以在此处构建自定义版本）[http://modernizr.com/download/]，更改您想要的任何内容）它会在页面上添加<html>元素类，从而可以根据其结果轻松修改设计。

.css-gradients .background {
  background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
  background: url(gradient.jpg);
}

（当然这是一个非常简单的例子，你可以使用没有现代化的基本后备来完成同样的事情，但它只是作为一个易于理解的例子）

它不会主动添加或删除任何内容，但与yepnope之类的内容结合使用，您可以测试一个功能，并有条件地为该功能添加一个填充。

像这样的东西

yepnope({
  test : Modernizr.mediaqueries,
  nope : ['css3-mediaqueries.js']
});

会检查浏览器中是否支持mediaqueries，如果不是，它会将css-mediaqueries-js加载到polyfill支持。

Answer 2

HTML5shiv 用于在ie8中模拟html5元素。

css3-mediaqueries-js 和回复js 执行类似任务（支持媒体查询）

Modernizr 实际上是一个浏览器功能测试人员，其中包括一堆css类，以及后来应用手工样式即。

最佳用法是使用 - 使用 html5shiv

selectivizr

html5shim，css3-mediaqueries.js和modernizr之间的区别

2 个答案:

html5shiv aka html5shim

css3-mediaqueries-js

Modernizr