Skip to content

Instantly share code, notes, and snippets.

@ilokhov
Created March 9, 2019 23:37
Show Gist options
  • Save ilokhov/1a64a74fae026bfd5bfae0786e3ab461 to your computer and use it in GitHub Desktop.
Save ilokhov/1a64a74fae026bfd5bfae0786e3ab461 to your computer and use it in GitHub Desktop.
JS script which injects a stylesheet with prefixed CSS grid properties for Internet Explorer
const ua = window.navigator.userAgent;
const isIE = /MSIE|Trident/.test(ua);
if (!isIE) return;
const styleElement = document.createElement("style");
styleElement.setAttribute("type", "text/css");
const grid = { rows: 2, cols: 4 };
let styleContent = `#grid {display: -ms-grid; -ms-grid-columns: (1fr)[${grid.cols}]; -ms-grid-rows: (1fr)[${grid.rows}];}`;
for (let row = 1; row <= grid.rows; row++) {
for (let col = 1; col <= grid.cols; col++) {
const cellNum = col + grid.cols * (row - 1);
const cellStyle = `#grid .cell:nth-child(${cellNum}) {-ms-grid-row: ${row}; -ms-grid-column: ${col};}`;
styleContent += cellStyle;
}
}
styleElement.textContent = styleContent;
document.head.appendChild(styleElement);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment