BBS > html5

html5 validation

작성자 : 이창우 (x1wins) | 등록일 : 2011-04-27 | 목록
첨부 파일이 없습니다.
첨부 이미지가 없습니다.
첨부 코드가 없습니다.
HTML5 지원 검사
HTML5를 도입 하는데 가장 큰 걸림돌 중 하나가 사용자의 브라우저 버전에 따른 HTML5 요소 지원 여부이다.
HTML5는 하나의 큰 어떤 것이 아니라 개개 요소 들의 집합이다. 따라서 "HTML5가 지원 된다 안된다"를 논하는 것은 의미상 맞지 않다. 사용자 브라우저의 HTML5의 지원여부 탐색은 "HTML5 개개 요소(Canvas, Video, Geolocation)들을 지원 하는가? 하지 않는가?"로 출발 하여야 한다.

브라우저가 특정 요소를 지원 하는 지 여부를 검사 하는 기본적인 4가지 방법은 다음과 같다.
1. 전역 개체의 특정 속성이 지원 되는 지 확인 한다.
2. 개체를 생성 하고 그 개체에 속성이 존재 하는 지 확인 한다.
3. 개체를 생성하고 그 개체에 특정 메소드가 존재 하는 지 확인 한 후 메소드를 호출 하여 값이 반환 되는 지를 확인 한다.
4. 개체를 생성 하고 속성에 특정 값을 할당 한 후 그 값이 속성에 유지 되는지 확인 한다.

Example)

//1.전역 개체의 특정 속성이 지원 되는 지 확인 한다.
function supports_geolocation()
{
return !!navigator.geolocation;
}

//2.개체를 생성 하고 그 개체에 속성이 존재 하는 지 확인 한다
function supports_canvas()
{
return !!document.createElement('canvas').getContext;
}

//3.개체를 생성하고 그 개체에 특정 메소드가 존재 하는 지 확인 한 후 메소드를 호출 하여 값이 반환 되는 지를 확인 한다.
function supports_video()
{
return !!document.createElement('video').canPlayType;
}

function supports_h264_baseline_video()
{
if (!supports_video())
{
return false;
}

var v = document.createElement("video");

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

//4.개체를 생성 하고 속성에 특정 값을 할당 한 후 그 값이 속성에 유지 되는지 확인 한다
function supports_input()
{
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";
}



위에서 살펴 본 탐지 기법 외에 Modernizer라는 오픈소스 자바스크립트 라이브러리를 사용 할 수도 있는데 Modernizer는 HTML5와 CSS3요소들의 지원 여부를 확인 하기 위하여 개발 되었다.
http://www.modernizr.com/

Modernizer 파일을 웹 문서에 참조 하면 Modernizer는 자동으로 작동 되며 “Modernizer”라 불리는 전역 개체를 생성 한다. 이 개체는 특정 HTML5개체들의 지원 여부를 확인 할 수 있는 Boolean값 속성 들을 가지고 있다.


<script src="modernizr-1.1.min.js"></script>

<script>
// Canvas 개체 지원 여부 검사
if (Modernizr.canvas) {
// 브라우저가 cavas 개체를 지원 함
} else {
// 브라우저가 cavas 개체를 지원 하지 않음
}

// Date Type Input(<input type="date">) 지원 여부 검사
if (Modernizr.inputtypes.date) {
// 브라우저가 Date Type Input 개체를 지원 함
} else {
// 브라우저가 Date Type Input 개체를 지원 하지 않음
}

</script>


위에서 작성 한 예제 코드 파일을 첨부 한다.
첨부파일:HTML5Support.zip

Reference:
DETECTING HTML5 FEATURES - http://diveintohtml5.org/detect.html
[출처] HTML5 요소 지원 여부 검사|작성자 쭌스

http://blog.naver.com/hanoul76psy?Redirect=Log&logNo=104898534
로그인 하셔야 댓글을 사용하실수 있습니다.
댓글쓰기를 누르면 로그인 페이지로 이동 후 돌아옵니다.
총 댓글 겟수 0
번호 제목 등록일 작성자 조회수
22 svg (0) 2011-04-28 이창우 2156
21 요약 (0) 2011-04-28 이창우 2107
20 html tracker (0) 2011-04-28 이창우 2088
-> html5 validation (0) 2011-04-27 이창우 2214
18 web socket (0) 2011-04-27 이창우 2370
17 html5 web socket (0) 2011-04-26 이창우 2362
16 html5 seminar (0) 2011-04-26 이창우 2284
14 html5 특징 (2) 2011-04-26 이창우 2836
13 html5 video (2) 2011-04-26 이창우 2182
< 1 >
글쓰기 검색