Estoy desarrollando una página web en un entorno de navegador web mixto (Chrome / IE11). IE11 no admite variables CSS, ¿existe un polyfill o script que me permita usar variables CSS en IE11?
css
internet-explorer-11
polyfills
R. StackUser
fuente
fuente
Respuestas:
Sí, siempre que esté procesando propiedades personalizadas de nivel raíz (IE9 +).
Del README:
A continuación, se muestran algunos ejemplos de lo que puede manejar la biblioteca:
Propiedades personalizadas de nivel raíz
:root { --a: red; } p { color: var(--a); }Propiedades personalizadas encadenadas
:root { --a: var(--b); --b: var(--c); --c: red; } p { color: var(--a); }Propiedades personalizadas anidadas
:root { --a: 1em; --b: 2; } p { font-size: calc(var(--a) * var(--b)); }Valores alternativos
p { font-size: var(--a, 1rem); color: var(--b, var(--c, var(--d, red))); }Transforma
<link>,<style>y@importCSS<link rel="stylesheet" href="/absolute/path/to/style.css"> <link rel="stylesheet" href="../relative/path/to/style.css"> <style> @import "/absolute/path/to/style.css"; @import "../relative/path/to/style.css"; </style>Transforma componentes web / shadow DOM
<custom-element> #shadow-root <style> .my-custom-element { color: var(--test-color); } </style> <div class="my-custom-element">Hello.</div> </custom-element>En aras de la integridad: especificaciones de w3c
Espero que esto ayude.
(Autopromoción descarada: comprobar)
fuente
--primary: #aaadeclaración no se procesará. En este problema se proporciona una explicación más detallada: Ampliación del soporte fuera de: root .:rootlimitación no es un problema para mí. Para obtener más ganancias de rendimiento, consulte las opciones, por ejemplo{ exclude: '[href*=jquery-ui],...', preserveStatic: false }.Este polyfill permite un soporte casi completo para propiedades personalizadas ( no solo a nivel de raíz ) en IE11:
https://github.com/nuxodin/ie11CustomProperties
Cómo funciona
El script hace uso del hecho de que IE tiene un soporte mínimo de propiedades personalizadas donde las propiedades se pueden definir y leer teniendo en cuenta la cascada.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"luego léelo en javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']Características del README:
Manifestación:
https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html
fuente
<script src="yourJsPath/ie11CustomProperties.js"></script>a la sección principal de su archivo HTML e IE11 coincidirá.+1 para el enlace del fragmento de código de lápiz en la sección de comentarios de la pregunta anterior por [Tengo kode]. Sin embargo, una cosa que encontré es que el fragmento debe modificarse ligeramente para tener las declaraciones de función definidas en el formato JSON para que IE11 no se queje. A continuación se muestra la versión ligeramente modificada del fragmento de código de lápiz:
let cssVarPoly = { init: function() { // first lets see if the browser supports CSS variables // No version of IE supports window.CSS.supports, so if that isn't supported in the first place we know CSS variables is not supported // Edge supports supports, so check for actual variable support if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) { // this browser does support variables, abort console.log('your browser supports CSS variables, aborting and letting the native support handle things.'); return; } else { // edge barfs on console statements if the console is not open... lame! console.log('no support for you! polyfill all (some of) the things!!'); document.querySelector('body').classList.add('cssvars-polyfilled'); } cssVarPoly.ratifiedVars = {}; cssVarPoly.varsByBlock = {}; cssVarPoly.oldCSS = {}; // start things off cssVarPoly.findCSS(); cssVarPoly.updateCSS(); }, // find all the css blocks, save off the content, and look for variables findCSS: function() { let styleBlocks = document.querySelectorAll('style:not(.inserted),link[type="text/css"]'); // we need to track the order of the style/link elements when we save off the CSS, set a counter let counter = 1; // loop through all CSS blocks looking for CSS variables being set [].forEach.call(styleBlocks, function (block) { // console.log(block.nodeName); let theCSS; if (block.nodeName === 'STYLE') { // console.log("style"); theCSS = block.innerHTML; cssVarPoly.findSetters(theCSS, counter); } else if (block.nodeName === 'LINK') { // console.log("link"); cssVarPoly.getLink(block.getAttribute('href'), counter, function (counter, request) { cssVarPoly.findSetters(request.responseText, counter); cssVarPoly.oldCSS[counter] = request.responseText; cssVarPoly.updateCSS(); }); theCSS = ''; } // save off the CSS to parse through again later. the value may be empty for links that are waiting for their ajax return, but this will maintain the order cssVarPoly.oldCSS[counter] = theCSS; counter++; }); }, // find all the "--variable: value" matches in a provided block of CSS and add them to the master list findSetters: function(theCSS, counter) { // console.log(theCSS); cssVarPoly.varsByBlock[counter] = theCSS.match(/(--.+:.+;)/g) || []; }, // run through all the CSS blocks to update the variables and then inject on the page updateCSS: function() { // first lets loop through all the variables to make sure later vars trump earlier vars cssVarPoly.ratifySetters(cssVarPoly.varsByBlock); // loop through the css blocks (styles and links) for (let curCSSID in cssVarPoly.oldCSS) { // console.log("curCSS:",oldCSS[curCSSID]); let newCSS = cssVarPoly.replaceGetters(cssVarPoly.oldCSS[curCSSID], cssVarPoly.ratifiedVars); // put it back into the page // first check to see if this block exists already if (document.querySelector('#inserted' + curCSSID)) { // console.log("updating") document.querySelector('#inserted' + curCSSID).innerHTML = newCSS; } else { // console.log("adding"); var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = newCSS; style.classList.add('inserted'); style.id = 'inserted' + curCSSID; document.getElementsByTagName('head')[0].appendChild(style); } }; }, // parse a provided block of CSS looking for a provided list of variables and replace the --var-name with the correct value replaceGetters: function(curCSS, varList) { // console.log(varList); for (let theVar in varList) { // console.log(theVar); // match the variable with the actual variable name let getterRegex = new RegExp('var\\(\\s*' + theVar + '\\s*\\)', 'g'); // console.log(getterRegex); // console.log(curCSS); curCSS = curCSS.replace(getterRegex, varList[theVar]); // now check for any getters that are left that have fallbacks let getterRegex2 = new RegExp('var\\(\\s*.+\\s*,\\s*(.+)\\)', 'g'); // console.log(getterRegex); // console.log(curCSS); let matches = curCSS.match(getterRegex2); if (matches) { // console.log("matches",matches); matches.forEach(function (match) { // console.log(match.match(/var\(.+,\s*(.+)\)/)) // find the fallback within the getter curCSS = curCSS.replace(match, match.match(/var\(.+,\s*(.+)\)/)[1]); }); } // curCSS = curCSS.replace(getterRegex2,varList[theVar]); }; // console.log(curCSS); return curCSS; }, // determine the css variable name value pair and track the latest ratifySetters: function(varList) { // console.log("varList:",varList); // loop through each block in order, to maintain order specificity for (let curBlock in varList) { let curVars = varList[curBlock]; // console.log("curVars:",curVars); // loop through each var in the block curVars.forEach(function (theVar) { // console.log(theVar); // split on the name value pair separator let matches = theVar.split(/:\s*/); // console.log(matches); // put it in an object based on the varName. Each time we do this it will override a previous use and so will always have the last set be the winner // 0 = the name, 1 = the value, strip off the ; if it is there cssVarPoly.ratifiedVars[matches[0]] = matches[1].replace(/;/, ''); }); }; // console.log(ratifiedVars); }, // get the CSS file (same domain for now) getLink: function(url, counter, success) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.overrideMimeType('text/css;'); request.onload = function () { if (request.status >= 200 && request.status < 400) { // Success! // console.log(request.responseText); if (typeof success === 'function') { success(counter, request); } } else { // We reached our target server, but it returned an error console.warn('an error was returned from:', url); } }; request.onerror = function () { // There was a connection error of some sort console.warn('we could not get anything from:', url); }; request.send(); } }; cssVarPoly.init();fuente
Probé esta versión de Polyfill pero terminé con errores cuando una línea en CSS tenía múltiples variables (fuente FI y color). Un colega mío me ayudó. Ver línea 94.
let cssVarPoly = { init: function() { // first lets see if the browser supports CSS variables // No version of IE supports window.CSS.supports, so if that isn't supported in the first place we know CSS variables is not supported // Edge supports supports, so check for actual variable support if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) { // this browser does support variables, abort // console.log('your browser supports CSS variables, aborting and letting the native support handle things.'); return; } else { // edge barfs on console statements if the console is not open... lame! // console.log('no support for you! polyfill all (some of) the things!!'); document.querySelector('body').classList.add('cssvars-polyfilled'); } cssVarPoly.ratifiedVars = {}; cssVarPoly.varsByBlock = {}; cssVarPoly.oldCSS = {}; // start things off cssVarPoly.findCSS(); cssVarPoly.updateCSS(); }, // find all the css blocks, save off the content, and look for variables findCSS: function() { let styleBlocks = document.querySelectorAll('style:not(.inserted),link[type="text/css"]'); // we need to track the order of the style/link elements when we save off the CSS, set a counter let counter = 1; // loop through all CSS blocks looking for CSS variables being set [].forEach.call(styleBlocks, function (block) { // console.log(block.nodeName); let theCSS; if (block.nodeName === 'STYLE') { // console.log("style"); theCSS = block.innerHTML; cssVarPoly.findSetters(theCSS, counter); } else if (block.nodeName === 'LINK') { // console.log("link"); cssVarPoly.getLink(block.getAttribute('href'), counter, function (counter, request) { cssVarPoly.findSetters(request.responseText, counter); cssVarPoly.oldCSS[counter] = request.responseText; cssVarPoly.updateCSS(); }); theCSS = ''; } // save off the CSS to parse through again later. the value may be empty for links that are waiting for their ajax return, but this will maintain the order cssVarPoly.oldCSS[counter] = theCSS; counter++; }); }, // find all the "--variable: value" matches in a provided block of CSS and add them to the master list findSetters: function(theCSS, counter) { // console.log(theCSS); cssVarPoly.varsByBlock[counter] = theCSS.match(/(--.+:.+;)/g) || []; }, // run through all the CSS blocks to update the variables and then inject on the page updateCSS: function() { // first lets loop through all the variables to make sure later vars trump earlier vars cssVarPoly.ratifySetters(cssVarPoly.varsByBlock); // loop through the css blocks (styles and links) for (let curCSSID in cssVarPoly.oldCSS) { // console.log("curCSS:",oldCSS[curCSSID]); let newCSS = cssVarPoly.replaceGetters(cssVarPoly.oldCSS[curCSSID], cssVarPoly.ratifiedVars); // put it back into the page // first check to see if this block exists already if (document.querySelector('#inserted' + curCSSID)) { // console.log("updating") document.querySelector('#inserted' + curCSSID).innerHTML = newCSS; } else { // console.log("adding"); var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = newCSS; style.classList.add('inserted'); style.id = 'inserted' + curCSSID; document.getElementsByTagName('head')[0].appendChild(style); } }; }, // parse a provided block of CSS looking for a provided list of variables and replace the --var-name with the correct value replaceGetters: function(curCSS, varList) { // console.log(varList); for (let theVar in varList) { // console.log(theVar); // match the variable with the actual variable name // console.log (theVar); var res = theVar.match(/--[a-zA-Z0-9-]+/g); // console.log (res[0]); theVar = res[0]; let getterRegex = new RegExp('var\\(\\s*' + theVar + '\\s*\\)', 'g'); // console.log(getterRegex); // console.log(curCSS); curCSS = curCSS.replace(getterRegex, varList[theVar]); // now check for any getters that are left that have fallbacks let getterRegex2 = new RegExp('var\\(\\s*.+\\s*,\\s*(.+)\\)', 'g'); // console.log(getterRegex); // console.log(curCSS); let matches = curCSS.match(getterRegex2); if (matches) { // console.log("matches",matches); matches.forEach(function (match) { // console.log(match.match(/var\(.+,\s*(.+)\)/)) // find the fallback within the getter curCSS = curCSS.replace(match, match.match(/var\(.+,\s*(.+)\)/)[1]); }); } // curCSS = curCSS.replace(getterRegex2,varList[theVar]); }; // console.log(curCSS); return curCSS; }, // determine the css variable name value pair and track the latest ratifySetters: function(varList) { // console.log("varList:",varList); // loop through each block in order, to maintain order specificity for (let curBlock in varList) { let curVars = varList[curBlock]; // console.log("curVars:",curVars); // loop through each var in the block curVars.forEach(function (theVar) { // console.log(theVar); // split on the name value pair separator let matches = theVar.split(/:\s*/); // console.log(matches); // put it in an object based on the varName. Each time we do this it will override a previous use and so will always have the last set be the winner // 0 = the name, 1 = the value, strip off the ; if it is there cssVarPoly.ratifiedVars[matches[0]] = matches[1].replace(/;/, ''); }); }; // console.log(ratifiedVars); }, // get the CSS file (same domain for now) getLink: function(url, counter, success) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.overrideMimeType('text/css;'); request.onload = function () { if (request.status >= 200 && request.status < 400) { // Success! // console.log(request.responseText); if (typeof success === 'function') { success(counter, request); } } else { // We reached our target server, but it returned an error console.warn('an error was returned from:', url); } }; request.onerror = function () { // There was a connection error of some sort console.warn('we could not get anything from:', url); }; request.send(); } }; cssVarPoly.init();fuente
Para admitir Internet Explorer, simplemente use el siguiente script en la etiqueta principal index.html y está funcionando como un encanto.
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\x2fscript>');</script>fuente