JavaScript와 Modernizr로 브라우저 기능 지원 여부 감지하는 방법

HTML에서 JavaScript로 기능 감지하기

웹 개발에서 모든 브라우저가 동일한 기능을 지원하지는 않습니다. 예를 들어 오디오 재생과 같은 기능은 브라우저에 따라 지원 여부가 다를 수 있습니다. 이럴 때 Modernizr라는 JavaScript 라이브러리를 사용하면 특정 기능의 지원 여부를 손쉽게 확인할 수 있습니다.

다음은 오디오(audio) 기능의 지원 여부를 감지하는 코드 예시입니다:

if (Modernizr.audio) {
    /* 오디오를 지원하는
    브라우저를 위한 처리 */
} else {
    /* 오디오를 지원하지 않는
    브라우저를 위한 처리 */
}

코드 설명

• Modernizr.audio는 현재 브라우저가 HTML5 오디오 요소를 지원하는지 검사합니다.
• 기능이 지원되면 if 블록이 실행되고, 지원되지 않으면 else 블록이 실행됩니다.

이 방식의 장점

이처럼 기능 감지(feature detection)를 활용하면 브라우저 종류나 버전을 일일이 확인하지 않고도, 실제로 해당 기능을 지원하는지만 판단하여 적절한 대체 동작을 제공할 수 있습니다. 이는 구형 브라우저 사용자에게도 안정적인 경험을 제공하는 효과적인 방법입니다.