基于Modernizr 让网站进行优雅降级的分析

2016-02-19 11:22 6 1 收藏

有了下面这个基于Modernizr 让网站进行优雅降级的分析教程,不懂基于Modernizr 让网站进行优雅降级的分析的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

  如今一个网页展现的内容是越来越丰富,其中不乏一些HTML5、CSS3的功能特效。那么如果客户端的浏览器支持HTML5。页面访问效果很好没有问题。如果不支持HTML5,还是IE6,7,8等浏览器的时候呢?这个时候往往是作为一个前段人员非常头痛的事情了,兼容。

  此时的兼容。无非是让用户能够尽可能的在所有的浏览器的里面看上去,使用上都是一致的。但是页面使用了HTML5标签,使用了CSS3样式。客户端浏览器不支持HTML5,怎么办呢?对于这样的问题,我们只能做到,能支持多少给支持多少。不能支持得给个友好提示和建议。让用户升级到更高版本的浏览器。所以在制作的编码过程中我们要进行一些功能性的检测.假设我们要做一个圆角效果。使用CSS3,HTML5 非常方便。

style
            article  
            {
                background: lightblue;
                margin: 20px;
                padding: 5px;                
                width: 350px;
                border-radius: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
            }
            article h1 { font-size: 12px; }
        /style
article
            headerh1我的标题/h1/header
            p这个地方是内容/p
        /article

 出现的效果也我们预期的是一样的

如果客户端浏览器不支持HTML5? 我们来用IE的F12工具测试一下

注意:浏览器模式和文档模式都必须进行选择

在不支持HTML5的浏览器中页面效果是非常残酷的

对于这样的问题是我们必须进行修复的。所以没有办法,针对于不支持HTMl5的浏览器要多做一些工作。怎么解决这样一个圆角效果的兼容呢?肯定是对不支持HTMl5的浏览器做判断。如果不支持HTML5圆角我们用第三方的圆角js来做。问题又来了?如何进行这样一个圆角功能做判断呢?这个时候又迟疑了。有没有一个针对HTML5比较高效全面简洁的功能判断js呢?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

http://modernizr.com/ Modernizr 一个HTML5功能检测插件。

  还是上方圆角特效,稍作修改

 注意:pie.js 为第三方的圆角插件

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)script type="text/javascript" src="Scripts/modernizr-2.0.6.min.js"/script
        style
            article  
            {
                background: lightblue;
                margin: 20px;
                padding: 5px;                
                width: 350px;
                border-radius: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
            }
            article h1 { font-size: 12px; }
        /style
        article
            headerh1我的标题/h1/header
            p我的内容/p
        /article
    script
        Modernizr.load([{
            load: 'Scripts/jquery-1.6.1.min.js',
            complete: function () {
                if (!window.jQuery) {
                    Modernizr.load('Scripts/jquery-1.6.1.min.js');
                }
            }
        },
        {
            test: Modernizr.borderradius || Modernizr.boxshadow,
            nope: 'Scripts/PIE.js',
            callback: function () {
                $('article').each(function () {
                    PIE.attach(this);
                });
            }
        }]);
    /script

来看效果:支持HTML5的浏览器

接下来看不支持HTML5的浏览器 IE7 做测试

所以通过使用Modernizr做HTMl5页面的功能检测是非常方便。但是还是会存在一个问题? 如果是做了一个丰富的画布特效,如何做到兼容呢?此时还是回到开始的那句话,功能降级,能支持多少支持多少,不能支持的给与友好提示。还是期待国内用户快些升级上支持HTML5的浏览器,这样开发人员就不会这么痛苦了。

来源:http://www.tulaoshi.com/n/20160219/1597232.html

延伸阅读
标签: Web开发
我们知道当存在大量数据需要处理分析的话,最好是把这些数据放到数据库中,所以几乎所有大型的商业应用系统都是和数据库相关联的,所以如果XML需要在商业领域大展宏图的话,也必须要和数据库相联系。所以这里首先需要讨论的一点问题是,XML本身是不是数据库,从严格的意义上来说,XML仅仅意味着XML文档。因为尽管一个XML文档包含数据,但是...
标签: Web开发
随着Web技术的发展和电子商务时代的到来,人们不再满足于建立各种静态地发布信息的网站,更多的时候需要能与用户进行交互,并能提供后台数据库的管理和控制等服务的动态网站。 动态网站开发技术 早期的动态网站开发技术使用的是CGI-BIN接口。开发人员编写与接口相关的单独的程序和基于Web的应用程序,后者通过Web服务器来调用前者。...
1:iostate rdstate ( ) const; 返回的是iostate,简单的说也就是一个int数值.用2进制数据的某一个位置设置为1表示一种状态 2:failbit 的定义如下,二进制数据的第二位为1的时候说明是该数据。 static const _Iostate goodbit = (_Iostate)0x0; static const _Iostate eofbit = (_Iostate)0x1; static const _Iostate failbit = (_Iostate)0x...
标签: autocad教程
关键字: AutoCAD 2009 Photoshop手绘 AutoCAD对象 中望CAD AutoCAD三维造型高耸结构是一种高度和横向尺寸之比较大的建筑物,横向载荷起主导作用。因为高宽之比较大,结构抗弯强度相对较柔,在横向载荷作用下,容易产生较大的振动和变形。本文主要结合工厂设计方案中的高耸烟囱进行设计和计算。 下面在绘制烟囱不同位置的节点的时间...
MoreSleep Rook Banger’s MOOD Bay Street Biergarten Brand Aid Archie Wilkinson Activate Media Take Off Conference Little Forge Focus Lab Future of Web Design 2014 Craftsman Ave Matthew D. Williams Curt’s Special Recipe Brand Village Do a blac...

经验教程

751

收藏

81
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部