Internet ExplorerのCSSルールの制限

Internet Explorerの愚かなCSS制限に関する矛盾する情報を読みました。私は（私はそう思います）31 <style>と<link>タグ（結合）しか持てず、各シートには最大31 @import-s が含まれることを理解しています（したがって、31 <link>-sはそれぞれ31 @import-sで問題ありません）。

ただし、4095ルールはそれほど明確ではありません。この4095ルールはドキュメントごとですか、それともシートごとですか？たとえば<link>、それぞれ4000ルールのスタイルシートを2つ作成して機能させることはできますか、それとも制限を超えますか？

サードパーティ編集2018

このmsdnブログの投稿stylesheet-limits-in-internet-explorerに詳細情報が記載されています。

マイクロソフトから以下を参照：

• Internet Explorerのスタイルシートの制限
• KB-CSSスタイルを使用するWebページがInternet Explorerで正しく表示されない

IE9のルールは次のとおりです。

• シートは、 4095のセレクタまで含んでいてもよい（デモ）
• 1つのシートで最大31枚のシートをインポートできます
• @importネストは最大4レベルの深さをサポートします

IE10のルールは次のとおりです。

• シートは 65534のセレクタまで含まれていてもよいです
• シートが 4095枚まで@importあり
• @importネストは最大4095レベルの深さをサポートします

シート制限による4095ルールのテスト

確認のために、3つのファイルを含む要点を作成しました。1つのHTML、および2つのCSSファイル。

• 最初のファイルには4096のセレクターが含まれており、最終的なセレクターが読み込まれません。
• 2番目のファイル（4095.css）のセレクターは1つ少なく、読み込まれ、IEで完全に動作します（以前のファイルから別の4095セレクターを既に読み取っていたとしても）。

CSSルールをカウントするJavaScriptスクリプト：

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のスタイルシートの制限という題名のMSDN IEInternalsブログのページによると、IE 6からIE 9までに適用された上記の制限（31シート、1シートあたり4095のルール、および4レベル）は、IE 10で次のように拡張されました。 ：

• シートには最大65534のルールを含めることができます
• ドキュメントは最大4095のスタイルシートを使用できます
• @importのネストは4095レベルに制限されています（4095スタイルシートの制限により）。

Gruntを使用している人々のためのこの問題に対する素晴らしい解決策：

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

FireFox開発版内の開発者ツールは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ファイルをモジュールとコンポーネントに分割し、ファイルサイズを常に監視することです。