저자 : Mark Pilgrim
- 들어가기 전에
HTML5를 사용하는데 예전 브라우져들이 지원하지 않으면 어떻게 하나요? 라는 의문이 생길 것이다.
그러나 질문 자체가 잘못되었다. HTML5자체가 아닌 , 개별적인 특징의 모임이다. 브라우져들이 개별적인 특징들을
지원하는 것을 발견할 수 있을것이다. (canvas, video, geolocation)
- 기술들의 발견
브라우져가 객체들의 모임인 웹페이지를 렌더링할때는(DOM을 생성한다.) HTML태그로 표현한다.
모든 태그(<p>,<div>,<span>)는 다양한 객체들에 의해 DOM을 표현한다. (전역객체(window, document)들은 특수하게
일반객체와는 다르다.)
모든 DOM객체들은 일반적인 속성들을 공유한다. 하지만 몇몇 객체들은 더 많은 속성을 가지고 있다.
HTML5특징을 지원하는 브라우져에서, 특정한 객체들은 특별한 속성을 가지고 있다.
DOM에서 이러한 속성들을 지원하는 특징들에 대해서 얘기를 해볼려고 한다.
발견한 4개의 기술들에 대해서 브라우져별 지원내용에 대해서 알아볼려고 한다.
- Modernizr, HTML5 Library
Modernizr는 오픈소스이다. MIT-lincesed Javascript library이고 HTML5 & CSS3특징들을 지원한다.
Modernizr를 사용하기 위해서는 다음과 같은 <script>태그를 페이지 상단에 적용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr는 자동으로 실행되며, modernizr_init()같은 함수를 사용하여 구동시킬 필요가 없다.
이 라이브러리를 실행할때 Modernizr에 의해 호출된 전역객체들이 생성된다. 전역객체는 각각의 특징에 Boolean
속성들을 포함하고 있다.
예를 들어 사용하고 있는 브라우져가 canvas API(http://diveintohtml5.org/canvas.html)를 지원한다라면
Modernizr.canvas속성을 true값을 가지게 될 것이다.
canvas API를 지원하지 않는 브라우져라면 Modernizr.canvas속성은 false값을 가질 것이다.
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
원서 : http://diveintohtml5.org/detect.html
덧글