浏览器sockscap教程

Modernizr教程-----HTML5和CSS3开发利器什么是ModernizrModernizr是一个用来检测浏览器功能支持情况的JavaScript库.
目前,通过检验浏览器对一系列测试的处理情况,Modernizr可以检测18项CSS3功能以及40多项关于HTML5的功能.
它比传统检测浏览器名称(浏览器嗅探)的方式更为可靠.
一整套测试的执行时间仅需几微秒.
此外,Modernizr网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化.
当使用Modernizr检测CSS3支持情况时,你无需具备任何JavaScript的知识.
你仅需在网页中插入文件,它随即根据浏览器的功能情况在页面的标签上添加一组类.
相应类的名称已经符合标准化的要求并浅显易懂.
例如,如果浏览器支持box-shadow属性,则需要添加相应的boxshadow类;否则,添加一个no-boxshadow类即可.
你所要做的一切只不过是创建一个使用这些类的式样表,以便为相应浏览器提供合适的式样.
Modernizr可轻松实现JavaScript解决方案,即人们熟知的polyfills——它模拟HTML5相关功能和技术,如地理定位.
然而,你的确需要对JavaScript有基本了解以便使用这些功能和技术.
术语polyfill来源于一种填补裂缝的黏土的英国品牌Polyfilla(即美国人熟知的填泥料).
这里,polyfill用来填补浏览器功能上的漏洞.
有时,Modernizr可无缝地执行这项任务.
但本质上,这只是一种修补工作,所以,不能依赖它产生无漏洞浏览器所实现的完全相同结果.
下载Modernizr与其它JavaScript库相同的是,Modernizr可提供development和production版本.
与大多数库相比,唯一的不同之处是,空格和注释已经从production版本中删除了,这样可以减少下载量的大小.
Modernizr采取了不同的方法.
development版本在某种意义上可称为是"厨房中的水槽"—它几乎包含了一切.
production版本只包含了你选择的那些元素,这样能够显著降低下载量.
在很多情况下,production版本可以缩小为development版本大小的二十分之一.
当使用Modernizr进行测试时,我建议你下载development版本.
一旦你掌握了它是如何运作的以及它的能力,你就可以下载一个自定义production版本以便在你的网站进行部署.
本教程的示例文件包含的是Modernizr的development2.
0.
6版本,但是我建议你从Modernizr站点上用最新更新的版本替代它.
1.
下载本文附带的示例文件(使用modernizr.
zip)并且在Dreamweaver站点内将它们解压到一个方便的位置,或者是为本教程创建一个新站点.
2.
访问Moderniz网站,其地址为http://www.
modernizr.
com/.
3.
在DownloadModernizr2部分中,单击Development按钮(参见图1).
Modernizr的development版本就会直接在你的浏览器窗口上打开.
图1.
选中development版本以便进行Modernizr测试注:如果你错误地单击了主导航菜单中的Download链接,那么你将看到大量的复选框出现,要求你去选择你想要的工具.
这是为定制的production版本所设置.
单击面板顶部的Development版本的链接,或者单击浏览器的Back按钮返回主页并选中图1所示的Development按钮.
4.
在浏览器的主菜单上,选中SavePageAs,并在示例文件的js文件夹里将它另存为modernizr.
js.
如果有必要的话可以替换已有的文件.
使用Modernizr检测CSS功能如前所述,Modernizr并没有尝试在旧版本的浏览器中添加新的功能,但是它允许你按照你的风格去弥补那些缺失的功能.
为了展示这是如何运作的,示例文件中包含了一个叫做css_support_begin.
html的页面.
如果你在新式浏览器中加载这个页面,它应该看起来如图2所示.
图2.
Firefox5以多栏的格式显示了页面并且在图像中添加阴影该页面的风格是使用了CSS3的column-count和box-shadow属性,以便以多栏的格式显示文本并在图像中添加阴影.
旧版本的浏览器不支持这些属性中任何一项,因此在InternetExplorer(IE)7中同一页面看起来如图3所示.
图3.
IE7忽略了column-count和box-shadow属性在IE9中,同一页面显示了图像阴影,但是文本和图3中所示的布局是一样的.
你在尝试弥补缺失的功能上采取什么方式取决于你的设计大纲的要求.
要尝试使页面在所有的浏览器中看起来完全一样将要涉及大量工作,但是你可以做一些简单的改进,比如在图像周围环绕文字,调整图像与文本的左边距,以及在图像底部和右边缘添加隐约的边界,以便使它更具三维立体的感觉.

检测对CSS3功能的支持Modernizr使用JavaScript检测浏览器所支持的功能,但是,它并不是使用JavaScript动态地加载不同的样式表,而是使用非常简单的技术将类添加到页面的标签.
然后作为设计者由你决定使用CSS层叠为目标元素提供合适的样式.
例如,如果页面支持box-shadow属性,那么Modernizr会添加boxshadow类.
如果不支持,那么它用no-boxshadow类作为替代进行添加.
由于浏览器忽略它们无法识别的CSS属性,因此你可以放心地按照你的基本样式规则使用box-shadow属性,然而需要按照下面的格式为旧版本的浏览器添加单独的descendantselector:.
no-boxshadowimg{/*stylesforbrowsersthatdon'tsupportbox-shadow*/}只有不支持box-shadow的浏览器才会有no-boxshadow类,因此其它的浏览器不会应用这个样式规则.
让我们将Modernizr添加到示例页面并检查它添加到标签中的类.
1.
复制css_support_begin.
html并将它另存为css_support.
html.
2.
打开你刚创建的复制文件,并切换到Code视图或者Split视图.
3.
HTMLmarkup的前两行应该如下所示:4.
将class="no-js"添加到标签中,如下所示:Modernizr依赖于在浏览器中启用的JavaScrip.
当它启用时,这种类会被动态地删除.
但是,在极少数情况下,当JavaScrip没有启用时,它依然存在于HTMLmakup中,如果必要,它允许你为这样的访问者创建特殊的样式规则.
5.
css_support.
html中的样式是嵌入在块中.
Modernizr库需要被添加到样式加载之后的页面的部分.
在结束的和标签之间添加一条新的线,并且使用标签附加上moderizr.
js.
最简单的方式是键入你自己的代码,但是你也可以在Insert面板中使用Script按钮或者选中Insert–HTML–ScriptObjects–Script.
的最后三行应该如下所示:注:如果你使用Insert面板或者Insert菜单,则Dreamweaver会添加type="text/javascript"到开始的标签中.
这在HTML5中不再要求,但是留着它并不会造成危害.
6.
保存support_css.
html并在Document工具栏中单击LiveCode按钮.
目前标签已经加入了超过40个类的名称,这些名称能够表明WebKit浏览器引擎中Dreamweaver的内置版本的功能(参见图4).
图4.
Modernizr添加了大量的表明浏览器功能的类注:如果你的Dreamweaver版本没有LiveCode(或者你正使用不同的HTML编辑器),那么你可以使用大多数新式浏览器提供的开发工具或者Firefox浏览器提供的Firebug检查生成的代码.
如图4所示,no-js类已经被js类替代,这表明JavaScript已经启用.
表1列举了Modernizr使用的类名称以表明对CSS3的支持.
如果某个功能不支持,那么相应类的名称用no-作前缀.
表1.
Modernizr检测的CSS3功能CSS功能Modernizr类(属性)@font-facefontface::beforeand::afterpseudo-elementsgeneratedcontentbackground-sizebackgroundsizeborder-imageborderimageborder-radiusborderradiusbox-shadowboxshadowCSSanimationscssanimationsCSS2DtransformationscsstransformsCSS3Dtransformationscsstransforms3dCSStransitionscsstransitionsflexibleboxlayoutflexboxgradientscssgradientshsla()hslamulti-columnlayoutcsscolumnsmultiplebackgroundsmultiplebgsopacityopacityreflectioncssreflectionsrgba()rgbatext-shadowtextshadow无论在哪对特定的CSS属性进行测试,类的名称和属性名称都是一样的,然而这要求去除任何连字号或是括号.
其它类是按照它们参考的CSS3模块而命名.
创建旧版本浏览器样式规则参见表1,你可以看到Modernizr使用boxshadow和csscolumns分别表明了对box-shadow属性和多栏布局的支持.
因此,你可以使用no-boxshadow和no-csscolumns类为不支持这些功能的浏览器创建特殊的样式规则.
为了保证指令简单,我将演示只有CSS声明的范例.
你可以直接地将它们键入到Code视图中或者使用NewCSSRule对话框.
1.
为.
no-boxshadowimg创建一个新的descendant(compound)selector.
2.
设置2像素灰色实心的右边界和底边(我选择#8A8A8A).
由此产生的样式规则应该如下所示:.
no-boxshadowimg{border-right:#8A8A8A2pxsolid;border-bottom:#8A8A8A2pxsolid;}这不像半透明的阴影那样有吸引力,但是尽管如此,它仍然使得图像能够从背景中略微地突起.

3.
在不支持多栏布局的浏览器中,你需要浮动图像并且调整它的页边距.
为.
no-csscolumnsimg创建一个新的descendantselector.
4.
设置图像向左浮动,并且将顶部和底部页边距设置为3px,右边距为8px,以及左边距为0.
样式声明如下所示:.
no-csscolumnsimg{margin:3px8px3px0;float:left;}5.
确保这个样式规则是遵循.
columnsimg规则.
两个规则有着相同的特殊性,因此,如果它们顺序颠倒,则.
columnsimg的10像素的左边距可能会覆盖你刚刚创建的新规则.
你可以将.
no-csscolumnsimg重命名为.
no-csscolumns.
columnsimg以便于给它更高的特殊性,但是最好是保证selector越简单越好.
(顺便说一下,如果你不确定什么是特殊性,查阅AdrianSenior的文章,UnderstandingSpecificity.
它虽然发表时间很长,但是很有价值.
)6.
保存css_support.
html,并在新式浏览器中对它进行测试.
它应该和以前看起来完全一模一样.

7.
你应该在你的本地系统上或通过链接到BrowserLab,在旧版本的浏览器上对这个页面进行测试.
虽然没有阴影或者栏目,但是现在页面的式样是可接受的,如图5所示.
图5.
旧版本浏览器使用的是可选的样式,例如IE6.
在这个的简单范例中,我只用了前缀为no-的类就为旧版本的浏览器创建了特殊的样式.
但是,按照它们的能力,你不同时使用这两个类(带或不带前缀)为浏览器创建不同的样式是绝对没有道理的.

例如:.
csscolumns{/*rulesforbrowsersthatsupportmulti-columnlayout*/}.
no-csscolumns{/*rulesforbrowsersthatdon'tsupportmulti-columnlayout*/}有时这种方法是合理的,例如,如果你想为每一级支持都创建一个完全不同的布局.

但是如果它仅仅是一个为旧版本浏览器提供可选择的样式的问题,不要忘记,浏览器会忽略它们无法识别的属性.

如果你对所有的样式都使用Modernizr类,那么在JavaScript禁用的浏览器中你的页面将完全非样式化.
使用Modernizr检测HTML5的支持功能Modernizr为开始的标签添加的类名称起着双重目的作用.
当页面加载时,它们也是Modernizr对象创建的JavaScript属性的名称.
表1列举了与CSS有关的类和属性的名称.
表2列举了剩下的与HTML5和相关技术有关的类和属性,例如地理位置.
表2.
Modernizr检测的与HTML5有关的功能HTML5有关功能Modernizr类(属性)ApplicationcacheapplicationcacheAudioaudio.
type(ogg,mp3,wav,m4a)CanvascanvasCanvastextcanvastextDraganddropdraganddropForminputattributesinput.
attributeNameForminputelementsinputtypes.
elementNameGeolocationgeolocationhashchangeeventhashchangeHistorymanagementhistoryIndexedDBindexeddbInlineSVGinlinesvgLocalstoragelocalstorageMessagingpostmessageSessionstoragesessionstorageSMILsmilSVGsvgSVGclippathssvgclippathsToucheventstouchVideovideo.
type(ogg,webm,h264)WebGLwebglWebsocketswebsocketsWebSQLdatabasewebsqldatabaseWebworkerswebworkers在大多数情况下,表1和表2列举的所有属性返回的都是true或者false.
所以,你可以按照如下所示使用JavaScript对本地存储进行测试:if(Modernizr.
localstorage){//scripttoruniflocalstorageissupported}else{//scripttoruniflocalstorageisnotsupported}然而,就audio和video而言,返回值是一个字符串,它表明着浏览器能够处理特定类型的置信水平.

根据HTML5规范,空的字符串表示该类型不支持.
如果支持该类型,那么返回值是"maybe"或是"probably".
例如:if(Modernizr.
video.
h264h264isnotsupported}使用Modernizr验证HTML5必需的表单字段HTML5添加了许多新的表单属性,例如autofocus,当页面第一次加载时它会自动地将光标放在某个指定的字段.
另一个有用的属性是required,如果某个必需的字段留有空白,那么它将阻止HTML5兼容的浏览器提交表单(参见图6).
图6.
提交表单前,HTML5兼容的浏览器会检查必需字段是否填写这很好,但是它会给你留下一个问题:旧版本的浏览器该怎么办一个解决方法是忽略它们,并留给服务器侧的验证功能进行最终的检查.