IE9 и проблема больших CSS файлов

Компоновка всех файлов стилей в один перед запуском веб-приложения на продакшн сервере - это безусловно действенный и необходимый способ уменьшения количества запросов к тому же серверу и оптимизации скорости фронтенда. Для меня этот процесс априори стал стандартом в веб-разработке и я понятия не имел о подводных камнях, которые разбросал для нас Internet Explorer 9. Поэтому спешу поделиться некоторыми особенностями, а точнее ограничениями в IE9 на подключаемые к HTML документу таблицы стилей.

Ограничения в IE9

Первое и самое важное. Одна таблица стилей должна содержать до 4096 CSS селекторов включительно. Это значит что IE9 обрабатывает первые 4096 CSS селекторов, а остальные просто игнорируются. В моем случае я работал с достаточно большим веб-приложением и количество CSS селекторов в скомпонованном файле стилей превышало данное ограничение. Из-за этого ресурс в IE9 выглядел "недостилизованным".

Еще два ограничения касаются директивы @import. Так одна таблица стилей должна содержать до 31 @import включительно и их наследование поддерживается до 4-го уровня.

Считаем количество CSS селекторов

Понять что вы достигли ограничение в 4096 CSS селекторов достаточно просто, так как ваше веб-приложение будет выглядеть в IE9 совсем не так как задумывалось. Однако чтобы понять как близко вы подобрались к данному лимиту и сколько селекторов остается в запасе я предлагаю использовать скрипт ниже. Достаточно выполнить его в консоли веб-разработчика, открыв необходимый для проверки сайт.

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

Если ограничение в 4096 CSS селекторов превышено и вам действительно необходимо поддерживать пользователей Internet Explorer 9, то пора предпринимать активные действия.

Способы обойти ограничение

Одним из очевидных решений является разделение больших CSS файлов на более мелкие, чтобы в каждом из них было до 4096 CSS селекторов. Работая с Ruby on Rails, я использую gem css_splitter , а если проект построен на Node.js, то использую плагин для Grunt grunt-csssplit . Библиотеки прекрасно документированы и их настройка не представляет никаких трудностей. По всем вопросам прошу в комментарии.