আইই ১১ - সিএসএস ভেরিয়েবলের জন্য কি কোনও পলিফিল / স্ক্রিপ্ট বিদ্যমান?

Question 1

আমি একটি মিশ্র ওয়েব ব্রাউজার পরিবেশে (ক্রোম / আইই ১১) একটি ওয়েবপৃষ্ঠা বিকাশ করছি। আইই ১১ সিএসএস ভেরিয়েবলগুলিকে সমর্থন করে না, এমন কোনও পলিফিল বা স্ক্রিপ্ট রয়েছে যা আমাকে আইইএস-এ সিএসএস ভেরিয়েবলগুলি ব্যবহার করতে দেয়?

Question 2

হ্যাঁ, আপনি যতক্ষণ পর্যন্ত রুট-স্তরের কাস্টম বৈশিষ্ট্যগুলি (IE9 +) প্রসেস করছেন।

গিটহাব : https://github.com/jhildenbiddle/css-vars-ponyfill
এনপিএম : https://www.npmjs.com/package/css-vars-ponyfill
ডেমো : https://codepen.io/jhildenbiddle/pen/ZxYJrR

পুনরায় পড়া থেকে:

বৈশিষ্ট্য

সিএসএস কাস্টম বৈশিষ্ট্যগুলিকে স্থিতমূল্যে রূপান্তরকরণ

আধুনিক ও লেগ্যাসি ব্রাউজার উভয় ক্ষেত্রে রানটাইম মানগুলির লাইভ আপডেট

রূপান্তর <link>, <style>এবং @importসিএসএস

url()নিখুঁত URL গুলিতে আপেক্ষিক পাথগুলি রূপান্তর করে

শৃঙ্খলাবদ্ধ এবং নেস্টেড var()ফাংশন সমর্থন করে Supp

var()ফাংশন ফালব্যাক মানগুলিকে সমর্থন করে

ওয়েব উপাদান / ছায়া ডোম সিএসএস সমর্থন করে

মোডে স্বয়ংক্রিয় আপডেট <link>এবং <style>পরিবর্তনগুলি দেখুন

ইউএমডি এবং ইএস 6 মডিউল উপলব্ধ

টাইপস্ক্রিপ্ট সংজ্ঞা অন্তর্ভুক্ত

লাইটওয়েট (6 কে মিনিট + জিজিপ) এবং নির্ভরতা-মুক্ত

সীমাবদ্ধতা

কাস্টম সম্পত্তি সমর্থন সীমাবদ্ধ :rootএবং:host ঘোষণা

ভের () এর ব্যবহার সম্পত্তির মানগুলিতে সীমাবদ্ধ ( ডাব্লু 3 সি স্পেসিফিকেশন )

গ্রন্থাগারটি কী পরিচালনা করতে পারে তার কয়েকটি উদাহরণ এখানে দেওয়া হয়েছে:

রুট-স্তরের কাস্টম বৈশিষ্ট্য

:root {
    --a: red;
}

p {
    color: var(--a);
}

শৃঙ্খলিত কাস্টম বৈশিষ্ট্য

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

নেস্টেড কাস্টম বৈশিষ্ট্য

:root {
    --a: 1em;
    --b: 2;
}

p {
    font-size: calc(var(--a) * var(--b));
}

ফলব্যাক মান values

p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
}

রূপান্তর <link>, <style>এবং @importসিএসএস

<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>

ওয়েব উপাদান / ছায়া ডিওএম রূপান্তর করে

<custom-element>
  #shadow-root
    <style>
      .my-custom-element {
        color: var(--test-color);
      }
    </style>
    <div class="my-custom-element">Hello.</div>
</custom-element>

সম্পূর্ণতার জন্য: w3c চশমা

আশাকরি এটা সাহায্য করবে.

(নির্লজ্জ স্ব-প্রচার: চেক করুন)

Question 3

এই পলিফিল আইইডিতে কাস্টম প্রোপার্টি ( কেবলমাত্র মূল-স্তরের নয় ) জন্য প্রায় সম্পূর্ণ সমর্থন সক্ষম করে :
https://github.com/nuxodin/ie11CustomProperties

কিভাবে এটা কাজ করে

স্ক্রিপ্টটিতে এই আইটিটি ব্যবহার করা যায় যে আইইয়ের ন্যূনতম কাস্টম বৈশিষ্ট্য সমর্থন রয়েছে যেখানে বৈশিষ্ট্যগুলি সংজ্ঞায়িত করা যেতে পারে এবং ক্যাসকেডটি মাথায় রেখে পাঠ করা যায়।
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
তারপরে এটি জাভাস্ক্রিপ্টে পড়ুন:
getComputedStyle( querySelector('.myEl') )['-ie-test']

README থেকে বৈশিষ্ট্যগুলি:

গতিশীল যুক্ত এইচটিএমএল-সামগ্রী পরিচালনা করে

গতিশীল যুক্ত হ্যান্ডেলগুলি <style>, <link>-উপাদানগুলি

শিকল --bar:var(--foo)

পিছু হট var(--color, blue)

: ফোকাস,: লক্ষ্য,: হোভার

জেএস-সংহতকরণ:

style.setProperty('--x','y')

style.getPropertyValue('--x')

getComputedStyle(el).getPropertyValue('--inherited')

ইনলাইন শৈলী: <div ie-style="--color:blue"...

ক্যাসকেড কাজ করে

উত্তরাধিকার কাজ করে

3 কে (মিনিট + জিজিপ) এর অধীনে এবং নির্ভরতা-মুক্ত

ডেমো:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

Question 4

উপরের প্রশ্ন মন্তব্য বিভাগে কোড-পেন স্নিপেট লিঙ্কের জন্য +1 [আমার কোড আছে]। আই -11 এর অভিযোগ না করার জন্য JSON ফর্ম্যাটে ফাংশন ডিক্লারেশন সংজ্ঞায়িত করার জন্য স্নিপেটকে সামান্য পরিবর্তন করতে হবে বলে আমি একটি জিনিস পেয়েছি। নীচে কোড পেন স্নিপেটের সামান্য পরিবর্তিত সংস্করণ দেওয়া হল:

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();

Question 5

আমি পলিফিলের এই সংস্করণটি চেষ্টা করেছিলাম তবে সিএসএসের এক লাইনে একাধিক ভেরিয়েবল (এফআই ফন্ট এবং বর্ণ) থাকলে ত্রুটিগুলি শেষ হয়েছিল। আমার একজন সহকর্মী আমাকে সাহায্য করেছিলেন। লাইন 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();

Question 6

ইন্টারনেট এক্সপ্লোরারকে সমর্থন করার জন্য, কেবলমাত্র সূচী html হেড ট্যাগে নীচের স্ক্রিপ্টটি ব্যবহার করুন এবং এটি একটি কবজির মতো কাজ করছে।

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script>