ইন্টারনেট এক্সপ্লোরারের সিএসএস বিধি সীমাবদ্ধ করে


150

আমি ইন্টারনেট এক্সপ্লোরারের নির্বোধ সিএসএস সীমা সম্পর্কিত বিরোধী তথ্য পড়েছি। আমি (আমি মনে করি) বুঝতে পেরেছি যে আপনি কেবল 31 <style>এবং <link>ট্যাগ (সংযুক্ত) রাখতে পারবেন এবং প্রতিটি পত্রকে 31- @importসেকেন্ড পর্যন্ত থাকতে পারে (সুতরাং 31 <link>-s, প্রতিটি 31 @import-s পর্যন্ত ভাল, পাগল)।

তবে, 4095 বিধিটি কম স্পষ্ট - এই নথিটি কি প্রতি নথি প্রতি 409 টি নিয়ম, নাকি প্রতিপত্রক? উদাহরণস্বরূপ, আমি কি <link>4 টি নিয়ম সহ দুটি স্টাইলশিট, এবং এটিতে কাজ করতে পারি, বা এটি সীমাটি ভেঙে দেবে?

তৃতীয় পক্ষের সম্পাদনা 2018

এই এমএসডিএন ব্লগে পোস্ট স্টাইলশিট-সীমা-ইন-ইন্টারনেট-এক্সপ্লোরারকে আরও তথ্য দেওয়া হয়েছে।


1
দেখে মনে হচ্ছে যে 4095 সীমাটি নথী প্রতি habdas.org/2010/05/30/msie-4095-sesector-limit অনুসারে হয় এবং আপনি নিজেই চেষ্টা করতে পারেন এমন একটি পরীক্ষার পৃষ্ঠার
লিঙ্কও রয়েছে

তবে কেন আপনার একক পৃষ্ঠায় 30 টিরও বেশি স্টাইলশিট লাগবে? আপনার 4,000 বিধি কেন লাগবে? এমনকি আমার সবচেয়ে জটিল পৃষ্ঠাগুলি সবেমাত্র এক হাজার নোড পেতে পারে, তাই সীমাতে পৌঁছানোর জন্য আপনাকে নোডের গড় 4 টির বেশি নিয়ম থাকতে হবে ...
নিট দ্য ডার্ক অ্যাবসোল

@ কিছু কিছু (খারাপ) কন্টেন্ট ম্যানেজমেন্ট সিস্টেম টেম্পলেট ব্যবহার করে যা অনেকগুলি সিএসএস ফাইল অন্তর্ভুক্ত হতে পারে lead দুর্ভাগ্যক্রমে, আমি 31 টি <style>সীমাটি বেশ কয়েকটি অনুষ্ঠানে
পৌঁছেছি

@ কলিংক - আমি আমার ওয়েব অ্যাপ্লিকেশনটি তৈরি করছি। আমার বর্তমান প্রয়াসে 30 টি উপাদান = 30 (ক্ষুদ্র) স্টাইলশিট, এবং অন্যান্য সাধারণ সন্দেহভাজন যেমন নরমালাইজ সিএসএস। অন্য কথায়, আমি সম্ভবত অ্যান্ডিবকে 'খারাপ' বলে উল্লেখ করে এর অনুরূপ কিছু বাস্তবায়ন করছি। : পি
বার্গ

আমি আমার সাইটটি উপাদানগুলির বাইরেও তৈরি করছি, তবে প্রতিটি পৃষ্ঠা স্পষ্টভাবে সংজ্ঞা দেয় যে কোন উপাদানগুলির প্রয়োজন এবং সেগুলি আমদানি করে। সম্ভবত আপনি যে উপাদানগুলির প্রয়োজন নেই সেগুলি লোড করছেন, বা আপনার উপাদানগুলি খুব নির্দিষ্ট এবং আপনার কিছুগুলি একত্রিত করা উচিত - আমি আরও কিছু না জেনে সত্যই বিচার করতে পারি না।
নিট দ্য ডার্ক আবসোল

উত্তর:


221

মাইক্রোসফ্ট থেকে নিম্নলিখিত উল্লেখ করে:

আইই 9-র জন্য বিধিগুলি হ'ল :

  • একটি শীটে 4095 জন নির্বাচক (ডেমো) থাকতে পারে
  • একটি শীট @ 31 টি শিটকে ইমপোর্ট করতে পারে
  • @ আমদানি নেস্টিং 4 স্তর পর্যন্ত গভীর সমর্থন করে

আইই 10 এর বিধিগুলি হ'ল :

  • একটি শীটে 65534 জন নির্বাচক থাকতে পারে
  • একটি শীট @ 4095 টি শিটটি ইমপোর্ট করতে পারে
  • @ আমদানি নেস্টিং 4040 স্তর গভীর পর্যন্ত সমর্থন করে

শীট সীমা দ্বারা 4095 বিধিটি পরীক্ষা করা

নিশ্চিতকরণের পথে, আমি 3 টি ফাইল সহ একটি গিস্ট তৈরি করেছি । একটি এইচটিএমএল এবং দুটি সিএসএস ফাইল।

  • প্রথম ফাইলটিতে 4096 জন নির্বাচক রয়েছে এবং এর অর্থ এটির চূড়ান্ত নির্বাচকটি পড়তে পারে না।
  • দ্বিতীয় ফাইলটিতে (4095.css) একটি কম নির্বাচক আছে, এবং এটি পড়তে পারে এবং আইইতে পুরোপুরি কাজ করে (যদিও এটি পূর্ববর্তী ফাইল থেকে অন্য 4095 নির্বাচকদের ইতিমধ্যে পড়েছে)।

2
এটি আসলে সেই একই দুটি লিঙ্ক যা আমাকে বিভ্রান্ত করেছে। কেবি বলেছে যে "প্রথম 4,095 বিধিগুলির পরে সমস্ত স্টাইলের বিধি প্রয়োগ করা হয় না।", যা আমার কাছে বোঝায় যে এটি প্রতি পৃষ্ঠায়, অন্য লিঙ্কটি বলেছে "একটি শীটটিতে 4095 বিধি থাকতে পারে", যা বোঝায় যে এটি প্রতি -sheet।
বার্গ

2
অনেক ধন্যবাদ - এটি নিশ্চিত করেছে যে এটি প্রতি পৃষ্ঠায় নয় প্রতি পৃষ্ঠায়।
বার্গ

30
এটি লক্ষ করা উচিত যে 4095 সীমাটি নিয়ম নয়, নির্বাচকদের ক্ষেত্রে প্রযোজ্য ।
ক্রিস্টোফার কর্টেজ

1
কেবলমাত্র স্পষ্টতার জন্য: নীচের লাইনটি একজন "নির্বাচক" বা দুটি হিসাবে গণনা করবে? div.oneclass, div.anotherstyle {রঙ: সবুজ}
অ্যান্থনি

2
@ অ্যান্থনি, দুই নির্বাচক, একটি নিয়ম।
স্কুইডবে

116

আপনার সিএসএস বিধি গণনা করার জন্য একটি জাভাস্ক্রিপ্ট স্ক্রিপ্ট:

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

2
আপনি এটি সরবরাহ করার জন্য একটি সাধু। আমার একটি ত্রুটি ছিল যা আমি স্থানীয়ভাবে সনাক্ত করতে পারি না, এবং আমাদের সম্পদ হ্রাসের কারণে, কী ভুল হচ্ছে তা সন্ধান করা সম্ভব হয়নি। আমি অনুভূতি পেয়েছিলাম যে আমরা IE এর নির্বাচক সীমা ছাড়িয়ে গিয়েছি এবং আপনার স্ক্রিপ্টটি আমার কাছে এটি খুঁজে পেয়েছিল। তোমাকে অনেক ধন্যবাদ!
ছিনতাই

9
এটি লক্ষণীয় যে আপনি এই স্ক্রিপ্টটি আইইতে চালাবেন না, কারণ এটি কখনই সতর্কতা নির্গত করে না।
ব্যবহারকারী 123444555621

1
স্ক্রিপ্টের জন্য আপনাকে ধন্যবাদ। এটি আমাকে একটি পৃথক ত্রুটি ডিবাগ করতে সহায়তা করেছিল
জেডাহার্ন

4
এই স্ক্রিপ্টটি সঠিক নয়। আপনার @mediaনিয়মের জন্য একটি শাখা অন্তর্ভুক্ত করা উচিত , স্ট্যাকওভারফ্লো . com/ a/ 25089619/938089 দেখুন
রব ডব্লিউ

1
দুর্দান্ত স্ক্রিপ্ট মনে রাখবেন যে স্টাইলশিটগুলি যদি ওয়েবপৃষ্ঠার চেয়ে আলাদা ডোমেন থেকে আসে তবে আপনি শীট সিএসএসআরুলসের জন্য নাল মান পাবেন
কোডটয়েড

34

উপরোক্ত অনুরূপ স্নিপেট সম্পর্কে মন্তব্য করার মতো পর্যাপ্ত পরিমাণ আমার কাছে নেই তবে এটি একটি @ মিডিয়া বিধি গণনা করে। এটি Chrome কনসোলে ফেলে দিন।

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/krisulman/0f5e27bba375b151515d


1
এটা অসাধারণ. মিডিয়া প্রশ্নগুলি অন্তর্ভুক্ত করতে স্ক্রিপ্ট সম্পাদনা করার জন্য আপনাকে ধন্যবাদ। খুব, অবিশ্বাস্যরূপে, সুপার, অত্যন্ত সহায়ক !!
টিফাইলou

1
এই স্ক্রিপ্টটি উপরের চিত্রের চেয়ে ভাল।
gkempkens

15

ইন্টারনেট এক্সপ্লোরারে স্টাইলশিট সীমাবদ্ধতা শিরোনামের এমএসডিএন আইইনটার্নালস ব্লগের একটি পৃষ্ঠা অনুসারে , আইই ৯ এর মাধ্যমে আইই 6 এর জন্য উপরে উল্লিখিত সীমাগুলি (৩ টি শীট, ৪০৯৯ বিধি এবং ৪ টি স্তর) সীমাবদ্ধ করা হয়েছে। :

  • একটি শীটে 65534 টি বিধি থাকতে পারে
  • একটি দস্তাবেজ 4040 অবধি স্টাইলশিট ব্যবহার করতে পারে
  • @ আমদানি নেস্টিং 4095 স্তরে সীমাবদ্ধ (4095 স্টাইলশিটের সীমাবদ্ধতার কারণে)

1
আবার সীমাটি নিয়মের সংখ্যায় নয়, নির্বাচকদের সংখ্যায় ।
কানেকসো

"4095 বিধি" বা "65534 বিধি" পাঠ্যটি সরাসরি এমএস আইআইএনটার্নালস ২০১১ ব্লগ পোস্টের পাঠ্য থেকে এসেছে এবং এটি কেবি Q262161 এও পাওয়া যাবে। এটি সম্ভবত শব্দার্থবিদ্যার বিষয়। "বিধি" বা "নিয়ম সেট" এর অনেক সংজ্ঞায় "নির্বাচক" হ'ল "ডিক্লেয়ারেশন ব্লক" এর বাইরে "বিধি" এর অংশ যা একক নির্বাচক বা নির্বাচক দল হতে পারে। এই সংজ্ঞাটি ব্যবহার করে সমস্ত বিধি প্রযুক্তিগতভাবে কেবলমাত্র একজন নির্বাচক থাকে এমনকি যদি সেই নির্বাচক প্রকৃত পৃথক পৃথক নির্বাচকদের একটি গ্রুপ হয়। -> অব্যাহত ->
রাতের আউল

<- অব্যাহত <- ব্লগ লেখক এমন মন্তব্যে অনুমান করেন যে অভ্যন্তরীণভাবে নির্বাচক দলগুলি এমনভাবে ক্লোন করা হয় যে কোনও নির্বাচক দলের প্রতিটি পৃথক নির্বাচক তার নিজস্ব নিয়মে পরিণত হয় এবং স্বতন্ত্রভাবে গণনা করা হয়। সুতরাং "65534 নির্বাচকদের" আরও প্রাসঙ্গিক বাস্তব বিশ্বের অর্থ রয়েছে তবে "65534 বিধি" এখনও প্রযুক্তিগতভাবে সঠিক।
নাইট আউল

আমি নিশ্চিত করেছি যে আইই 10 এর উচ্চতর সীমা রয়েছে (আমি মনে করি যে নাইট আউল যেমনটি বলেছিল তেমন সীমাটি 65534?) আইএন 9 এবং আইই 10: বিকাশকারী.মাইক্রোসফ্ট সহ আইএসএনএএন 1212 এর গিস্ট ( গিস্ট.github.com/2225701 ) ব্যবহার করে আইই 9 এর চেয়ে নতুন সীমাটি 65534? কম / এন-ইউএস / মাইক্রোসফ্ট-এজ / টুলস / ভিএমএস / ম্যাক
ডেভিড উইনিস্কি

5

গ্রান্ট ব্যবহার করা লোকেদের জন্য এই সমস্যার একটি দুর্দান্ত সমাধান:

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


অবশ্যই এটি ব্যবহার করার আগে সমস্যাগুলি পরীক্ষা করে দেখুন।
অলিভার

এটি आशीर्वाद.js বিটিডব্লিউর জন্য একটি গ্রান্ট র‍্যাপার , যা দেখতে বেশ শক্ত।
টম টেমন

4

ফায়ারফক্স ডেভ সংস্করণের মধ্যে বিকাশকারী সরঞ্জামগুলি সিএসএস বিধিগুলি দেখায়

আপনারা এখনও পুরানো আই ভার্সন / বড় সিএসএস ফাইলগুলির সাথে লড়াই করছেন তাদের পক্ষে সুবিধাজনক হতে পারে।

এফএফ বিকাশকারী সংস্করণ ওয়েবসাইট

দেব সরঞ্জাম - এফএফ


-1

আমি মনে করি এটিও লক্ষণীয় যে 288kb এর চেয়ে বড় কোনও সিএসএস ফাইল কেবল ~ 288 কেবি না হওয়া পর্যন্ত পড়তে হবে। এর পরে যে কোনও কিছুই আইই <= 9 এ সম্পূর্ণ উপেক্ষা করা হবে।

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

আমার পরামর্শটি হ'ল বৃহত্তর অ্যাপ্লিকেশনগুলির জন্য সিএসএস ফাইলগুলি মডিউল এবং উপাদানগুলিতে বিভক্ত করা এবং ফাইলাইজিতে অবিচ্ছিন্ন নজর রাখা।


কিছু প্রসারিত গবেষণা থেকে দেখে মনে হচ্ছে এটি কোনও ফাইলের আকার সীমা নয়, বরং একটি নির্বাচক # সীমা। আমি এই সত্যটি যাচাই করে কোনও অফিসিয়াল ডকুমেন্টেশন পাইনি।
আর্য

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.