Belki henüz tecrübe etmemiş olanlar vardır o yüzden bu önemli bilgiyi bold yazalım 🙂
Internet Explorer 6, 7, 8 ve 9 bir CSS dosyasında 4096 selectordan fazlasını görmez.
Yani büyük bir proje yaparken günün birinde yeni yaptığınız sayfaların, IE 6-9’da sanki hiç CSS yüklenmemiş gibi görünmesi durumuyla karşılaşırsanız bilin ki nedeni bu…
Grunt kullananlar grunt-bless modülünü kullanarak CSS dosyalarını 2 veya daha fazla parçaya bölebilirler.
Grunt kullanmayanlar da bu işlemi elle yapmak zorundalar.
Bu kısımda benden size büyük bir iyilik geliyor 🙂
Aşağıdaki scripti sayfanıza koyarak toplam kaç CSS selector’ınız var console’da görebilir ve ona göre hareket edebilirsiniz.
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 ) continue; 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();