Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

nomad-programmer

[Programming/HTML|CSS] 브라우저 간의 차이를 메꿔주는 폴리필(polyfill) 본문

Programming/HTML|CSS

[Programming/HTML|CSS] 브라우저 간의 차이를 메꿔주는 폴리필(polyfill)

scii 2020. 8. 2. 02:28

최신 브라우저라 하더라도 HTML5 스펙의 기능들이 어떤 브라우저에서는 되고, 어떤 브라우저에서는 안되는 것을 브라우저 파편화(browser fragmentation)이라고 한다.
이런 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위해 여러 가지 방법들을 동원하는데 이런 방법들을 통틀어 "심(shim)"이라고 부르며, "폴백(fallback)"이라 부르기도 한다. 
html5shim.js도 shim의 일종이다.
https://github.com/aFarkas/html5shiv

 

aFarkas/html5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFarkas/html5shiv

github.com

폴리필(polyfill)은 파편화를 보이는 브라우저에 삽이하는 자바스크립트 소스로, 브라우저를 스스로 판별하여 해당 브라우저에 필요한 shim을 알아서 끼워 넣어준다.

개발되어 있는 폴리필들은 꽤 많다. 아래의 github링크를 참고하면 HTML5 크로스 브라우징을 위한 폴리필이나 심, 폴백을 한 눈에 볼 수 있다.

https://github.com/Modernizr/Modernizr/wiki

 

Modernizr/Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. - Modernizr/Modernizr

github.com

 

HTML5를 지원하는지 확인하려면?

Modernizr 사용법

Modernizr는 인터넷 익스플로러에서 시맨틱 태그를 사용할 수 있게 해주는 방법이 아니라, 사용하려고 하는 HTML  태그나 CSS 속성을 현재 브라우저에서 지원하는지 확인하고, 지원하지 않을 경우 또 다른 해결 방법을 제시할 수 있다.

예를 들어, HTML5의 새로운 태그인 <video> 태그를 지원하는지 확인하려면 다음과 같이 할 수 있다.

https://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

위의 링크에서 최신 버전의 라이브러리를 다운로드할 수 있고, 다운로드한 파일은 다음과 같이 페이지에 링크하면 바로 사용할 수 있다.

<head>
  <script src="modernizr.min.js"></script>
</head>

 

Comments