Modernizr 치트시트

[!NOTE] 모던 웹 참고 사항: Modernizr는 HTML5 및 CSS3 전환기에 핵심 역할을 했습니다. 현대 웹 개발에서는 주로 CSS @supports와 JavaScript 내 직접 API 확인('fetch' in window)을 사용합니다.

Modernizr는 사용자 브라우저에서 차세대 HTML5 및 CSS3 기능의 지원 여부를 탐지하여, 불안정한 User-Agent 판별 대신 신뢰할 수 있는 기능 탐지를 제공합니다.

Modernizr 동작 방식

로드되면 Modernizr는 기능 테스트를 실행한 후 다음을 수행합니다:

1. <html> 루트 요소에 .flexbox 또는 .no-flexbox 같은 클래스를 추가합니다.
2. 불리언 테스트 속성을 담은 전역 Modernizr JavaScript 객체를 노출합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

---

CSS 조건부 스타일링

스타일시트에서 지원 브라우저와 미지원 브라우저를 직접 구분해 스타일을 적용합니다:

/* Fallback layout for older browsers */
.no-flexbox .container {
  display: block;
  float: left;
}

/* Modern flexbox layout */
.flexbox .container {
  display: flex;
  justify-content: space-between;
}

---

JavaScript 기능 탐지

if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(showMap);
} else {
  showAddressInputFallback();
}

if (Modernizr.localstorage) {
  localStorage.setItem('theme', 'dark');
}

if (Modernizr.webgl) {
  initialize3DCanvas();
}

---

자주 탐지하는 주요 기능

CSS 기능

• flexbox, cssgrid
• opacity, rgba, hsla
• boxshadow, textshadow, borderradius
• cssanimations, csstransforms, csstransforms3d, csstransitions
• backgroundsize, borderimage, fontface

HTML5 및 스토리지 API

• canvas, canvastext, webgl
• localstorage, sessionstorage, indexeddb
• geolocation, history, websockets, webworkers
• video, audio, svg, inlinesvg

---

참고 자료

• Modernizr 공식 문서
• MDN: 기능 탐지 활용하기