Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사

Posted in 모바일/Javascript // Posted at 2010. 9. 6. 18:11
728x90
HTML5 와 CSS3 에는 다양한 요소들이 새로 추가되었다

Modernizer 는 새롭게 추가된 이들 요소들을 브라우저가 지원하는지 검사해 볼 수 있는
심플한 스크립트 코드를  제공하는 오픈소스 라이브러리다

대부분의 검사 코드는 true/false 를 반환하는 Modernizr객체의 프로퍼티를 통해 수행된다

예를 들어 현재 실행중인 브라우저가 Canva를 지원하는지 여부는 다음과 같은 코드로 확인 할 수 있다
if(Modernizr.canvas) { // canvas 지원함 }

http://www.modernizr.com/ 에서 최신 버전의 라이브러리를 다운받을 수 있다(현재 버전 1.5)

다운 받은 modernizr-1.5.min.js 파일을 페이지에 스크립트로 추가하면 바로 사용가능하다
<head>
  <script src="modernizr.min.js"></script>
</head>

Modernizr 라이브러리는 HTML5 의 API 뿐만 아니라 CSS3 의 각종 새 기능과 SVG 등 새로운 웹 기술에 대한 전반적인 검사 코드를 포함하고 있다.

자세한 사용법은 다음의 URL을 참고하기 바란다 http://www.modernizr.com/docs/

Modernizr 를 이용하여 몇 가지 테스트 수행 코드를 작성해 보았다
O,X 표현을 위해 div 요소를 정의했는데 이 부분은 생략하고 스크립트 부분만 발췌한다

<script src="modernizr-1.5.min.js"></script>
<script>
  if(Modernizr.canvas) document.getElementById("canvas").innerHTML = "O"; 
  if(Modernizr.draganddrop) document.getElementById("draganddrop").innerHTML = "O"; 
  if(Modernizr.crosswindowmessaging) document.getElementById("crosswindowmessaging").innerHTML = "O"; 
 
  if(Modernizr.localstorage) document.getElementById("localstorage").innerHTML = "O";
  if(Modernizr.sessionstorage) document.getElementById("sessionstorage").innerHTML = "O";
  if(Modernizr.websqldatabase) document.getElementById("websqldatabase").innerHTML = "O";
  if(Modernizr.indexeddb) document.getElementById("indexeddb").innerHTML = "O";
  if(Modernizr.applicationcache) document.getElementById("applicationcache").innerHTML = "O";
 
  if(Modernizr.geolocation) document.getElementById("geolocation").innerHTML = "O"; 
  if(Modernizr.webworkers) document.getElementById("webworkers").innerHTML = "O";
  if(Modernizr.websockets) document.getElementById("websockets").innerHTML = "O";
 
  if(Modernizr.audio) document.getElementById("audio").innerHTML = "O";
  if(Modernizr.video) document.getElementById("video").innerHTML = "O";
 
  if(Modernizr.cssanimations) document.getElementById("cssanimations").innerHTML = "O";
  if(Modernizr.csstransforms) document.getElementById("csstransforms").innerHTML = "O";
  if(Modernizr.csstransforms3d) document.getElementById("csstransforms3d").innerHTML = "O";
  if(Modernizr.svg) document.getElementById("svg").innerHTML = "O"; 
</script>


그리고 구글 크롬에서 실행한 결과 화면은 다음과 같다


'모바일 > Javascript' 카테고리의 다른 글

jQuery Visualize, HTML5 차트 라이브러리 소개  (0) 2010.09.15
RGraph, HTML5 그래프 라이브러리 소개  (0) 2010.09.14
[JQuery] JQuery 사용 환경 설정  (0) 2010.08.04
[JQTouch] 모바일 웹 UI 라이브러리  (0) 2010.08.04
아놔.. JQTouch, iUI 도 있구먼..  (0) 2010.07.13

티스토리툴바