ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Modernizr
      IT Information/최신 기술 동향 2013. 10. 21. 22:49
      반응형

      Document : flx.kr/3T


      Modernizr

      Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.


      1. Why use Modernizr?

      Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

      -> 요약 :  modernizr는 뒤쳐지는 브라우저에서 javascript , html, css등의 특정기술(canvas, localStorage 등) 이 이용가능한지 아닌지를 알려주는 자바스크립트입니다. 


      아마 지금도 새 웹 사이트를 만들때에 IE8 이하를 무시하지는 못할 것이다. 열정적이지만 다소 다혈질인 웹 디자이너는 성질이 뻗친다. 빨리 HTML5로 내 창조성을 발휘하고 싶은데! 그러나 아직 HTML5만으로 범용 사이트를 만들기는 문제가 있다.

      그렇다면 어떤 타협책을 찾아볼수는 있다. HTML5 지원 브라우저에서는 풍부한 효과를 입힌 재밌는 웹 사이트를 표시하고 하위 브라우저에서는 평범한(그러나 깔끔한) 종 스크롤의 표시 형식을 취할 수도 있다. 그러려면 무엇이 필요한가? 아마도 클라이언트의 환경을 체크해서 그에 맞게 처리를 나눠줘야 할 것이다.

      그러나 단순히 브라우저 버전만으로 확인하는 것은 문제가 된다. IE6, IE7만이 문제가 된다면 버전 확인으로도 괜찮겠지만 HTML5 스펙은 아직도 계속 개발 진행중이며 최신 브라우저도 그 내용을 100퍼센트 구현하고 있지는 않기 때문이다.

      즉 자신이 어떤 기능을 사용하고 싶다면 그 기능을 지원하는지를 체크하는게 좋은 방법이다. 그러나 이 체크 코드를 일일히 작성하는 것도 일이 크다.

      그래서 모더나이저를 사용한다.


      2. 'HTML5-Cross-Browser-Polyfills'

       -  HTML5에서 추가되는 기능에 대해서 하위 브라우저에서도 사용할 수 있도록 지원해주는 라이브러리를 정리해 놓은 사이트다. Modernizr의 wiki인 'HTML5-Cross-Browser-Polyfills'에서 대안 리스트를 확인 할 수 있다.

      EX)  예로 HTML5를 지원하는 브라우저에서는 localStorage를 사용할 수 있는데 IE7에서 대체할 수 있도록 지원되는 라이브러리 리스트를 아래와 같이 알려 주고 있다.

      =>https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills


       3. 소스 예시

      기능의 지원 여부를 파악하는 라이브러리들이 개발되어 있으므로, 적절한 라이브러리를 사용하면 됨

      Modernizr(www.modernizr.com)

      Feature Detection

      if (Modernizr.localstorage) {

           // using local storage

      } else {

          // need alternative code

      } 


       * CSS Class

      html요소에 특정 기능의 지원 여부를 의미하는 CSS 클래스가 추가됨

      기능 지원 여부에 따라 적절한 스타일을 손쉽게 적용할 수 있다.

      사용방법 (rgba())

       /* can use */

      .rgba .some-element {

           background-color: rgba(255, 255, 255, 0.5);

      }


      /* cannot use */

      .no-rgba .some-element {

           background-color: rgb(220. 220, 220);

      }


       * Script Loader

      특정 기능 지원 여부를 판단하여 스크립트를 자동으로 로딩함

      yepnope.js 라는 작은 library 를 기초로 함

      script 의 load 과정을 조율하거나 browser 의 기능 지원 여부 및 browser 의 종류와 버전 등에 따른 javascript, css 파일을 동적으로 load 하는 기능 제공.

      지원 시 yep 속성에 설정된 script 를 load / 미지원 시 nope 속성에 설정된 script load

      사용방법

      Modernizr.load([

           {

                test: Modernizr.localstorage,

                yep: 'localstorage-data.js',

                nope: 'cookiebasd-hack-data.js'

           }

      ]}; 


       * Polyfill

      브라우저의 기능상 차이로 인한 문제 해결 및 요구사항과 브라우저의 기능항의 차이를 메우기 위한 용도로 활용


       * Canvas

      Google 의 ExplorerCanvas : 2D Graphic


       4. RequireJS와 Modernizr 사용 소스 예시


       - define에서 정의

      First, remove your paths configuration that relates to modernizr, you won't need it
      Next Load Modernizr in the head - this will create a window.Modernizr variable.
      Finally, before your bootstrapping require, define the modernizr module

      define('modernizr', [], Modernizr);
      require(['foo', 'bar', 'modernizr'], function(foo, bar, modernizr) {
           //..profit
      }

      ---------------------

       - RequireJS보다 먼저 정의

      If Modernizr is the 1st script loaded in head, then it is accessible from everywhere, so you can define simple wrapper like this:

      define('modernizr', function () { return window.Modernizr });
      This code may be put inside wrappers.js like this:

      <head>
      <script src="/js/vendor/modernizr.js"></script>   
      <script src="/js/vendor/require.js"></script>  
      <script src="/js/wrappers.js"></script>  
      <script src="/js/main.js"></script>
      </head>
      Then in main.js

      var scripts = document.getElementsByTagName('script')
        , src = scripts[scripts.length - 1].src
        , baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'))

      require.config({
        baseUrl: baseUrl
      })
      -----------------------

       - RequireJS SHIM에서 정의 (http://kun.io/blog/39107142015/Sample-RequireJS-Config)

      requirejs.config({
        paths: {
          respond         : '/components/Respond/respond.min',
          modernizr       : '/components/modernizr/modernizr',
          jquery          : '/components/jquery/jquery',
          underscore      : '/components/underscore/underscore-min',
          mustache        : '/components/mustache/mustache',
          bootstrap       : '/components/bootstrap/bootstrap.min',
          'jquery.to_json': '/components/jquery-to-json/jquery.to_json',
          backbone        : '/components/backbone/backbone',
          text            : '/components/text/text'
        },
        shim: {
          modernizr: {
            exports: 'Modernizr'
          },
          underscore: {
            exports: '_'
          },
          bootstrap: {
            deps: ['jquery'],
            exports: 'jQuery'
          },
          backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
          },
          'jquery.to_json': {
            deps: ['jquery'],
            exports: 'jQuery.fn.toJSON'
          }
        }
      });
       
      // Later...
       
      define(
        function (require) {
          var $ = require('jquery');
          var Backbone = require('backbone');
       
          // code using jQuery and Backbone...
       
          return module;
        }
      );

      // modernizr
      require(['modernizr'], function(Modernizr) {
      var drawCircle = function() {...};

      if( Modernizr.canvas ) {
      drawCircle();
      }else{
      require(['excanvas'], drawCircle);
      }
      });

      5. 다운로드
      Use the Development version to develop with and learn from. Then, when you’re ready for production, use the build tool below to pick only the tests you need. (canvas 등 제공)


      http://modernizr.com/download/



      반응형

      'IT Information > 최신 기술 동향' 카테고리의 다른 글

      Apach Log 파일 분석 방법  (0) 2013.11.08
      PhantomJS, CasterJS 설치 및 사용  (0) 2013.11.01
      jQuery 플러그인 제작  (0) 2013.10.21
      콜백함수를 왜 사용하나?  (0) 2013.10.09
      WHOIS란?  (0) 2013.08.28

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바