HTML5 기능 감지 - 수동

보통은 Modernizr를 많이 애용하는데, 외부의 라이브러리 사용이 원활치 않을때는 직접 HTML5 기능의 감지를 구현해야 할 때가 있을 겁니다. 그때를 대비해서 기록으로 남겨둡니다.

Element DOM 객체를 사용한 감지

canvas 기능 감지

canvas 엘리먼트의 context를 가져와서 부정 연산자 두번을 이용한 트릭으로 Boolean값으로 변화시켜서 return

function supports_canvas() {
    return !!document.createElement('canvas').getContext;
}

canvas 텍스트 기능 감지

canvas 엘리먼트의 '2d' context를 가져와서 fillText라는 함수가 있는지여부를 Boolean으로 return

function supports_canvas_text() {
    if(!supports_canvas()) { return false; }

    var dummy_canvas = document.createElement('canvas');
    var context = dummy_canvas.getContext('2d');
    return typeof context.fillText == 'function';
}

video 기능 감지

video엘리먼트의 canPlayType를 가져와서 부정 연산자 두번을 이용한 트릭으로 Boolean값으로 변화시켜서 return

function supports_video() {
    return !!document.crealeElement('video').canPlayType;
}

video 포맷

canPlayType으로 포맷에 대한 재생여부를 체크하여 문자열로 return

비디오 포맷은 복잡 미묘하기 때문에 Boolean으로 return하지 않고 다음과 같은 문자열을 return 한다.

• "probably" : 브라우저는 이 포맷을 재생할 수 있다고 거의 확신한다.
• "maybe" : 브라우저는 아마도 이 포맷을 재생할 수 있다고 생각된다.
• " " : 브라우저는 이 포맷을 재생할 수 없다고 확신한다.

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

    var v = document.craeteElement('video');
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a40.2"');
}

canPlayType에 들어갈 인자의 예시는 다음과 같다.

• video/mp4; codecs="avc1.42E01E, mp4a40.2" : MPEC-4컨테이너의 H.264 베이스라인 비디오와 AAC LC오디오
• video/ogg; codecs="theora, vorbis : ogg 컨테이너에 있는 테오라 비디오와 보비스 오디오
• video/webm; codecs="vp8, vorbis" : WebM -----> 아직 Modernizr에서는 WebM을 감지하지 못함.

localstorage

localStorage 속성이 정의되었는지 여부를 Boolean으로 return, 전역객체인 window에 localStorage속성이 있다.

function supports_local_storage() {
    return ('localStorage' in window) && window['localStorage'] != null;
}

webworker

Worker 속성이 정의되었는지 여부를 Boolean으로 return, 전역객체인 window에 Worker속성이 있다.

function supports_web_worker() {
    return !!window.Worker;
}

applicationCache(오프라인 웹 애플리케이션)

applicationCache 속성이 정의되었는지 여부를 Boolean으로 return, 전역객체인 window에 applicationCache속성이 있다.

function supports_offline() {
    return !!window.applicationCache;
}

geolocation

geolocation 속성이 정의되었는지 여부를 Boolean으로 return, 전역객체인 navigator에 geolocation 속성이 있다.

function supports_geolocation() {
    return !!navigator.geolocation;
}

입력 타입

input 엘리먼트에 type을 지정하고 난 후 type속성을 읽었을 시 지정한 type으로 반환되는 지 여부를 Boolean으로 return

function supports_input_type() {
    var i = document.createElement('input');
    i.setAttribute("type", "TYPE");
    return i.type !== "text";
}

TYPE = search, number, range, color, tel, url, email, date, month, week, time, datetime, datetime-local (총 13가지)

placeholder

input엘리먼트에 placeholder속성이 있는지 여부를 Boolean으로 return

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in  i;
}

autofocus

input엘리먼트에 autofocus속성이 있는지 여부를 Boolean으로 return

function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in  i;
}

microdata

Modernizr에서 지원하지 않기 때문에 DOM을 이용한 방식을 사용하는 수 밖에 없다. 전역객체 docuemnt가 getItems() 함수를 가지는 지 여부를 Boolean으로 return

function supports_microdata_api() {
    return !!document.getItems;
}