Internet Explorer의 CSS 규칙 제한

Internet Explorer의 어리석은 CSS 제한에 관한 상충되는 정보를 읽었습니다. 나는 당신이 31 <style>과 <link>태그 (결합) 만 가질 수 있으며 각 시트는 최대 31 @import-s 를 가질 수 있음을 이해하고 있습니다 (31- <link>s, 각 31- @imports는 훌륭하지만 훌륭합니다).

그러나 4095 규칙은 명확하지 않습니다.이 4095 규칙이 문서 또는 시트 당입니까? 예를 들어, <link>각각 4000 개의 규칙이있는 두 개의 스타일 시트를 사용하여 작동시킬 수 있습니까?

타사 편집 2018

이 msdn 블로그 게시물 stylesheet-limits-in-internet-explorer에서 추가 정보가 제공됩니다.

Microsoft에서 다음을 참조하십시오.

• Internet Explorer의 스타일 시트 제한
• KB-CSS 스타일을 사용하는 웹 페이지가 Internet Explorer에서 올바르게 렌더링되지 않습니다

IE9 의 규칙 은 다음과 같습니다.

• 시트는 4095 선택기까지 포함 할 수 있습니다 (데모)
• 시트 31 장까지 @Import 수도
• @import nesting은 최대 4 단계의 깊이를 지원합니다

IE10 의 규칙 은 다음과 같습니다.

• 시트는 65534 선택기까지 포함 할 수 있습니다
• 시트는 4095 장까지 @import 수 있습니다
• @import nesting은 최대 4095 레벨까지 지원

시트 제한으로 4095 규칙 테스트

확인 을 위해 3 개의 파일 로 요점 을 만들었습니다 . 하나의 HTML과 두 개의 CSS 파일.

• 첫 번째 파일에는 4096 개의 선택기가 포함되어 있으며 마지막 선택기가 읽지 않음을 의미합니다.
• 두 번째 파일 (4095.css)에는 하나의 적은 선택기가 있으며 읽기가 가능하며 이전 파일에서 다른 4095 선택기를 이미 읽었음에도 불구하고 IE에서 완벽하게 작동합니다.

CSS 규칙을 세는 자바 스크립트 스크립트 :

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

위의 유사한 스 니펫에 대해 언급 할 담당자가 충분하지 않지만 @media 규칙을 계산합니다. 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/krisbulman/0f5e27bba375b151515d

Internet Explorer 의 Stylesheet Limits 라는 제목의 MSDN IEInternals 블로그 페이지에 따르면 IE 9를 통해 IE 6에 적용되는 위에 표시된 제한 (31 시트, 시트 당 4095 규칙 및 4 수준)이 IE 9에서 다음과 같이 증가했습니다. :

• 시트에는 최대 65534 개의 규칙이 포함될 수 있습니다.
• 문서는 최대 4095 개의 스타일 시트를 사용할 수 있습니다
• @import 중첩은 4095 수준으로 제한됩니다 (4095 스타일 시트 제한으로 인해).

그런트를 사용하는 사람들에게이 문제에 대한 좋은 해결책 :

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

FireFox dev 에디션의 개발자 도구는 CSS 규칙을 보여줍니다

이전 IE 버전 / 큰 CSS 파일로 여전히 싸우는 사람들에게 유용 할 수 있습니다.

FF Developer Edition 웹 사이트

288kb보다 큰 CSS 파일은 ~ 288kb까지만 읽을 수 있다는 점도 주목할 가치가 있다고 생각합니다. 이후의 모든 것은 IE <= 9에서 완전히 무시됩니다.

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

내 조언은 더 큰 응용 프로그램의 CSS 파일을 모듈 및 구성 요소로 나누고 파일 크기를 계속 주시하는 것입니다.