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

HTML · 2020. 11. 2. 12:16
728x90

modernizr.com/

 

Modernizr: the feature detection library for HTML5/CSS3

What is Modernizr? It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.

modernizr.com

 

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 둘다 지원된다는 메세지의 콘솔이 찍히는걸 볼 수 있다.

 

728x90
Copyright © Nana
levup