modernizr를 통해 브라우저 웹 지원 여부 확인하기

modernizr.com/

Modernizr: the feature detection library for HTML5/CSS3

 

modernizr는 canvas나 svg 같은 최신 html5 기능들을 지원하는지 안하는지를 테스트해볼수있게 도움을 주는 툴이다.

 

위 사이트에 들어가서 download > 원하는 기능을 체크한다. svg과 canvas를 확인해보고자 한다.

그후, build를 눌러주면

Copy to Clipboard를 눌러서 코드를 복사하거나 download해서 js파일을 받을 수 있다.

<script src="modernizr-custom.js"></script>
    <script>
    if(Modernizr.svg){
        console.log("svg를 지원합니다.");
    }
        
    if(Modernizr.canvas){
        console.log("canvas를 지원합니다.");
    }
    </script>

modernizr 파일을 불러와서 스크립트로 if문을 작성해 지원여부를 확인할수있다.

현재 크롬으로 확인했을때  svg와 canvas 둘다 지원된다는 메세지의 콘솔이 찍히는걸 볼 수 있다.