특정 기능을 지원하는 웹 브라우저 종류 검사 및 기능 대체

특정 기능을 지원하는 웹 브라우저 종류 검사 및 기능 대체

 

글. 수알치 오상문 

 

웹 브라우저 검색창에서 'can i use'로 검색하면 아래 사이트를 찾을 수 있다. 이 사이트는 데스크톱 및 모바일 웹 브라우저에서 프런트엔드 웹 기술을 지원하기 위한 최신 브라우저 지원 현황 정보를 제공한다.

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

사이트에 접속하면 다음 화면이 나타난다.

(Settings 메뉴에서 몇 가지 설정을 할 수 있지만 기본 설정으로 사용해도 된다.)

'Can I Use' Site

 

검색란에 찾고자 하는 기능을 넣고 엔터를 누르면 각 브라우저별로 버전에 따른 지원 정보를 알려준다.

지원 상태는 색으로 구분한다.

 

녹색: 지원함

갈색: 부분 지원

붉은색: 지원하지 않음

회색: 미확인

 

아래 화면은 Ajax 'fetch' 기능 지원 상태를 확인한 것이다.

The result for 'fetch'.

[참고] 폴리필(Polyfill)

웹 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다. 

fetch를 지원하지 않는 하위 브라우저에서 fetch 기능을 지원하는 외부 js 파일을 사용하는 방법이 있는데 이런 기능을 폴리필이라고 부른다.  

 

[참고] caniuse 및 fetch polyfill 관련 동영상 

https://www.youtube.com/watch?v=NUqzyFOprMI&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q&index=15