(建筑工程设计)前端工程师设计开发M的应用出口_第1页
(建筑工程设计)前端工程师设计开发M的应用出口_第2页
(建筑工程设计)前端工程师设计开发M的应用出口_第3页
(建筑工程设计)前端工程师设计开发M的应用出口_第4页
(建筑工程设计)前端工程师设计开发M的应用出口_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不AD：所以这些人在坚持WEB标准化的同时，也不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示。其中一个被使用的越来越多的hack技术是浏览器嗅探(browsersniffing)，使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。浏览器嗅探技术可以快捷的将代码进行分支，以便针对不同的浏览器应用不同的指令。b圈又回到了原地——各个浏览器对这些新技术的支持又开始变得参差不齐了。我们早都习惯了书写整洁的符合标准的代码，也不会再使用CSShacks或者浏览器嗅探这些不靠谱又低级的技术。我们也相信越来越多的用户会认同网站不必在所有浏览器里都看起来一样的理念。那面对当下这个熟悉的情形(浏览器支持的不同)，我们该怎么做呢？简单：使用特征检测(featuredetection)，这意味着我们不必通过问浏览器“你是谁？”来做出不靠谱的推测。取而代之，我们问浏览器“你能做这个或那个吗”。这么来检测浏览器的能力是很简便的，但一个个的花时间去手工测试依然令人厌烦。此时Modernizr可以帮助我们。Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师MLCSSHTMLCSS会牺牲其他不支持这些新技术的浏览器的控制。当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如@font-face、border-radius、borderimageboxshadowrgba)等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，的空闲地基开始，一个接一个的添加增强的应用层。因为使用了Modernizr，所以你容易知道浏览器都支持什么。下面我们来看首先从下载Modernizr的最新的稳定版(目前国内封了Modernizr的官网，我们可以从github上下载。或者更简单点，可以从堂主这里下载最新的1.7版的脚本文件)，在官网上你还可以看到它支持检测的所有特性的清单(本文末把它加入页面的区域：1.>2.<html>3.<head>4.<metacharset="utf-8">5.<title>MyBeautifulSamplePage</<span>title>6.<scriptsrc="modernizr-1.5.min.js"></<span>script>7.</<span>head>8.…o你的元素可能会变得看起来像下面这个样子：Modernizr同时还会创建一个JS对象，被命名为“Modernizr”，其内容是为每一个检测完的特性给出的布尔值结果组成的列表。如果浏览器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；如果浏览器不支持这个新元素，那它对应的值就是false。这个JS对象针对某些功能还会包含更为详细的信息，如“Modernizr.video.h264”会告诉你浏览器是否支持“Modernizr.inputtypes.search”会告诉你当前浏览器是否支持新的searchinput类型，等等。我们的未加工的简单小页面看起来有点像一个准测试系统了，但它具备更好的语义性和可访问性。让我们为它添加一点基本的看看添加了样式后的页面。下面，我们要增强这个页面使得它更有意思。我想为头部的h1应用一个奇特的文字效果，把关于检测特性的列表分为两栏，然后将带有一张照片的关于Modernizr的部分的一切都弄到右边去。我还要把围绕页面内容的边框变美点。现在，更给力的CSS3使你可以对一条规则添加更多的属性，如果浏览器不支持这些属性，它会忽略它们。配合使用CSS的层叠(继承)，你可以不能：根据浏览器对新东西支持的差异动态修改的的类名。我会通过对我们的页面添加2条新的规则来说明这点：1..borderradius#content{2.border:1pxsolid#141414;3.-webkit-border-radius:12px;4.-moz-border-radius:12px;5.border-radius:12px;6.}7..boxshadow#content{8.border:none;9.-webkit-box-shadow:rgba(0,0,0,.5)3px3px6px;10.-moz-box-shadow:rgba(0,0,0,.5)3px3px6px;11.box-shadow:rgba(0,0,0,.5)3px3px6px;12.}第一条规则为“#content”元素添加了一个12像素的圆角。但在既有的页面里我们已经为“#content”元素设置了一个属性值为“2pxoutset#666”的边框，这在box是直角的时候是蛮好看的，但在圆角情况下就不是了。感谢Modernizr，我可以在浏览器支持“border-radius”的情况下给box设置一个1px的实边。第二条规则更进步了一点，我们为“#content”元素添加了一个阴影，并且针对支持“box-shadow”属性的浏览器一并移除了border属性。为什么呢？因为大部分浏览器并不为“边框附带边角”的组合外加阴影这样的效果提供一个好的表现(这是一个应该被注意的浏览器的瑕疵，但我们现在却必须忍受它)。同不使用阴影只使用边框相比，我宁可只使用阴影包围元素。采用这种方式，我可以拥有全世界最好的，准确点的，最好的一种CSS表现：在支持“box-shadow”属性的浏览器里将会呈现一个下面我们要为header应用一个自定义的特殊字体，下面的是我们目前针对h1的声明，没改动版的：1.h1{2.color:#e33a89;3.font:27px/27pxBaskerville,Palatino,"PalatinoLinotype",4."BookAntiqua",Georgia,serif;5.margin:0;6.text-shadow:#aaa5px5px5px;7.}这些声明在我们的基础网页里工作良好，27像素的文字大小也很适合我们为h1设置的那些字体的展示。但对于我要用的名叫“Beautiful”的字体来说，27像素就太小了。下面我们要添加其他的规则来使用这个自定义字体：11.@font-face{2.src:url(Beautiful-ES.ttf);3.font-family:"Beautiful";4.}5.6..fontfaceh1{7.font:42px/50pxBeautiful;8.text-shadow:none;9.}首先，我们添加“@font-face”声明，并在其中为我们的自定义字体指定路径、文件名和字体名。之后我们用一条CSS语句为我们的h1选择字体样式。你会看到，我这里选择了一个很大的字号，那是因为“Beautiful”字体本身就比其他字体的文字要小很多，所以我们必须要指示浏览器在展示我们自定义字体的时候，给予h1一个很大的字号。写体文字在文字阴影方面存在一些渲染问题，所以我们要在浏览器决定使用自定义文字时取消文字的阴影。另外，关于检测特征部分的列表还需要被分为两栏。为了达到目的，我要使用牛叉的CSScolumns属性，这一属性会使浏览器它的顺序，而我们的列表，虽然没有数字序号，却也是按照字母顺序排列的。当然，不是所有的浏览器都支持这一属性，对于那些不支持的浏览器，我们使用浮动来达到2栏的目的——使用了浮动后列表在视觉上不会再按照有。1..csscolumnsol.features{2.-moz-column-count:2;3.-webkit-columns:2;4.-o-columns:2;5.columns:2;6.}7.8..no-csscolumnsol.features{9.float:left;10.margin:0020px;11.}12.13..no-csscolumnsol.featuresli{14.float:left;15.width:180px;16.}Modernizr器支持CSScolumns，它就会把列表完美的分为2栏，也比直接来一个长串的单栏列表强。这里您可能注意到了我为属性添加了不同的前缀(-moz-、-webkit-、-o-)，这是因为不同的浏览器厂商对该功能的实现有不同的定义，所以要实现该功能需要针对不同的浏览器加上它们对应的前缀。经过这些改变，我们新的页面看起来更好了。面添加进更多的渐进式增强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效，如CSS变换、动画和三维转换等。并且我想在最后一个阶段的页面中应用一些这类特效。再一次的，这些属性会被添加进我们既有的CSS中并在不支持它们的浏览器中给忽视。所以，针对这种一方面是渐进增强一方面是不被支持的情况，使用Modernizr是恰当的。首先设置的：1.@-webkit-keyframesspin{2.2.0%{-webkit-transform:rotateY(0);}3.100%{-webkit-transform:rotateY(360deg);}4.}5.6..csstransforms3d.cssanimationssection{7.-webkit-perspective:1000;8.}@keyframes规则是新的CSSanimations规范中的一部分，目前只有WebKit支持。它容许你针对任何属性声明一个完整的动画路径，并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识，请阅读W3CWorkingDraftspecification。下面我们添加使得我们一个元素在三维空间里旋转的代码：1..csstransforms3d.cssanimationssectionh2{2.background-image:url(modernizr-logo.png);3.overflow:hidden;4.-webkit-animation:spin2slin

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论