浏览器css加载失败

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兼容的浏览器会检查必需字段是否填写这很好,但是它会给你留下一个问题:旧版本的浏览器该怎么办一个解决方法是忽略它们,并留给服务器侧的验证功能进行最终的检查.
如果浏览器无法识别required属性,那么另外一个处理这种情况的用户界面更为友好的方法是创建一个小小的脚本对必需字段进行检查.
如下的指令显示了在Modernizr帮助下如何进行相应的操作.
1.
在范例文件夹中复制required_start.
html并保存为required.
html.
2.
在结束的标签前用块按照如下所示将modernizr.
js粘贴到页面中:3.
紧接在Modernizr库与页面连接的标签之后,创建一个单独的块,并且在页面一加载完就创建一个事件处理程序以便于执行代码:window.
onload=function(){//codetoexecutewhenpageloads};0){alert('Thefollowingfieldsarerequired:'+required.
join(preventtheformfrombeingsubmittedreturnfalse;新代码产生了一个函数,当提交表单时它能够遍历所有的输入元素,以便于找到具有required属性的字段.
当它找到某个字段时,它会从值中除去开头和结尾的空白,并且如果结果是一个空的字符串,那么它会把结果添加到required数组中.
在所有的字段都已经得到检查后,如果数组中包含某些元素,那么浏览器会显示一个与缺失字段名称有关的警告,并阻止提交表单.
6.
保存required.
html并加载到某个浏览器中,例如尚不支持HTML5表单的IE6-9.
注意一下光标是如何自动地填入第一个字段的.
7.
单击提交按钮而无需填写任何其它字段.
你应该能看到一个警告提示你名称和邮箱字段需要填写(参见图7).
图7.
脚本检测到不支持新属性的浏览器中的必需字段8.
只填写其中一个必需字段,再进行一次页面测试.
当你单击OK关闭警告时,你填写的字段仍然有它的内容,这表明表单尚未提交.
9.
同时填写两个必需表单,并单击submit按钮.
这一次,所有表单字段被清空,并且你应该能够看到隶属于URL的数据作为查询字符串出现在浏览器的地址栏.
这就证实了表单数据已被提交.
10.
在HTML5兼容的浏览器中,例如最新版本的Firefox、Chrome或者Opera,对这个页面进行测试.
浏览器显示了它自己的类似于图6所示的错误信息,而不是显示警告信息.
注意:Safari5.
1错误地报告了它支持required属性,所以它在没有验证必需字段的情况下就提交了表单.
这是Safari的缺陷,然而在Modernizr里它是不存在的.
创建版本当你准备好对你的网站进行部署时,推荐创建一个Modernizr的自定义production版本,它只包含那些你实际需要的元素.
这可以按照你所选的功能将Modernizr库的大小从44KB缩小到2KB.
当前选项的范围如图8所示.
图8.
Modernizr下载页面允许你仅选择那些你需要的功能选项可以便捷地按照如下类别进行分组:CSS3、HTML5、Misc(ellaneous)和Extra.
单击前三个标题旁边的Toggle按钮可任意地选择或者放弃选择分类中的所有复选框.
在默认情形下,Extra分类将会选中如下三个条目:HTML5Shim/IEPP:它添加了两个脚本—HTML5shim和IEPrintProtector—它们迫使IE6-8正确地设计并打印HTML5元素.
如果你打算使用新的HTML5语义标签,例如、、、、等等时,那么你才需要这个选项.
Modernizr.
load(yepnope.
js):它添加了一个不包含在development版本中的可选择的脚本加载器.
它增加了3KB的下载量,所以如果你不需要它,你可以放弃选择它.
稍后我将描述如何使用该加载器.
AddCSSClasses:它将Modernizr类添加到开始的标签.
如果你想检测对CSS3功能支持,那么你必须选择这个选项.
如果你在CSS3分类中选中任何选项,那么如下Extra分类中的选项也会被选中:Modernizr.
testProp()Modernizr.
testAllProps()Modernizr.
_domPrefixes()不要取消选择这些选项.
这样做将会自动地取消你在CSS3分类中已经选择的任何选项.
Extra分类中的MQPolyfill(respond.
js)添加了一个脚本,它可以使IE6-8中的mediaqueries获得有限的支持.
当你选中这个选项时,它会自动地选中MediaQueries和Modernizr.
testStyles().
如需知道更多关于mediaqueriespolyfill(respond.
js)的信息,请访问https://github.
com/scottjehl/Respond.
只有高级用户才会对Extra分类中的其它选项感兴趣.
关于它们是什么和如何使用它们的更多细节,参见Modernizr文档的扩展性部分(ExtensibilitysectionoftheModernizrdocumentation).
下载Modernizr自定义版本下面的说明描述了如何为范例文件创建一个Modernizr的自定义production版本.
后续的练习需要使用这一自定义版本,它将展示如何使用Modernizr.
load()加载外部JavaScript文件.
1.
单击http://www.
modernizr.
com/download/.
这将会打开如图8所示的界面.
2.
在CSS3分类中,选中box-shadow和CSScolumns.
3.
在HTML5分类中,选中InputAttributes.
4.
在Extra分类中,取消选择HTML5Shim/IEPP.
5.
确保Extra分类中如下的选项被选中(它们应该已经自动地被选中).
Modernizr.
load(yepnope.
js)AddCSSClassesModernizr.
testProp()Modernizr.
testAllProps()Modernizr.
_domPrefixes6.
单击Generate按钮.
7.
当自定义脚本准备好(一般在一到两秒内)时,在Generate按钮旁边会出现一个Download按钮.
单击Download按钮并在范例网站的js文件夹中保存该文件.
下载页面会给production脚本提供一个文件名,例如modernizr.
custom.
79475.
js,但是你或许会希望给它一个更加有意义的名称.
在范例文件中,我使用的名称是modernizr.
adc.
js.
8.
用自定义production脚本的链接替换modernizr.
jsincss_support.
html和required.
html的链接.
注意production脚本只有5KB,而不是development版本的44KB.
9.
单击css_support.
html中的LiveCode(或者使用你的浏览器中的development工具).
现在,如图9所示,开始的标签只有三个类.
图9.
现在标签中的类只涉及必要的CSS3功能使用Modernizr加载外部脚本当创建Modernizr的自定义production版本时,在默认情形下,必须选中包含Modernizr.
load()的选项.
Modernizr.
load()是yepnope()的别名,它是与Modernizr同步开发的独立脚本加载器.
为了说明如何使用它,我给出一个简单范例.
我已经将相应的脚本从required.
html移到了check_required.
js,并且做了三个微小的改动以便于去除Modernizr测试以及将它赋值到一个名为init的变量中.
修订的脚本如下所示:varinit=function(){//gettheformanditsinputelementsvarform=document.
forms[0],inputs=form.
elements;//putthefocusinthefirstinputfieldinputs[0].
focus();//checkrequiredfieldswhentheformissubmittedform.
onsubmit=function(){varrequired=[],att,val;//loopthroughinputelementslookingforrequiredfor(vari=0;i0){alert('Thefollowingfieldsarerequired:'+required.
join(preventtheformfrombeingsubmittedreturnfalse;Modernizr.
load()的一个很大的优点是,根据测试浏览器能力的结果,它可以有条件地加载脚本—这就是为什么起初叫它yepnope()的原因.
它可以异步地加载外部脚本—换句话说,就是能够在浏览器已加载DocumentObjectModel(DOM)之后加载外部脚本—因此它可以有助于提升你的网站性能.
Modernizr.
load()的基本语法是将一个具有如下属性的对象传递给它:test:你希望检测的Modernizr属性.
yep:如果测试成功,你希望加载的脚本的位置.
使用一个多脚本数组.
nope:如果测试失败,你希望加载的脚本的位置.
使用一个多脚本数组.
complete:外部脚本一经加载就运行的函数(可选).
yep和nope两者都是可选的,只要你提供了其中一个即可.
为了在check_required.
js中加载和执行脚本,需要在modernizr.
adc.
js已附着到页面之后添加如下块(代码位于required_load.
html中):Modernizr.
load({test:Modernizr.
input.
required,nope:'js/check_required.
js',complete:function(){init(script>这样就与之前运行的完全一致,但是却可以降低已支持required属性的浏览器的下载负荷.
为了测试多种条件,你可以给Modernizr.
load()传递一组对象.
如需获得更多细节信息,参见Modernizr文档上的Modernizr.
load()教程.
一句忠告Modernizr是一个强大而有用的工具,但是这并不意味着你就应该使用它.
并不是在所有情形下均必须使用Modernizr给浏览器提供多种样式.
如果你主要关注的对象是InternetExplorer,那么考虑使用IEconditionalcomments.
你也可以使用CSS层叠覆盖一些样式.
例如,先使用hexadecimalcolor,然后使用rgba()或hsla()覆盖它.
旧版本的浏览器会使用第一个值并且忽略第二个值.
Modernizr真正地变成现实是当它与polyfills和其它JavaScript相结合的时候.
但是记住,通常很容易创建属于你自己的适合支持功能的测试.
例如,下面就是你测试某个浏览器是否支持required属性的全部代码(代码位于required_nomodernizr.
html中):varelem=document.
createElement('input');if(typeofelem.
required!
='boolean'){//requiredisnotsupported}下一步阅读方向本教程已经涵盖了Modernizr的所有主要功能如需了解关于这些功能的更多信息,请查阅相应的官方文档,其网站地址为http://www.
modernizr.
com/docs/.
此外,你还可以找到下列有用资源:yepnopejs.
com提供关于yepnope()的深入讨论,它已经在Modernizr中被合并为Modernizr.
load().
充分利用HTML5和CSS3的Modernizr功能(TakingAdvantageofHTML5andCSS3withModernizr),作者:FarukAte(Modernizr项目负责人)尽管基于Modernizr的较早版本,但该文章包含了一个关于通过Modernizr和CSS3获取的逐步性能改善的详细范例.