Modernizr is a library for detecting whether the user's browsers have certain features and based on the availability, we developers will trigger certain functions or styles. In this episode, we will take a simple slideshow and use both javascript and css3 to make the transitions based on features available with libraries such as yepnope and html5shiv. Most importantly, we will scratch the surface of what is graceful degradation and progressive enhancement.

If you use modren JS Framework like Angular, when comes to IE8, it will report error.  And I believe, IE9 below will be abandoned, moderen web technology will no longer support IE9 below.

But it will still valuable to know how to handle css / javascript fallback on old bower.

1. installing modernizr

download the entire library from modernizr or cdnjs and put a <script> tag in the <head> of index.html. Open up the browser dev console to see some classes added to the <head> tag:

<html lang="en" style="" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>

2. feature detection

if a css property is not available:

.box{

  box-shadow: 0 0 10px 1px #666;

}

.no-boxshadow .box{

  border: 3px solid grey;

}

if a css property is available:

.box{

  border: 3px solid grey;

}

.boxshadow .box{

  box-shadow: 0 0 10px 1px #666;

}

  1. html5 tags:

    • include the option for html5shiv when generating the modernizr
    • now semantic html5 tags are easily seen in older browser as well
    • if the entire html5shiv library is not needed, then create the html5 element indivudally and put the javascript in the <head>tags

  2. javascript fallback:

<script>

    yepnope({

        test : Modernizr.cssanimations,

        yep  : 'slides.css',

        nope : 'slides.js'

    });

</script>

[CSS3 + HTML5] Modernizr的更多相关文章

  1. CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  2. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  3. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  4. 超酷 CSS3/HTML5 3D 飘带菜单实现教程

    今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...

  5. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  6. 8款强大的CSS3/HTML5动画及应用源码

    1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...

  7. CSS3/HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,不至于让用户看到一堆表单望而却步.今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外 ...

  8. CSS3&HTML5各浏览器支持情况一览表

    http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX ...

  9. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

随机推荐

  1. gephi安装好了，为何打不开？

    ref: http://www.zhihu.com/question/21268129?sort=created 这个软件我自己也没有弄过,不过我同学要不会装,所以我测试地帮她装,得益于这个哥们的发的 ...

  2. Java面试——基础

    1,作用域,Java只有public,protect,private,默认是default相当于friendly 作用域 当前类          同一package 子类            其它 ...

  3. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  4. spring 入门笔记(一)

    最近学习spring 通过笔记形式加深自己对spring的理解,也希望能跟各位入门者分享和讨论. 一.下载spring 下载spring也费了不少功夫,目前还没从spring官网找到下载入口,我从下面 ...

  5. 我牵头，你做事——C#委托实践

     我牵头,你做事——C#委托实践一 2007-09-05 23:54:54 标签:委托 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http ...

  6. Nginx源码研究五：NGINX的配置信息管理

    配置信息是nginx系统重要的组成部分,配置信息的使用,实际上包含两层,一层是用户针对参数定义了值,例如下面nginx参数文件中的 keepalive_timeout 65,还有一部分是用户没有定义值 ...

  7. C语言基础学习运算符-基本算术运算符

    C语言中用于基本算术运算的运算符有:+,-,*,%,/.这些运算符的用法和你想像到的基本无异: 加法运算符 “+”使得它两侧的值被加到一起. 减法运算符“-”用它前面的数减去后面的数. 乘法由“*”表 ...

  8. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  9. Django - staticfiles，STATIC_ROOT， STATIC_URL，STATICFILES_DIRS

    staticfiles:这是一个静态资源管理的app,django.contrib.staticfiles.老的版本中,静态资源管理一直是一个问题,部分app发布的时候需要带上静态资源,在部署的时候必 ...

  10. Scut：运行测试服务器

    在大致过了一遍Scut的底层结构(其实只是对各个组件有了一个初步印象而已),现在开始尝试搭建“口袋天界”的Scut服务端. 1. 设置外部启动项 项目属性 -- 调试 -- 启动外部程序 -- 项目根 ...