इंटरनेट एक्सप्लोरर के सीएसएस नियमों की सीमा है

Question

मैंने इंटरनेट एक्सप्लोरर की मूर्खतापूर्ण सीएसएस सीमाओं के बारे में परस्पर विरोधी जानकारी पढ़ी है। मैं समझ रहा हूं (मुझे लगता है कि) यह समझ रहा हूं कि आपके पास केवल 31 <style>और <link>टैग (संयुक्त) हो सकते हैं, और प्रत्येक शीट में 31 @import-s तक हो सकते हैं (इसलिए 31 <link>-s, प्रत्येक 31 @import-s ठीक है, यद्यपि पागल है)।

हालाँकि, 4095 नियम कम स्पष्ट है - क्या यह 4095 नियम प्रति दस्तावेज, या प्रति शीट है? उदाहरण के लिए, क्या मैं <link>दो स्टाइलशीट में से प्रत्येक, 4000 नियमों के साथ, और यह काम कर सकता है, या क्या यह सीमा को तोड़ देगा?

तीसरा पक्ष 2018 संपादित करें

इस msdn ब्लॉग पोस्ट स्टाइलशीट-लिमिट्स-इन-इंटरनेट-एक्सप्लोरर पर आगे की जानकारी दी गई है।

Comments

ऐसा लगता है कि 4095 की सीमा habdas.org/2010/05/30/msie-4095-selector-limit के अनुसार प्रति दस्तावेज है और एक परीक्षण पृष्ठ का लिंक भी है जिसे आप स्वयं आजमा सकते हैं

— andyb

आपको किसी भी पृष्ठ पर 30 से अधिक स्टाइलशीट की आवश्यकता क्यों होगी? आपको 4,000 नियमों की आवश्यकता क्यों होगी? यहां तक ​​कि मेरे सबसे जटिल पृष्ठ मुश्किल से 1,000 से अधिक नोड्स प्राप्त करते हैं, इसलिए आपको सीमा तक पहुंचने के लिए प्रति नोड औसत 4 से अधिक नियम होने चाहिए ...

— नीट द डार्क एबोल

कुछ (खराब) कंटेंट मैनेजमेंट सिस्टम टेम्प्लेट का उपयोग करते हैं, जिससे कई सीएसएस फाइलें शामिल हो सकती हैं। दुर्भाग्य से, मैंने देखा है कि 31 की <style>सीमा कई अवसरों पर पहुंची है

— andbb

@ कोलिंक - मैं अपने वेब एप्लिकेशन को कंपाउंड कर रहा हूं। मेरे वर्तमान प्रयास में, 30 घटक = 30 (छोटे) स्टाइलशीट, साथ ही अन्य सामान्य संदिग्ध जैसे कि normalize.css। दूसरे शब्दों में, मैं शायद कुछ ऐसा ही लागू कर रहा हूं जो एंडीब को 'खराब' के रूप में संदर्भित करता है। : पी

— बार्ग

मैं अपनी साइट को घटकों से भी बाहर कर रहा हूं, लेकिन प्रत्येक पृष्ठ स्पष्ट रूप से परिभाषित करता है कि उसे किन घटकों की आवश्यकता है और उनका आयात करता है। शायद आप उन घटकों को लोड कर रहे हैं जिनकी आपको आवश्यकता नहीं है, या शायद आपके घटक बहुत विशिष्ट हैं और आपको कुछ को एक साथ समूहित करना चाहिए - मैं वास्तव में अधिक जानने के बिना न्याय नहीं कर सकता।

— नीट द डार्क एबसोल

Answer 1

Microsoft से निम्नलिखित का उल्लेख:

• इंटरनेट एक्सप्लोरर में स्टाइल्सशीट सीमाएँ
• KB - सीएसएस शैलियों का उपयोग करने वाला वेबपेज इंटरनेट एक्सप्लोरर में सही ढंग से प्रस्तुत नहीं करता है

IE9 के नियम हैं:

• एक शीट में 4095 चयनकर्ता (डेमो) हो सकते हैं
• एक शीट 31 शीट तक @import हो सकती है
• @import घोंसला 4 स्तरों तक गहरा समर्थन करता है

IE10 के नियम हैं:

• एक शीट में 65534 चयनकर्ता शामिल हो सकते हैं
• एक शीट 4095 शीट तक @import हो सकती है
• @import घोंसला 4095 तक गहरे स्तर तक समर्थन करता है

शीट सीमा द्वारा 4095 नियम का परीक्षण

पुष्टि के माध्यम से, मैंने 3 फाइलों के साथ एक जिस्ट बनाया है । एक HTML, और दो सीएसएस फ़ाइलें।

• पहली फ़ाइल में 4096 चयनकर्ता हैं और इसका अर्थ है कि इसके अंतिम चयनकर्ता को पढ़ने में नहीं मिलता है।
• दूसरी फ़ाइल (4095.css) में एक कम चयनकर्ता होता है, और आईई में पूरी तरह से पढ़ता है और काम करता है (भले ही यह पहले से ही एक और 4095 चयनकर्ताओं को पिछली फ़ाइल से पढ़ा हो।

Comments

यह वास्तव में वही दो लिंक हैं, जिन्होंने मुझे भ्रमित किया है। KB कहता है, "पहले 4,095 नियमों के लागू होने के बाद सभी शैली के नियम लागू नहीं होते हैं।", जिसका अर्थ है कि यह प्रति पृष्ठ है, दूसरा लिंक कहता है "एक शीट में 4095 नियम हो सकते हैं", जिसका अर्थ है कि यह प्रति है -चादर।

— बारग

बहुत बहुत धन्यवाद - जिसने पुष्टि की है कि यह प्रति-पृष्ठ है, प्रति-पृष्ठ नहीं।

— बार्ग

यह ध्यान दिया जाना चाहिए कि 4095 सीमा चयनकर्ताओं पर लागू होती है , नियम नहीं ।

— क्रिस्टोफर कॉर्टेज़

सिर्फ स्पष्टीकरण के लिए: निम्नलिखित पंक्ति एक "चयनकर्ता", या दो के रूप में गिना जाएगा? div.oneclass, div.anotherstyle {color: green};

— एंथनी

@ स्मिथनी, दो चयनकर्ता, एक नियम।

— स्क्वीड

Answer 2

आपके सीएसएस नियमों को गिनने के लिए एक जावास्क्रिप्ट स्क्रिप्ट:

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        if (sheet && sheet.cssRules) {
            var count = countSelectors(sheet);

            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    function countSelectors(group) {
        var count = 0;
        for (var j = 0, l = group.cssRules.length; j < l; j++) {
            var rule = group.cssRules[j];
            if (rule instanceof CSSImportRule) {
                countSheet(rule.styleSheet);
            }
            if (rule instanceof CSSMediaRule) {
                count += countSelectors(rule);
            }
            if( !rule.selectorText ) {
                continue;
            }
            count += rule.selectorText.split(',').length;
        }
        return count;
    }

    console.log(log);
    console.log(results);
};
countCSSRules();

Comments

आप इसे प्रदान करने के लिए एक संत हैं। मेरे पास एक बग था जिसे मैं स्थानीय रूप से नहीं ढूँढ सकता था, और ठेस में हमारी परिसंपत्ति के औचित्य के कारण, यह ट्रैक करना संभव नहीं था कि क्या गलत हो रहा है। मुझे लग रहा था कि हम IE के चयनकर्ता की सीमा से अधिक हैं, और आपकी स्क्रिप्ट ने इसे मेरे लिए पाया। आपको बहुत - बहुत धन्यवाद!

— रोब

यह ध्यान देने योग्य है कि आपको IE में इस स्क्रिप्ट को नहीं चलाना चाहिए, क्योंकि यह चेतावनी को कभी भी खाली नहीं करेगा।

— user123444555621

स्क्रिप्ट के लिए धन्यवाद। इसने मुझे एक अलग त्रुटि पर

— बहस

यह लिपि त्रुटिपूर्ण है। आपको @mediaनियमों के लिए एक शाखा शामिल करनी चाहिए , देखें stackoverflow.com/a/25089619/938089 ।

— डब्ल्यू पर रोब डब्ल्यू

महान स्क्रिप्ट। ध्यान रखें कि अगर स्टाइलशीट वेबपेज की तुलना में एक अलग डोमेन से है, तो आपको शीट के लिए शून्य मान मिलेगा ।cssRules

— CodeToad

Answer 3

मेरे पास उपरोक्त समान स्निपेट पर टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं है, लेकिन यह @ मीडिया नियम गिनाता है। इसे क्रोम कंसोल में छोड़ें।

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        var count = 0;
        if (sheet && sheet.cssRules) {
            for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
                if (!sheet.cssRules[j].selectorText) {
                    if (sheet.cssRules[j].cssRules) {
                        for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                            if(sheet.cssRules[j].cssRules[m].selectorText) {
                                count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
                            }
                        }
                    }
                }
                else {
                    count += sheet.cssRules[j].selectorText.split(',').length;
                }
            }
 
            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    console.log(log);
    console.log(results);
};
countCSSRules();

स्रोत: https://gist.github.com/krisbulman/0f5e27bba375b151515d

Comments

यह भी खूब रही। मीडिया प्रश्नों को शामिल करने के लिए स्क्रिप्ट को संपादित करने के लिए धन्यवाद। बहुत, अविश्वसनीय रूप से, सुपर, अत्यधिक उपयोगी !!

— टिफिलो

यह स्क्रिप्ट ऊपर वाले की तुलना में बेहतर है।

— gkempkens

Answer 4

MSDN IEInternals ब्लॉग के एक पृष्ठ के अनुसार इंटरनेट एक्सप्लोरर में स्टाइल्सशीट की सीमाएं हकदार हैं। ऊपर दी गई सीमाएं (31 शीट, 4095 नियम प्रति शीट, और 4 स्तर) IE 9. IE के माध्यम से 6 पर लागू होती हैं। निम्नलिखित में IE 10 में सीमाएं बढ़ा दी गई थीं :

• एक शीट में 65534 नियम हो सकते हैं
• एक दस्तावेज़ 4095 स्टाइलशीट तक का उपयोग कर सकता है
• @import घोंसला 4095 के स्तर (4095 स्टाइलशीट सीमा के कारण) तक सीमित है

Comments

फिर, सीमा नियमों की संख्या में नहीं है , बल्कि चयनकर्ताओं की संख्या में है ।

— Conexo

पाठ "4095 नियम" या "65534 नियम" एक एमएस IEInternals 2011 ब्लॉग पोस्ट पर पाठ से सीधे है और KB Q262161 में भी पाया जा सकता है। यह शब्दार्थ की बात है। "नियम" या "नियम सेट" की कई परिभाषाओं में "चयनकर्ता" "घोषणा" ब्लॉक के बाहर "नियम" का हिस्सा है जो एकल चयनकर्ता या चयनकर्ता समूह हो सकता है। उस परिभाषा का उपयोग करते हुए सभी नियमों का तकनीकी रूप से केवल एक चयनकर्ता होता है, भले ही वह चयनकर्ता वास्तव में विशिष्ट व्यक्तिगत चयनकर्ताओं का समूह हो। -> जारी रखा ->

— रात उल्लू

<- जारी <- ब्लॉग लेखक उन टिप्पणियों में अटकलें लगाता है कि आंतरिक रूप से चयनकर्ता समूह ऐसे क्लोन किए जाते हैं कि चयनकर्ता समूह में प्रत्येक व्यक्ति का चयनकर्ता स्वयं नियम हो जाता है और व्यक्तिगत रूप से गिना जाता है। इस प्रकार "65534 चयनकर्ताओं" का वास्तविक अर्थ अधिक प्रासंगिक है लेकिन "65534 नियम" अभी भी तकनीकी रूप से सही हैं।

— नाइट उल्लू

मैंने पुष्टि की कि IE 10 की एक उच्च सीमा है (मुझे लगता है कि नई सीमा 65534 है क्योंकि नाइट उल्लू ने कहा?) IE 9 की तुलना में isna121247 के gist ( gist.github.com/2225701 ) का उपयोग IE 9 और IE 10 के साथ: developer.microsoft। com / en-us / microsoft-edge / tools /

— vms

Answer 5

ग्रंट का उपयोग करने वाले लोगों के लिए इस समस्या का एक अच्छा समाधान:

https://github.com/Ponginae/grunt-bless

Comments

बेशक, उपयोग करने से पहले मुद्दों की जाँच करें।

— ओलिवर

यह आशीष के लिए एक गंभीर आवरण है। bs , जो बहुत ठोस लगता है।

— टॉम टेमन

Answer 6

फ़ायरफ़ॉक्स देव संस्करण के भीतर डेवलपर टूल सीएसएस नियमों को दर्शाता है

हो सकता है आपमें से जो अभी भी पुराने IE संस्करणों / बड़ी CSS फाइलों के साथ लड़ रहे हों, उनके लिए उपयोगी हो।

एफएफ डेवलपर संस्करण वेबसाइट

Answer 7

मुझे लगता है कि यह भी ध्यान देने योग्य है कि 288kb से बड़ी कोई भी CSS फ़ाइल केवल उस ~ 288kb तक ही पढ़ी जाएगी। IE में कुछ भी पूरी तरह से नजरअंदाज कर दिया जाएगा <= 9।

http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit

मेरी सलाह है कि सीएसएस फाइलों को बड़े अनुप्रयोगों के लिए मॉड्यूल और कंपोनेंट्स में विभाजित करके फाइलों पर निरंतर नजर बनाए रखें।

Comments

कुछ विस्तारित शोधों से ऐसा नहीं लगता कि यह एक फ़ाइल आकार सीमा है, बल्कि एक चयनकर्ता # सीमा है। मुझे इस तथ्य की पुष्टि करने वाला कोई आधिकारिक दस्तावेज नहीं मिला।

— आर्य

देखें stackoverflow.com/questions/49683077/...

— आर्य