sa-polyfills v1.2.8

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

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

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;
  }
}