Javascript & JQuery & CSS

1. HTML5의 기능 지원 유무 확인

최근에는 HTML5 API를 이용하여 웹 프로그램을 만드는 사용율이 점점 더 높아져가고 있는 것 같습니다.

그런데 HTML5를 이용하려고 할 때마다 항상 발목을 잡는 것이 있습니다. 그것은 바로 HTML5 API를 모든 브라우저에서 지원하지 않는다는 점입니다.

브라우저가 과거 버전일 경우도 문제지만 최신 버전일 경우라 하더라도 일부 API를 지원하지 않을 수 있습니다.

그 때문에 HTML5의 기능을 이용하려면 항상 조건 검사를 통해서 지원 유무를 확인해야만 합니다.

전에 작성했던 canvas 관련 글에서도 언급했던 것처럼  Canvas를 지원하는지를 알아보려면 다음과 같은 코드를 작성해야만 했습니다.


var canvas = document.getElementById("canvas");
if(canvas.getContext == undefined)
alert("Canvas를 지원하지 않습니다.");

이런 고민은 모든 웹 개발자들에게 동일한 고민거리가 아닐 수 없습니다.


만약에 이렇게 브라우저가 HTML5 API를 지원하는지를 쉽게 확인하고자 한다면 그런 부분에 도움을 줄 수 있는 오픈소스

라이브러리 Modernizr를 사용할 수 있습니다. 이 라이브러리는 http://modernizr.com/ 에서 제공는 라이브러리입니다.


2. Modernizr 라이브러리란?

라이브러리는 HTML5와 CSS3의 기능을 활용할 수 있는지를 알아보는 다양한 기능들을 제공하고 있습니다.

하지만 실제로 modernizr는 단순히 유무만 확인하는 기능을 넘어서서 과거 버전의 브라우저에 HTML5를 사용할 수 있도록

하는 polyfills 기능도 제공합니다. 그러한 기능에 대해서는 다음 블로그를 통해서 하나씩 알아보도록 하겠습니다.

(여기서 polyfills란 과거버전의 브라우저에 새로운 브라우저가 가지는 기능을 지원하기 위한 플러그인을 의미하는 용어입니다.)

3. Modernizr 라이브러리를 이용하는 초간단 한 예제

다운받은 라이브러리가 스크립트를 작성하는 문서와 동일한 폴더에 있다고 가정하면 다음과 같이 라이브러리를 문서에 포함시킵니다.


<script src="modernizr.js"> </script>

위와 같이 modernizr 라이브러리를 포함시켰다면 canvas 를 지원하는지를 알아보기 위한 조건문은 다음처럼 간단해 집니다.


if(!Modernizr.canvas)
alert("Canvas를 지원하지 않습니다.");

정말 간단하게 구현할 수 있음을 알 수 있습니다. 하지만 단순이 이런 정도라면 굳이 이 라이브러리를 사용할 필요성이 강렬하게

다가오지는 않을 것 같습니다. 앞에서도 잠깐 언급했던 것처럼 이렇게 지원 유무를 알려주는 것 외에도 Modernizr는 더 많은 기능들도 제공하고 있습니다.


4. HTML5, CSS3 새요소 지원여부 검사
 

		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";