Modernizr 소개
Modernizr는 차세대 웹 기술에 대한 브라우저의 네이티브(native) 구현 지원 여부를 감지하는 경량 자바스크립트 라이브러리입니다. HTML5와 CSS3의 다양한 신규 기능을 사용자의 브라우저가 실제로 지원하는지 확인할 수 있어, 브라우저 간 호환성 문제를 손쉽게 해결할 수 있습니다.
기능 감지 후 적절히 대응하기
Modernizr는 새로운 기능의 지원 여부를 간편하게 판별할 수 있는 방법을 제공합니다. 덕분에 감지 결과에 따라 상황에 맞는 조치를 취할 수 있습니다. 예를 들어, 방문자의 브라우저가 비디오(HTML5 video) 기능을 지원하지 않는다면 동영상 대신 간단한 안내 페이지나 대체 콘텐츠를 보여주도록 처리할 수 있습니다.
Modernizr가 기능을 감지하면 결과는 두 가지 방식으로 활용할 수 있습니다. 하나는 자바스크립트 객체(Modernizr.video 등)를 통해 프로그래밍적으로 확인하는 방법이고, 다른 하나는 html 태그에 추가되는 클래스(.video, .no-video 등)를 통해 CSS에서 확인하는 방법입니다.
라이브러리 포함 방법
Modernizr를 사용하기 전에 먼저 HTML 페이지의 head 영역에 아래와 같이 자바스크립트 라이브러리를 포함시켜야 합니다.
<script src = "modernizr.min.js"></script>
스크립트는 가능한 한 페이지 상단에 배치하는 것이 좋습니다. Modernizr는 페이지가 렌더링되기 전에 기능 감지를 완료해야 클래스 기반 스타일링이 올바르게 적용되기 때문입니다.
CSS 규칙과 함께 활용하기
앞서 언급했듯이, 기능 지원 여부를 기준으로 CSS 규칙을 작성할 수 있습니다. 브라우저가 특정 신기능을 지원하지 않으면 해당 규칙이 웹페이지에 자동으로 적용됩니다. 이를 활용하면 복잡한 분기 처리 없이도 우아한 성능 저하(graceful degradation)와 점진적 향상(progressive enhancement) 전략을 손쉽게 구현할 수 있습니다.