[CSS3 + HTML5] Modernizr
2015-12-21 01:38
483 查看
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
if a css property is available:
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
javascript fallback:
for a javascript fallback, use yepnope.js - ensure it is part of the generated modernizr as well. Put the scripts in the
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; }
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
javascript fallback:
for a javascript fallback, use yepnope.js - ensure it is part of the generated modernizr as well. Put the scripts in the
<head>tag.
<script> yepnope({ test : Modernizr.cssanimations, yep : 'slides.css', nope : 'slides.js' }); </script>
相关文章推荐
- Html5的一些引擎使用感触
- HTML4与HTML5之间的10个本质区别
- html5 Web Storage(localStorage(),sessionStorage())
- 使用Html5异步上传文件,支持跨域,带有上传进度条
- HTML5 地理定位 原理
- HTML5地理定位用法
- html5地理位置定位API接口开发
- HTML5离线应用无法更新的定位与解决
- html5实际和离线应用分析
- 8款超酷的HTML5 3D图片动画源码
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- html5 audio音频播放全解析
- html5声频audio和视频video说明
- html5声频audio和视频video
- HTML5 文件拖放API讲解
- HTML5拖放API2
- HTML5 File API初探支持文件拖放上传功能
- HTML5拖放API
- 使用HTML5进行地理位置定位。误差在+-500m
- HTML5之地理位置