Skip to content

Instantly share code, notes, and snippets.

@lizkaraffa

lizkaraffa/file.js

Last active Aug 14, 2020
Embed
What would you like to do?
IE11 CSS Grid Workaround
// Vanilla JS version (only use one)
// this will inject new style rules into the body of the page
// see: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
function injectIE11Grid(){
var ieRules = '';
var css = document.createElement('style');
var head = document.head || document.getElementsByTagName('head');
css.type = 'text/css';
for ( var i=1; i <= document.querySelectorAll('.entry-content > *').length; i++){
ieRules += '.entry-content > *:nth-child(' + i + ') {';
ieRules += '-ms-grid-row: ' + i + '; }';
}
css.appendChild(document.createTextNode(ieRules));
head.appendChild(css);
}
//ESNext + jQuery version (You will need a bundler to convert this to JS IE11 can handle)
function injectIE11Grid(){
var ieRules = '';
for (var i=1; i <= jQuery('.entry-content > *').length; i++){
ieRules += `
.entry-content > *:nth-child(${i}) {
-ms-grid-row: ${i};
}`
}
$('<style>' + ieRules +'</style>').appendTo('body');
}
//Only runs on IE11
if( typeof CSS === 'undefined' ) {
injectIE11Grid();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.