Some scripts for supporting new opportunities in old browsers.
It based on browser detection.
Build
folder contains es6 modules for importing into the project.
npm install sa-polyfills --save
Functions for browser detection
isIE10 |
isIE11 |
isEdge |
isEdgeChromium |
isIE10Plus |
isIEOrEdge |
isSafari |
isAppleDevice |
isFirefox |
isChrome |
isOpera |
IE 10+
- Element.closest() polyfill
import { detection } from 'sa-polyfills';
import { Closest } from 'sa-polyfills';
if (detection.isIE10Plus()) new Closest();
IE 10+
- CSS grid cell auto placement
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;
}
}
selector | Grid element selector |
direction | Direction of grid |
msGridColumns | CSS grid-template-columns for IE |
msGridRows | CSS grid-template-rows for IE |
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;
}
}