跳到主要内容

使用Modernizr开始您的项目

Modernizr是一个流行的功能检测JavaScript库,自2010年以来,它帮助Web设计人员和开发人员利用HTML5和CSS3,尽管跨浏览器支持不均衡。它赢得了2011年度.net的年度开源应用程序,并打包在流行的HTML5 Boilerplate中,因此可以说它包含在今天投入生产的许多网站上。

大多数涵盖使用Modernizr基础知识的教程只显示语法,不讨论何时以及为什么要在项目中使用它。由于这一点,许多网页设计师不会充分利用图书馆,也不知道图书馆默认包含的“附加内容”。

Modernizr提供了四个对网页设计师有用的主要功能:

  • 特征检测:能力特定的CSS级注入
  • 特征检测:Javascript对象
  • Modernizr.load();
  • HTML5Shim

Modernizr的核心是测试当前浏览器支持的HTML5和CSS3功能,并通过在HTML元素上注入类和通过JavaScript对象来提供这些信息。

特征检测:CSS类注入

加载后,Modernizr会测试客户端浏览器的HTML5和CSS3功能,并在HTML元素上注入反映该浏览器支持的功能的类。这使您可以根据支持的功能对元素进行不同的样式设置。

因此,例如,当最新版本的Chrome启动加载Modernizr的页面时,HTML元素如下所示:

将其与Internet Explorer 7中加载的同一页面中的HTML标记进行比较:

使用注入的类

现在我们可以访问支持哪些功能,我们如何处理这些信息?

对于初学者,我们可以通过利用HTML元素上注入的类来解决CSS中的差异:

.opacity .button {background:#000; opacity:0.75;}。no-opacity .button {background:#444;}

有这个可供您使用的很好,可以为可能出现的一些复杂的样式问题提供解决方案。但是,最好谨慎使用,而不是作为适应旧浏览器的主要方法。

问题:可能会变得混乱

由于每个CSS规则主要针对某个功能的支持或不支持,因此您的样式表最终可能如下所示:

.button {// base styles} .boxshadow .button {// apply box shadow} .textshadow .button {// apply text shadow} .opacity .button {// add opacity} .no-opacity .button {// without不透明我们可能想要做一些不同的事情}

通过整个样式表进行,这将变得难以驾驭。

问题:依赖JavaScript

此外,依赖于Modernizr动态生成的CSS选择器会增加您的网站曝光率,以防脚本无法加载或用户关闭JavaScript。虽然禁用JavaScript的用户子集很小,但还有其他情况可能无法执行脚本。

是否使用“.no-feature”或“.feature”

根据您对旧浏览器的偏好或针对较新浏览器的偏好,您可能更愿意使用选择器来查找缺少的功能(即。没有不透明度而不是现有的功能(即.opacity)。这样,如果由于某种原因,Modernizr无法加载,您最终不会在完美的现代浏览器中削弱您的网站。

.box {//旧浏览器的假框阴影右边:实心2px#444; border-bottom:solid 2px#444;}。boxshadow .box {border:none; box-shadow:10px 10px 5px#888;}

在上面的示例中,如果Modernizr没有加载,则不会添加boxshadow类,并且假的框阴影将在所有浏览器中显示为new和all。

.box {box-shadow:10px 10px 5px#888;}。no-boxshadow {border-right:solid 2px#444; border-bottom:solid 2px#444;}

在这里,如果Modernizr没有加载,至少会在较新的浏览器中应用正确的样式,这通常会被大多数用户使用。

尽可能使用后备

在许多情况下,您可以利用CSS3属性,同时指定回退只是因为旧版浏览器将忽略不支持的声明。这消除了使用Modernizr注入的类来应用样式的需要。

#container {background:#EEEEEE; //不支持BG gradientsbackground的浏览器:线性渐变(到底部,rgba(0,0,0,0.65)0%,rgba(0,0,0,0)100%); // W3C}

许多浏览器,很多经验

用户通常只会在一个浏览器中看到您的网站,因此只要每个浏览器的体验相当不错,就没有理由要求它们完全相同。如果较旧的浏览器无法执行特定的CSS声明,您可能只是使用它。

因此,如果使用IE 6-8的用户看不到导航项的微妙弯曲边框,您可能会考虑使用耸肩而不是解决方法来解决它。

#nav li {Border:solid 1px#333;边界半径:3px;}

当您可能想要使用这些类时

但是,在某些情况下,您可能希望利用注入的类:

1.如果后备样式不起作用

例如,如果你申请背景:#000;不透明度:#.25,不支持不透明度功能的浏览器会显示黑色背景,而实体却是浅灰色背景(#CCC)在没有不透明度支持的情况下,可能更接近预期的效果。

的#container {背景:#FFF;不透明度:0.25;}。无不透明度#container {background:#ccc;}

2.如果更改很小并且确实特定于功能

例如,隐藏触摸屏设备上导航的下拉箭头:

.touch .nav li.dropDown {background:none; }

跨浏览器样式:使用级联IE类

对于一般的跨浏览器CSS更正,使用条件注释在HTML元素上设置特定于IE的类,以便彻底清除旧浏览器(即Internet Explorer v6-9)的外观。

此方法与您在HTML5 Boilerplate中找到的方法非常接近,并允许您以适用于每个较低版本浏览器的方式为特定版本的IE设置规则。通常,但并非总是如此,在更高版本的IE上应用的CSS更正修复了较低版本中存在的类似问题。

特征检测:JavaScript对象

在加载时,库会创建一个名为Modernizr的JavaScript对象,其测试结果可用作布尔属性。

Modernizr.geolocation; // Chrome中为True,IE7Modernizr.cssgradients中为False; //在Chrome中为True,在IE7Modernizr.fontface中为False; //在Chrome中为True,在IE7中为True

这可以直接在您的代码中使用:

if(Modernizr.canvas){//创建画布对象并获取绘图}否则{//猜猜我们将不得不做其他事情。} if(Modernizr.localstorage){//按计划先行先生}否则{//不支持本地存储,必须尝试其他内容}

它还可以使您为触摸屏用户提供更实用的体验。

鉴于悬停效果并不适用于大多数触控启用设备,因此提供差异化体验通常是有意义的。一个简单的例子是通过悬停传递内容:

if(Modernizr.touch){$('。rolloverCaption')。css('display','block');} else {$('。rolloverCaption')。css('display','none')。hover(函数(){$(本).fadeIn(300); $(本)淡出(300);})};

For desktop browsers, content and navigation can sometimes be delivered through hover events.

对于桌面浏览器,有时可以通过悬停事件传递内容和导航。

对于触摸设备:

With touch devices, the hover event cannot be relied upon

使用触摸设备时,无法依赖悬停事件

基于某些功能的可用性,例如LocalStorage的,您可能需要实施非常不同的解决方案。在这种情况下,根据浏览器是否支持动态加载.js文件可能是有意义的LocalStorage的。使用Modernizr.load()很容易做到这一点。

Modernizr.load()也称为yepnope.js

Yepnope.js是一个异步条件资源加载器,专为Modernizr设计和集成。这只是意味着yepnope.js将根据给定条件或一组条件(如支持触摸屏功能或画布的浏览器)在后台加载JavaScript和CSS文件等脚本。语法很直观,您可以使用Modernizr.load()或yepnope.js来调用该函数。以下是等效的:

Modernizr.load({Test:Modernizr.localstorage,Yep:'localstorage.js',Nope:'localstorage-alternative.js'}); yepnope({Test:Modernizr.localstorage,Yep:'localstorage.js',Nope: 'localStorage的-alternative.js'});

如果“test”评估为true(即浏览器支持本地存储),则将加载localstorage.js,否则将加载localstorage-alternative.js。 “Yep”和“Nope”是可选的,所以你可以使用一个:

Modernizr.load({Test:Modernizr.touch,是的:['js / touch.js','css / touch.css']});

Modernizr.load / Yepnope.js是一个快速轻量级的脚本加载器,当您使用Modernizr时,您已经获得了它。对于许多项目Yepnope.js会好起来的。为了比较最流行的脚本加载器 - RequireJS,Yepnope和LABjs - 与Yepnope的创建者,请查看本文

使用modernizr.load()来“修补”浏览器:垫片和polyfill

垫片是我们可以提取的一些代码,用于模拟或复制缺少的浏览器功能。 Polyfills是一类特定的垫片,旨在精确复制该功能。

使用Modernizr.load(),如果浏览器不支持关键的CSS或HTML功能,我们可以加载替代样式和/或JavaScript。从那里我们可以纠正问题,提供替代方案,或将用户推送到“浏览器不支持”页面。

目前,最好和最全面的单个polyfill列表正在上升在GitHub上。但是,该列表并未针对质量进行策划,并且包含许多正在开发中的填充物和垫片,有缺陷,有时甚至根本不起作用。

使用polyfill库:webshims Lib

Webshims Lib是一个很有前途的各种垫片集合,可以根据需要加载。这是完全“修补”旧版浏览器以符合现代标准的更全面尝试之一。使用Modernizr,它只根据需要加载垫片。它并不试图填充每个功能,但其中一些亮点是:canvas,HTML5表单,HTML5 mediaelements,geolocation和JSON-storage。看到这里更多细节。

The Webshims Library is a promising ‘multi-shim’ that adds HTML5 functionality as needed

Webshims Library是一个很有前途的“多垫片”,可根据需要添加HTML5功能

利用HTML5Shim

IE的旧版本不允许使用它无法识别的样式元素,例如语义元素

。但是,HTML5Shim使用了一种解决方法。

HTML5Shim对Modernizr来说就像饮用水中的氟化物一样 - 无论如何,它都会添加到你使用的东西上。基本上它只是一个垫片,默认情况下包含在Modernizr中,允许您在不支持它们的浏览器中使用HTML5语义元素。



翻译字数超限