欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

基于Modernizr 让网站举办优雅降级的说明

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

  现在一个网页揭示的内容是越来越富厚,个中不乏一些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>
            <header><h1>我的问题</h1></header>
            <p>这个处所是内容</p>
        </article>

 呈现的结果也我们预期的是一样的

基于Modernizr 让网站举行优雅降级的声名

假如客户端赏识器不支持HTML5? 我们来用IE的F12器材测试一下

留意:赏识器模式和文档模式都必需举办选择

基于Modernizr 让网站举行优雅降级的声名

 

在不支持HTML5的赏识器中页面结果长短常残忍的

基于Modernizr 让网站举行优雅降级的声名

 

对付这样的题目是我们必需举办修复的。以是没有步伐,针对付不支持HTMl5的赏识器要多做一些事变。怎么办理这样一个圆角结果的兼容呢?必定是对不支持HTMl5的赏识器做判定。假如不支持HTML5圆角我们用第三方的圆角js来做。题目又来了?怎样举办这样一个圆角成果做判定呢?这个时辰又迟疑了。有没有一个针对HTML5较量高效全面简捷的成果判定js呢?

http://modernizr.com/ Modernizr 一个HTML5成果检测插件。

  照旧上周遭角殊效,稍作修改

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

<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>
            <header><h1>我的问题</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的赏识器

基于Modernizr 让网站举行优雅降级的声名

 

接下来看不支持HTML5的赏识器 IE7 做测试

基于Modernizr 让网站举行优雅降级的声名

 

以是通过行使Modernizr做HTMl5页面的成果检测长短常利便。可是照旧会存在一个题目? 假如是做了一个富厚的画布殊效,怎样做到兼容呢?此时照旧回到开始的那句话,成果降级,能支持几多支持几多,不能支持的给与友爱提醒。照旧等候海内用户快些进级上支持HTML5的赏识器,这样开拓职员就不会这么疾苦了。

本文地址:http://itbyc.com/web/html5/13653.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1