zoukankan      html  css  js  c++  java
  • [CSS3 + HTML5] Modernizr

    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>
  • 相关阅读:
    HDU 5569 matrix
    HDU 2795 Billboard
    HDU 1394 Minimum Inversion Number
    HDU 1754 I Hate It
    HDU 1166 敌兵布阵
    FOJ 2206 函数求解
    hihoCoder 1252 Kejin Game
    hihoCoder 1257 Snake Carpet(很简单的构造方法)
    2015 ACM / ICPC 亚洲区域赛总结(长春站&北京站)
    HDU 2485 Destroying the bus stations
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5062359.html
Copyright © 2011-2022 走看看