modernizr_使用Modernizr和Yepnope进行递归增强

最新推荐文章于 2021-08-04 06:36:52 发布

dingshi7798

最新推荐文章于 2021-08-04 06:36:52 发布

阅读量198

点赞数

文章标签： python java javascript js vue ViewUI

原文链接：https://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

版权

modernizr

Alex Sexton的yepnope.js脚本加载程序的1.0版已于上周发布，因此我认为这是向您展示如何将Yepnope与Modernizr结合起来以利用HTML5功能而又不招致最新用户的最佳时机。 -划痕的浏览器。

什么是回归增强？

您可能已经熟悉渐进增强的概念：设计在所有浏览器中均可使用的功能的基准版本，然后为功能更强大的浏览器添加功能。

“ polyfill ”或“回归增强”技术只是意味着您可以继续使用新功能，然后使用JavaScript模仿旧版浏览器中的本机行为。因此，您无需使用脚本在所有浏览器上创建阴影，而只需使用box-shadow属性编写CSS，然后包含一个脚本，该脚本透明地采用该属性并使用您指定的值在其中创建阴影JavaScript。

什么是Modernizr？

对于不熟悉它的人来说， Modernizr是一个很小JavaScript库（压缩后为3.7KB），它可以检测浏览器中是否存在HTML5和CSS3功能。瑞娜（Raena）在她最近的有关创建逐步增强的图像库的教程中使用了它，凯文（Kevin）在最近的SitePoint播客中采访了图书馆的创建者之一保罗·爱尔兰（ Paul Irish）。

Modernizr非常适合回归增强，因为它使您知道何时可以依赖浏览器功能，何时需要依靠JavaScript或替代样式。

使用Modernizr的主要方法有两种。最常见的方法是依靠它添加到html标记中HTML类。在最新的Firefox 4 beta中使用Modernizr查看页面时，这是我在开头<html>标记中看到的内容：

<html class="  js flexbox canvas canvastext webgl no-touch geolocation postmessage  no-websqldatabase indexeddb hashchange history draganddrop no-websockets  rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow  textshadow opacity no-cssanimations csscolumns cssgradients  no-cssreflections csstransforms no-csstransforms3d csstransitions  fontface video audio localstorage no-sessionstorage webworkers  applicationcache svg inlinesvg smil svgclippaths" lang="en">

所有这些类都告诉我浏览器中可用的功能。例如，我有@ font-face，web worker和CSS3框阴影，文本阴影和border-image，但是我没有websocket或3D CSS转换。因此，在我CSS中，我可以执行以下操作：

.borderradius .box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.no-borderradius .box {
  // fallback code providing an alternate styling to browsers that don't support border-radius
}

这很简单。最酷的一点是，Modernizr还为您提供了一个JavaScript API，该API可以告诉您某个功能是否可用，包括一些未显示在<html>标记类中的功能。例如，假设我有一些JavaScript代码为输入元素提供占位符值。如果浏览器支持占位符属性，则无需运行此代码，因此我可以在执行代码段之前使用Modernizr进行检查：

if(!Modernizr.input.placeholder) {
 // custom placeholder code
}

这样，只有在内置浏览器不支持占位符文本的情况下，我的代码才会运行。

问题

不过，这里仍然有一个小问题。如果浏览器确实支持占位符属性，那么我仍然要求它下载一堆除了模拟该属性的行为外什么也不做的代码。我相信您会同意这有点浪费！输入yepnope.js 。如果满足某些条件，Yepnope将加载脚本。最好的部分是它与Modernizr完美地集成在一起，因此所有内容都可以固定到位。

图书馆网站上最简单的示例如下所示：

yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

如果浏览器支持地理位置定位，则该代码段将从服务器加载normal.js文件；否则，它将同时加载polyfill.js和wrapper.js。

一个实际的例子

现在您已经知道所有部分的工作原理，现在将它们放到一个真实的示例中。假设您有一个简单的注册表单，其中包含用户名，密码和电子邮件地址的字段。这是标记：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>yepnope.js test</title>
  <style>
    div { margin: 10px; }
    div p { font-size: 12px; color: #333; }
  </style>
</head>
<body>
  <form>
    <div>
      <label for="username">Username</label>
      <input type="text" required pattern="[a-z0-9_-]{3,15}" name="username" id="username">
      <p>Between 3 and 15 characters. Only letters, numbers, underscores (_) and hyphens (-) are allowed.</p>
    </div>
    <div>
      <label for="email">Email</label>
      <input type="email" required placeholder="someone@somewhere.com" name="email" id="email">
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" required name="password" id="password">
    </div>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

该表单使用许多HTML5功能：required属性， placeholder属性和pattern属性。在支持浏览器（例如Firefox 4 beta）中，这提供了占位符文本和一些基本的客户端验证：

占位符属性提供占位符文本

电子邮件输入类型提供内置格式验证

pattern属性提供基于正则表达式的验证

但是，在不支持的浏览器中，您什么也收不到。让我们使用基于JavaScript的polyfill和Modernizr和Yepnope进行修复，以仅在需要时加载它。

步骤1：下载Modernizr和Yepnope

新的自定义Modernizr构建器使您可以将yepnope捆绑到Modernizr中，因此我们就可以这样做。前往http://modernizr.github.com/Modernizr/2.0-beta/ 。在这种情况下，我们需要检测的只是表单属性和输入类型，因此请单击这两个复选框，将HTML5 Shim和Modernizr.load（yepnope.js）框打勾。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

单击生成，然后下载生成以获取您的自定义Modernizr库。

步骤2：在页面中包含Modernizr

因为Modernizr需要确定是否应该运行其他脚本，并添加CSS可能需要的类，所以应该将其放在HTML的顶部，而不是通常建议的底部：

<script src="modernizr.custom.02401.js"></script>

（请记住用您自己的自定义内部版本号替换。）

步骤3：测试功能支持

现在，我们要测试浏览器是否支持新的输入类型和属性：

yepnope({
  test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern,
  nope: 'h5f.min.js'
});

我们正在加载Ryan Seddon的H5F库，该库将模拟在此示例中使用的所有新输入类型和属性。在这种情况下，我们有一个polyfill脚本，该脚本涵盖了许多不同的功能，因此我们要立即检查所有这些功能，并在不支持其中一个的情况下加载polyfill。这并不总是理想的，但是为了说明起见，我们将事情保持简单。

您还会注意到，在此yepnope调用中我们没有使用“ yep”。很好：如果存在我们要检测的所有功能，Yepnope根本不会做任何事情，这就是我们想要的。

步骤4：执行回呼代码

您可能会想在下一行代码中仅调用新包含的库，但这行不通。 Yepnope.js 异步加载脚本，因此浏览器在进入代码的下一行之前不会等待脚本加载完成。这意味着，如果您尝试使用刚刚告诉Yepnope加载的功能，则可能会出现错误。

相反，Yepnope允许您为每个加载的脚本设置一个回调函数，以在该脚本完成下载后运行。运作方式如下：

yepnope({
  test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern,
  nope: 'h5f.min.js',
  callback: function(url, result, key) {
    H5F.setup(document.getElementById("signup"));
  }
});

每次加载脚本时，都会调用您指定为回调的函数。这意味着，如果您同时指定了是和否，则回调将被调用两次。幸运的是，回调函数传递了三个有用的参数： url是加载的结果的URL， result是一个布尔值，表示是否通过了测试，而key是一种使用key引用特定资源的方式（您不会暂时不必为此担心）。

在上面的示例中，我仅在nope上加载脚本。结果，无论如何，仅在测试失败的情况下，回调将仅被调用一次，因此我不必担心参数。

步骤5：完成！

信不信由你，您完成了。使用上面的代码，支持新表单功能的浏览器将使用其内置功能，而较早的浏览器将加载JavaScript后备。仅将JavaScript加载到那些不支持的浏览器中，因此您将以更快的加载时间来奖励现代浏览器。更好的是，由于polyfill可以连接到新属性，并且不需要任何额外的类，因此该解决方案是面向未来的。随着时间的流逝，越来越少的访问者将下载polyfill，直到最终他们都没有下载。

下一步是什么？

我仅介绍了yepnope，js的最简单用例。对于如此小的库，它包含很多功能，因此，您一定应该通读项目页面以查看一些更高级的用法示例。即使您不将其用于HTML5或CSS3填充，通过异步并按需加载脚本也可能获得性能提升，因此Yepnope仍然值得研究。

现在，您所要做的就是开始在网站上使用新HTML5和CSS3功能，前提是您可以在不影响您的最新浏览器体验的情况下为旧浏览器的用户提供全功能的备用信息。约会访客。

翻译自: https://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

modernizr

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
modernizr_使用Modernizr和Yepnope进行递归增强

modernizr Alex Sexton的yepnope.js脚本加载程序的1.0版已于上周发布，因此我认为这是向您展示如何将Yepnope与Modernizr结合起来以利用HTML5功能而又不招致最新用户的最佳时机。 -划痕的浏览器。什么是回归增强？您可能已经熟悉渐进增强的概念：设计在所有浏览器中均可使用的功能的基准版本，然后为功能更强大的浏览器添加功能。 “ polyfill...
复制链接

扫一扫