[Modernizr]검색결과, 1건
728x90
HTML5 와 CSS3 에는 다양한 요소들이 새로 추가되었다
Modernizer 는 새롭게 추가된 이들 요소들을 브라우저가 지원하는지 검사해 볼 수 있는
심플한 스크립트 코드를 제공하는 오픈소스 라이브러리다
대부분의 검사 코드는 true/false 를 반환하는 Modernizr객체의 프로퍼티를 통해 수행된다
예를 들어 현재 실행중인 브라우저가 Canva를 지원하는지 여부는 다음과 같은 코드로 확인 할 수 있다
http://www.modernizr.com/ 에서 최신 버전의 라이브러리를 다운받을 수 있다(현재 버전 1.5)
다운 받은 modernizr-1.5.min.js 파일을 페이지에 스크립트로 추가하면 바로 사용가능하다
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>
<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>
<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 차트 라이브러리 소개 (14) | 2010.09.15 |
---|---|
RGraph, HTML5 그래프 라이브러리 소개 (7) | 2010.09.14 |
[JQuery] JQuery 사용 환경 설정 (15) | 2010.08.04 |
[JQTouch] 모바일 웹 UI 라이브러리 (6) | 2010.08.04 |
아놔.. JQTouch, iUI 도 있구먼.. (4) | 2010.07.13 |