设计师介绍

Louis Lazaris. 经过 Louis Lazaris.  |  2012年4月16日

It’现在罕见地找到了一个网络设计师’T码他自己的设计。在网上和打印中使用这么多资源,教导了HTML和CSS的基础知识,并且由于这些语言的事实’T Rocket Science,现在有很多图形设计师至少拥有标记和造型的基本知识。

但随着HTML和CSS基金会的责任很大。如果HTML或CSS功能并未’在某些浏览器中工作,我们需要确保我们提供浏览器是次要或后退的经验。

所以在这篇文章中我’我要介绍一种确保你的方法’Re Designs能够利用新的HTML和CSS功能使用 现代人 JavaScript库和API。对于大多数开发人员来说,这可能很容易,所以我’m专门为刚刚开始学习HTML和CSS的非程序员和设计师来说。

 

害怕(什么“JavaScript” and “APIs”? No problem!

我知道你是什么’re thinking: “I don’T知道JavaScript,除非'api’与相关的压力有关,那么你就有一些事情’ve lost me already.”

不用担心。相信它与否,只是关于任何具有基本HTML和CSS知识的人,至少可以学习,至少在某种程度上使用现代化的库 - 即使是对JavaScript的零知识而不是线索 API. stands for.

 

什么是 ?

现代人 is a JavaScript library that lets you tell the browser something like the following, but in programming terms:

“嘿,浏览器!您是否支持[插入功能]?伟大,让我们’在行动中看到它!但如果你不’支持它,我希望你这样做:[在这里插入行为]。”

所以Modernizr没有’t将任何功能添加到浏览器中(似乎暗示的名称暗示),但它只是告诉您浏览器是否支持您的功能’re trying to use.

这允许您尝试使用新的HTML5和CSS3功能,而无需担心您的网站在不支持浏览器中突破或看起来不太优选。当然,这比希望事情更好’休息;使用Modernizr,您可以更好地控制浏览器中发生的事情。

 

添加到网页

要在项目中开始使用,您必须将其链接到它将使用它的每个页面上。这里’s how you do it:

<!doctype html>
<!-- other stuff here... -->
<html>
<head>
     <!-- other stuff here... -->
     <script src="js/modernizr-2.5.3.min.js"></script>
</head>
<!-- other stuff here... -->

请注意该代码示例中的脚本引用是指特定版本。下载时,您可以选择下载 完整的开发版 或者 自定义构建 仅包括您打算使用的部件。

对于开发和学习,开发版是优选的,可能是必要的。但请确保你不’T使用完整版本。您希望您的JavaScript尽可能小,以便您的网站加载更快。所以在你之后’弄清楚你’重新包含,使用自定义构建选项修剪库,仅包含您的功能’LL在该项目中使用。

此外,对于所有现代化’s features to work correctly, you need to include the script in the <head> section, instead of at the bottom of the page where scripts are customarily placed for faster page loading.

 

现代人 includes the HTML5 “shim”

如果你’使用新的HTML5元素,您’可能是包括众所周知的 html5垫片脚本 在您的页面上进行样式时跨浏览器支持HTML5’■新的语义元素。

每当您在项目中包含Modernizr时,您可以删除对该脚本的引用。现代人’默认情况下,S构建页面包含Shim脚本(当然,开发版本也是如此)。这个小额奖金可能似乎很小,但您必须加载到项目中的文件越小,您的网站将越快。

 

现代人 ’s generated classes

要查看后台在加载时在后台完成了多少工作,您所要做的就是检查包含Modernizr库的任何页面的生成的源。

然而,查看生成的源与众所周知的源不同“view source”. A simple “view source”不会向您展示任何内容’s动态添加在客户端。查看生成的源,您’LL必须使用像Firefox(firefox)这样的Web开发人员工具或使用Chrome,Safari和IE的更新版本的工具。

当页面加载时,Modernizr将运行许多功能测试(测试所有类型的HTML5和CSS3功能),然后根据这些测试的结果添加类来修改标记。这里’屏幕抓取显示在查看包含Chrome中的Modernizr的开发版本的页面的生成源时会发生什么:

现代人 's Generated HTML Classes in Chrome

如果浏览器支持功能,则该功能按名称添加为标记的类。如果不支持该功能,则添加和添加类。“no-“。因此,如果您在旧浏览器中查看相同的生成源,如IE8,您 ’ll see a lot of “no-”类,如下屏幕抓取所示:

现代人 's Generated HTML Classes in IE8

然后可以在您的CSS中使用这些类以不同的方式,具体取决于是否支持功能。所以让’s假设你想使用CSS3’S圆角的特色。您可以在CSS中执行类似的事情:

.no-borderradius .box {
    border: solid 2px blue;
}

.borderradius .box {
    border: solid 1px blue;
    border-radius: 20px;
} 

在上面的两个CSS规则中,您’重新定位相同的元素(具有一类的元素“.box”). But because you’重新使用现代化之一’s生成的类(在这种情况下“borderradius” class), you’能够改变“.box”在非支持浏览器(如IE8)中不同的元素。在这个例子中,出于美学的原因,当元素的角落aren的角落时,也许你想要一个稍微厚的边界’t rounded.

可以审查测试的CSS3功能 在’s documentation, and they include background-size, border-image, border-image, box-shadow, hsla(), multiple backgrounds, text-shadow, keyframe animations, transitions, transforms, gradients, and more.

通过所有这些不同的特征测试为您完成,您是否有许多不同的选择来处理不同的支持级别,如果您选择这样做。

 

大学教师’T GO螺母 - 使用渐进式增强

这里应该注意到,在许多情况下,使用现代化’S类可以创建不必要的代码。例如,如果你’re using multiple backgrounds, it will probably be enough to just declare the background-image property two times in the same rule set – one for the single fallback background, and one that references the multiple backgrounds. So the Modernizr class of “no-multiplebgs”在那种情况下是不必要的。

这是因为浏览器没有任何一行的CSS’理解将完全忽略,使用相同属性的前一行仍然有效。使用CSS级联以这种方式将帮助您逐步增强CSS样式,因此您应该仅利用Modernizr’在级联未经级联的情况下的课程’t help you.

也是,虽然我们’在渐进式增强的主题上,现代化也增加了一类“js” or “no-js”到标签,指示浏览器是否具有JavaScript支持。当JavaScript不可用时,这允许您以不同方式为不同的元素。要利用此,只需添加“.no-js”在CSS选择器的开始时,您要应用的样式。

 

加载Polyfills的脚本

如果由于客户端压力或其他一些因素,则需要在不支持浏览器中包含某些功能的几乎相同的体验,您可以选择包含其中一个 HTML5和CSS3 Polyfills.

现代人 ’S功能测试将帮助您仅在需要它们的浏览器中加载Polyfill脚本。所以在JavaScript文件中,您可能有这样的东西:

现代人 .load({
    test: Modernizr.cssanimations,
    yep : 'animations.css',
    nope: 'animations-polyfill.js' }); 

此示例从Modernizr文档中脱颖而出,显示了如何根据CSS3关键帧动画的功能测试来加载不同的脚本。虽然在许多情况下,你’ll可能只是让动画元素在非源浏览器中出现非动画,您可以选择使用此类型的条件资源加载,包括模拟您的JavaScript动画库文件’重新与CSS3动画一起尝试。

This feature of Modernizr is called 现代人 .load()和is included as an option in the Modernizr build, but can also be used as a standalone script called yepnope.js. 代替 。

不可否认,如果你’ref to javascript,然后是它’s unlikely you’请使用现代化的此功能。但这种简单的介绍应该向您展示您选择使用某些高级HTML5和CSS3功能以及Polyfills的方法。

有关使用加载聚填充的更多信息,请退房 适当的部分 在文档中。

 

条件脚本分支

除了根据某些条件加载单独的脚本外,您还可以选择在已现有脚本内使用条件分支。例如,如果你’re using HTML5’s new placeholder feature, you might have the following in your JavaScript:

 if (!Modernizr.input.placeholder) {
    // placeholder not supported;
    // do stuff to mimic it here } 

The above code will run everything inside the if statement in any browser that doesn’t support HTML5’s placeholder attribute.

可以以这种方式测试许多其他功能,因此请务必查看 所有支持的功能 在文档中。

 

结论

如果您经历了JavaScript,那么您可以使用更多的方式使用Modernizr,除了我’上面讨论过。因此,请查看他们的文档,以良好的现代资格概述’s capabilities.

你也可以使用 HTML5请 帮助你利用“new and shiny” features “responsibly”。这几点参考网站将为所有新的东西提供对回退和聚填充的良好建议。

所以不要’害怕在下一个项目中尝试现代化。虽然一些基于JavaScript的东西可能需要一些习惯的东西,但您应该能够使用CSS类来提供所有浏览器的稳固体验。

 

参考

 

你以前用过吗?分享您在评论中的经验!