Modernizr에서 감지할 수 있는 기능
Modernizr는 사용자의 브라우저가 HTML5 및 CSS3의 다양한 최신 기술을 지원하는지 자동으로 판별해 주는 대표적인 JavaScript 라이브러리입니다. 감지 결과를 바탕으로 조건부로 스타일이나 스크립트를 적용하면, 구형 브라우저까지 고려한 일관된 웹 경험을 제공할 수 있습니다.
아래 표는 Modernizr로 감지할 수 있는 기능들의 전체 목록입니다. Modernizr는 기능 지원 여부를 판별하면 <html> 요소에 해당 기능 이름을 딴 CSS 클래스를 자동으로 추가하며, 동일한 결과를 JavaScript 객체 속성으로도 확인할 수 있습니다. 예를 들어 브라우저가 캔버스(Canvas)를 지원한다면 .canvas 클래스가 추가되고, 코드 안에서는 Modernizr.canvas 값이 참(true)이 됩니다.
| 기능 | CSS 클래스 | JavaScript 확인 방법 |
|---|---|---|
| @font-face | .fontface | Modernizr.fontface |
| 캔버스(Canvas) | .canvas | Modernizr.canvas |
| 캔버스 텍스트(Canvas Text) | .canvastext | Modernizr.canvastext |
| HTML5 오디오 | .audio | Modernizr.audio |
| HTML5 오디오 형식 | 해당 없음 | Modernizr.audio[format] |
| HTML5 비디오 | .video | Modernizr.video |
| HTML5 비디오 형식 | 해당 없음 | Modernizr.video[format] |
| rgba() 색상 | .rgba | Modernizr.rgba |
| hsla() 색상 | .hsla | Modernizr.hsla |
| border-image | .borderimage | Modernizr.borderimage |
| border-radius | .borderradius | Modernizr.borderradius |
| box-shadow | .boxshadow | Modernizr.boxshadow |
| 다중 배경(Multiple Backgrounds) | .multiplebgs | Modernizr.multiplebgs |
| 불투명도(Opacity) | .opacity | Modernizr.opacity |
| CSS 애니메이션 | .cssanimations | Modernizr.cssanimations |
| CSS 다단 레이아웃(Columns) | .csscolumns | Modernizr.csscolumns |
| CSS 그라디언트 | .cssgradients | Modernizr.cssgradients |
| CSS 반사 효과(Reflections) | .cssreflections | Modernizr.cssreflections |
| CSS 2D 변환(Transforms) | .csstransforms | Modernizr.csstransforms |
| CSS 3D 변환(Transforms) | .csstransforms3d | Modernizr.csstransforms3d |
| CSS 트랜지션(Transitions) | .csstransitions | Modernizr.csstransitions |
| 위치 정보(Geolocation API) | .geolocation | Modernizr.geolocation |
| 입력 타입(Input Types) | 해당 없음 | Modernizr.inputtypes[type] |
| 입력 속성(Input Attributes) | 해당 없음 | Modernizr.input[attribute] |
| localStorage | .localstorage | Modernizr.localstorage |
| sessionStorage | .sessionstorage | Modernizr.sessionstorage |
| 웹 워커(Web Workers) | .webworkers | Modernizr.webworkers |
| 애플리케이션 캐시(applicationCache) | .applicationcache | Modernizr.applicationcache |
| SVG | .svg | Modernizr.svg |
| SVG 클립 경로(Clip Paths) | .svgclippaths | Modernizr.svgclippaths |
| SMIL | .smil | Modernizr.smil |
| Web SQL 데이터베이스 | .websqldatabase | Modernizr.websqldatabase |
| IndexedDB | .indexeddb | Modernizr.indexeddb |
| 웹 소켓(Web Sockets) | .websockets | Modernizr.websockets |
| 해시 변경 이벤트(hashchange) | .hashchange | Modernizr.hashchange |
| 히스토리 관리(History Management) | .historymanagement | Modernizr.historymanagement |
| 드래그 앤 드롭(Drag and Drop) | .draganddrop | Modernizr.draganddrop |
| 창 간 메시징(Cross-window Messaging) | .crosswindowmessaging | Modernizr.crosswindowmessaging |
| addTest() 플러그인 API | 해당 없음 | Modernizr.addTest(str, fn) |
참고 사항
'HTML5 오디오 형식', 'HTML5 비디오 형식', '입력 타입', '입력 속성'처럼 CSS 클래스가 제공되지 않는 항목은 JavaScript에서 객체의 하위 속성을 통해 세부 지원 여부를 확인해야 합니다. 예를 들어 Modernizr.audio.ogg처럼 특정 코덱 지원 여부를 직접 조회할 수 있습니다. 또한 addTest() 플러그인 API를 활용하면 자체 커스텀 기능 테스트를 Modernizr에 손쉽게 추가할 수 있어, 프로젝트에 필요한 맞춤형 감지 로직을 구성할 수 있습니다.