Polyfill

홈페이지 : https://polyfill.io


- 특정 기능이 지원되지 않은 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말함. Polyfill은 HTML5 및 CSS3를 사용하는데 있어 오래된 브라우저 사이의 간격을 메꾸는 역할을 함

자동으로 로드되는 polyfill : https://cdn.polyfill.io/v2/docs/
        

아래처럼 polyfill 을 로드하면 브라우저에 맞는 스크립트가 출력된다. 크롬이나 파이어폭스가 로딩하면 코드는 거의 없고 IE에서 로드하면 코드가 많이 나온다.

<!-- 브라우저 환경에 맞게 자동으로 스크립트 로딩 -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

<!-- 브라우저에 상관없이 전체 소스 로딩 -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default|always"></script>

<!-- Promise 만 로딩 -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise|always"></script>



HTML5 Cross Browser Polyfills
Modernizr 측에서 정리하여 제공하고 있는 각종 폴리필 목록을 참고하면 원하는 기술을 선택하는데 도움이 될 것이다.

html5shiv : HTML5의 섹셔닝 요소(예: <header>, <nav>)를 지원하지 않는 브라우저를 위한 라이브러리
mediaelement.js : HTML5의 <video>와 <audio> 요소들을 모든 브라우저에서 하나의 파일로 같은 UI를 제공하기 위한 라이브러리
Placeholder : HTML5의 플레이스홀더(placeholder)의 지원을 통일하기 위해서 제공하는 라이브러리
h5Validate : HTML5의 폼검증 기능을 구현하기 위해 제공하는 라이브러리
selectivizr : CSS3의 의사 클래스(pseudo-class)와 속성 선택자들을 IE6~8에서 지원하기 위한 라이브러리
css3pie : CSS3의 border-radius와 box-shadow, liner-gradient를 IE6~9 브라우저에서 지원하기 위한 라이브러리
Respond : 반응형 웹의 필수 속성중에 하나인 미디어쿼리를 IE6~8에서 지원하기 위한 라이브러리

더 많은 polyfill : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills



Modernizr
- 사용자의 브라우저가 현재 가지고 있는 HTML5, CSS 기능들을 감지하고 지원여부를 판별하는 Javascript 라이브러리 임. 다양한 브라우저에서 지원되는 기능을 하나씩 확인해가면서 개발하는 것은 현실적으로 불가능하기 때문에 Modernizr와 같은 라이브러리를 통해 필요기능을 감지하고 지원 여부에 따라 개발자가 동적으로 처리를 달리할 수 있음

홈페이지 : https://modernizr.com/
Github : https://github.com/Modernizr/Modernizr


========================================================================================================

Object doesn't support property or method 'assign'

IE Object.assign 오류 시 polyfill

if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
            enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
    'use strict';
    if (target === undefined || target === null) {
    throw new TypeError('Cannot convert first argument to object');
    }
    var to = Object(target);
    for (var i = 1; i < arguments.length; i++) {
    var nextSource = arguments[i];
    if (nextSource === undefined || nextSource === null) {
    continue;
    }
    nextSource = Object(nextSource);
    var keysArray = Object.keys(Object(nextSource));
    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
    var nextKey = keysArray[nextIndex];
    var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
    if (desc !== undefined && desc.enumerable) {
    to[nextKey] = nextSource[nextKey];
    }
    }
    }
    return to;
    }
});
}


+ Recent posts