Tworzę stronę internetową w mieszanym środowisku przeglądarki internetowej (Chrome / IE11). IE11 nie obsługuje zmiennych CSS, czy istnieje polifill lub skrypt, który pozwoliłby mi używać zmiennych CSS w IE11?
css
internet-explorer-11
polyfills
R. StackUser
źródło
źródło
Odpowiedzi:
Tak, o ile przetwarzasz właściwości niestandardowe na poziomie głównym (IE9 +).
Z README:
Oto kilka przykładów tego, co może obsłużyć biblioteka:
Właściwości niestandardowe na poziomie katalogu głównego
:root { --a: red; } p { color: var(--a); }Połączone właściwości niestandardowe
:root { --a: var(--b); --b: var(--c); --c: red; } p { color: var(--a); }Zagnieżdżone właściwości niestandardowe
:root { --a: 1em; --b: 2; } p { font-size: calc(var(--a) * var(--b)); }Wartości rezerwowe
p { font-size: var(--a, 1rem); color: var(--b, var(--c, var(--d, red))); }Transformacje
<link>,<style>i@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>Przekształca komponenty sieciowe / shadow DOM
<custom-element> #shadow-root <style> .my-custom-element { color: var(--test-color); } </style> <div class="my-custom-element">Hello.</div> </custom-element>Ze względu na kompletność: specyfikacje w3c
Mam nadzieję że to pomoże.
(Bezwstydna autopromocja: Sprawdź)
źródło
--primary: #aaadeklaracja nie zostanie przetworzona. Bardziej szczegółowe wyjaśnienie znajduje się w tym wydaniu: Rozszerzenie wsparcia poza: root .:rootograniczenie nie stanowi dla mnie problemu. Aby uzyskać dalsze korzyści, sprawdź opcje, np{ exclude: '[href*=jquery-ui],...', preserveStatic: false }.Ten wypełniacz zapewnia prawie pełną obsługę właściwości niestandardowych ( nie tylko poziomu głównego ) w IE11:
https://github.com/nuxodin/ie11CustomProperties
Jak to działa
Skrypt wykorzystuje fakt, że IE ma minimalne wsparcie dla właściwości niestandardowych, gdzie właściwości mogą być definiowane i odczytywane z myślą o kaskadzie.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"następnie przeczytaj go w javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']Funkcje z README:
Próbny:
https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html
źródło
<script src="yourJsPath/ie11CustomProperties.js"></script>do sekcji head pliku HTML, a IE11 się zgodzi.+1 dla linku fragmentu kodu pióra w sekcji komentarzy do pytania powyżej, autorstwa [I has kode]. Jedną rzeczą, jaką znalazłem, jest to, że fragment musi zostać nieco zmodyfikowany, aby deklaracje funkcji zdefiniowane w formacie JSON, aby IE11 nie narzekały. Poniżej znajduje się nieco zmodyfikowana wersja fragmentu kodu pióra:
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();źródło
Wypróbowałem tę wersję Polyfill, ale skończyło się na błędach, gdy jedna linia w CSS miała wiele zmiennych (czcionka i kolor FI). Pomógł mi kolega. Zobacz wiersz 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();źródło
Aby obsługiwać przeglądarkę Internet Explorer, po prostu użyj poniższego skryptu w tagu head index.html i działa jak urok.
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\x2fscript>');</script>źródło