sa-polyfills

Front-End polyfills

Some scripts for supporting new opportunities in old browsers. It based on browser detection.
Build folder contains es6 modules for importing into the project.

Installation

npm install sa-polyfills --save

Table of contents

1. sa-detection
2. sa-closest
3. sa-grid-auto-placement

sa-detection

Functions for browser detection

List of functions

isIE10
isIE11
isEdge
isEdgeChromium
isIE10Plus
isIEOrEdge
isSafari
isAppleDevice
isFirefox
isChrome
isOpera

sa-closest

IE 10+ - Element.closest() polyfill

Usage

import { detection } from 'sa-polyfills';
import { Closest } from 'sa-polyfills';

if (detection.isIE10Plus()) new Closest();

sa-grid-auto-placement

IE 10+ - CSS grid cell auto placement

Usage

import { detection } from 'sa-polyfills';
import { GridAutoPlacement } from 'sa-polyfills';

if (detection.isIE10Plus()) {
  new GridAutoPlacement({
    selector: '#grid',
    direction: 'column',
    msGridColumns: '210px 210px 210px',
    msGridRows: '150px 150px 150px',
    gap: 10
  });
};

--------------------------------------------------------------------------

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .item {
    -ms-grid-row: 999;
    -ms-grid-column: 999;
  }
}

List of parameters

selector	Grid element selector
direction	Direction of grid
msGridColumns	CSS grid-template-columns for IE
msGridRows	CSS grid-template-rows for IE

Additional

For using CSS grip-gap you need add padding for grid and margin for grid item:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .grid {
    padding: 5px;
  }

  .item {
    margin: 5px;
  }
}