Detectizr is a Modernizr extension
Detectizr는 Modernizr의 확장 기능으로서 역할을 하는 서드파티(Third Party) 라이브러리입니다.
모더나이저는 신기술만을 체크할 뿐 사용자의 운영체제나 브라우저까지는 체크하지 않기 때문에 이에 대한 보완을 디텍타이저가 맡고 있습니다.
즉, Detectizr는 Modernizr의 플러그인이라고 할 수 있습니다.
Detectizr가 수행하는 일
- Device(디바이스)
- Device Model(디바이스 모델)
- Screen Size(화면 크기)
- Operating System(운영 체제)
- Operating System Version(운영 체제 버전)
- Browser(브라우저)
- Browser Version(브라우저 버전)
- Browser Engine(브라우저 엔진)
- Browser Plugins(브라우저 플러그인)
위 항목들을 탐지,체크하여 사용자에게 정보를 제공해 줍니다.
이 항목들은 선택 사항으로 탐지를 원하지 않는 항목이 있다면 비활성화 시킬 수도 있습니다.
그리고 탐지(감지)할 수 있는 장치 유형은 다음과 같습니다.
- TV (스마트TV와 게임콘솔 포함)
- Mobile (모바일)
- Tablet(태블릿)
- Desktop(데스트톱)
위와 같이 TV, 모바일 및 태블릿 장치 모델이 감지되고 있습니다.
Detectizr Usage(디텍타이저 사용방법)
디텍타이저는 모더나이저를 사용하는 라이브러리로써 다음과 같이 구성할 수 있습니다.
<html>
<head>
<script src="modernizr.js"></script>
<script src="detectizr.js"></script>
</head>
<body>
<script>
Detectizr.detect({detectScreen:false});
</script>
</body>
</html>여기서 주의해야 할 사항은 modernizr.js를 우선적으로 로드해야한다는 점입니다.
어떻게 보면 당연한 말이겠지만 모더나이저의 확장 라이브러리이기 때문에 먼저 modernizr.js 를 인클루드한 후 detectizr.js 를 포함해야 한다는 것입니다.
그리고 위와 같이 디텍타이저를 호출하면 모더나이저가 <html> 요소에 클래스명을 추가하여 사용자에게 정보를 제공하는 것과 같은 방법으로 디텍타이저가 감지한 정보를 클래스명을 통해 확인하실 수 있습니다.
위 그림은 디텍타이저의 탐지결과를 html의 클래스명으로 나타낸 것을 볼 수 있습니다.
Detectizr Advantage
디텍타이저를 사용하면 좋은 점이 무엇이 있을까요?
디텍타이저를 사용하면 일단 단계(점진)적 기능향상을 목표로 하는 프로젝트에 유용하게 사용할 수 있습니다.
IE8을 고려해야하는 상황이라면 좀 더 유연하게 브라우저를 제어할 수 있습니다.
하지만 IE6~7을 감지하지 않기 때문에 따로 감지할 수 있는 polyfill이나 사용자 정의 스크립트가 필요한 점이 아쉽습니다.
IE6~7까지 체크를 한 스크립트까지 더한다면 IE 계열때문에 사용하는 조건부 주석문, 아니면 CSS Hack과 같은 것에 의존할 필요가 전혀 없게 됩니다.
예를 들어 디텍타이저는 흔히 조건부 주석문에 사용하는 클래스 방식을 그대로 <html> 요소에 클래스를 추가하여 그 클래스를 사용자가 사용할 수 있도록 정보를 제공해 주도록 할 수 있습니다.
그리고 RWD의 경우에도 mobile, tablet, desktop 클래스명을 이용할 수 있습니다.
다음은 IE계열을 체크하는 코드입니다.
디텍타이저와 함께 사용하면 위의 장점을 그대로 사용할 수 있을 것입니다.
/**
* --------------------------------
* IE Version Check
* http://e-rooms.tistory.com/
* --------------------------------
*/
(function () {
var UA = navigator.userAgent.toLowerCase();
// IE7엔 브라우저 엔진명인 Trident가 없고 IE11엔 MSIE란 문자열이 없으므로 두 가지 경우를 다 체크한다.
if (UA.indexOf('msie') != -1 || UA.indexOf('trident') != -1) {
var version = 11;
UA = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(UA);
if (UA) {
version = parseInt(UA[1]);
}
var classNames = '';
// IE 8 이하에 html 클래스를 추가한다.
// IE 9 이상은 detectizr 에서 체크한다.
if(version <= 8) {
// ie 라는 공통 클래스도 추가한다.
classNames += ' ie';
// 현재 버전 표시를 추가한다.
classNames += ' ie' + version;
}
// 모든 IE에서 lt-ie 버전에 대한 멀티 클래스를 추가한다.
for (var i = version + 1; i <= 11; i++) {
classNames += ' lt-ie' + i;
}
// 위 코드에서 체크한 클래스를 html 태그에 추가한다.
document.getElementsByTagName('html')[0].className += classNames;
}
})();IE7 버전에서 체크한 결과
위와 같이 조건부 주석문처리 방식으로 클래스를 제어할 수 있습니다.
Related links
'Code Lab' 카테고리의 다른 글
| 셀렉트박스 디자인 - designed selectBox (0) | 2016.09.29 |
|---|---|
| Modernizr.mq 활용편 (0) | 2016.09.29 |
| Modernizr(모더나이저) (0) | 2016.09.29 |
| Accessibility Layer Popup(접근성 레이어 팝업 코드) (2) | 2016.09.29 |
| 심플 롤링 배너(생성자 함수) - 단계별 학습 #4 (0) | 2016.09.29 |
