모더나이저와 폴리필

modernizr.js

modernizr.js는 사용자가 이용하는 브라우저가 어떤 HTML, CSS 그리고 Javascript의 특정 기능을 지원하고, 지원하지 않는지 알려주는 라이브러리이다. 웹 표준은 계속 진화하여 새로운 것이 생겨난다. html, css는 물론이고 js도 새로운 표준이 나오고 있다. 개발자는 새로운 기능을 사용하여 풍부한 사용자 경험을 전달하고 싶지만, 브라우저가 지원하지 않는다면 상황에 따라서 대체 수단이라도 제공을 해야하는 경우가 많다. modernizr.js는 이런 문제를 해결할 수 있게 도와주는 라이브러리이다.

예를들어 HTML5 오디오 엘리먼트를 사용할 수 있는 브라우저가 있는 반면에 사용할 수 없는 브라우저도 있다. 이 때 modernizr.js는 다음과 같은 식으로 오디오 엘리먼트를 지원하지 않는 브라우저에 대해서 다른 행동을 취할 수 있도록 detect api를 제공한다.

if (Modernizr.audio) {
  // supported
} else {
  // not-supported
}

또한 modernizr.js 스크립트가 실행되면 특정 기능의 지원 여부를 html 태그에 클래스로 추가한다. 그것을 이용하여 다음과 같은 CSS 처리도 가능해진다.

.no-audio .box { color: red; }
.audio .box { color: green; }

어떠한 기능을 검사할 수 있는지는 modernizr.js 다운로드 페이지에서 자세히 확인할 수 있다.

Polyfills

폴리필은 폴리필러(polyfiller)라고도 하며 웹 브라우저에 없는 기능을 제공하기 위한 추가적인 코드를 말한다. 말하자면 modernizr.js를 통해 지원되지 않는 기능이라고 확인되었을 때 동작시킬 대체 코드, 라이브러리 등을 얘기한다. 종종 shim, fallback 이라는 용어도 등장하는데 모두 비슷한 컨셉이다.

폴리필에 해당하는 예를 찾아보면 <section>, <nav>와 같은 엘리먼트를 IE 9 이하 브라우저에서도 사용할 수 있도록 해주는 html5shiv. ECMAScript 5에서 표준으로 지정된 JSON 객체를 대체하는 json2.js 등이 해당된다.

이러한 대체 수단은 modernizr.js에서 제공하는 html5 cross browser polyfills 페이지에서 다양한 것을 찾을 수 있다.