Грузим много CSS в IE

В Островке при разработке сайта используется модульная структура. Логические элементы состоят из разметки, стилей и javascript-файлов.

После перехода на такую структуру, пару месяцев все было хорошо. Потом в IE начали пропадать стили из разных блоков, и мы осознали, что столкнулись с проблемой всех крупных проектов – в IE9 и младше не грузится больше 31го css файла разом.

И столкнуться с этим на закате IE9.

Менять бэкенд, что бы он склеивал статику на лету и выводил другую логику специально для IE было непропорционально трудозатратно. И я начал писать скрипт, который решает эту проблему.

Смысл решения известен и успешно применяется. Например, в Яндексе на бэкенде в css’ки импортятся файлы блоками по 31 штуке.

Вначале я решил оптимизировать и грузить в первый файл следующие 30 css файлов импортами. Но в таком случае первый стиль имел приоритет над остальными. Это периодически ломало верстку.

Рабочим алгоритмом стало:

1. Удалить из документа все файлы стилей
2. Генерация тэгов style с 31им импортом.

Демо.

За полгода мы все отладили, и скрипт готов увидеть свет. Только не стоит его использовать на продакшене – он здорово замедлит рендеринг старницы в IE.

Как использовать

Надо подключить javascript файл на страницу.

А после всех css файлов написать код, который будет видно только в IE:

<!--[if IE]> 	<script> 		fixIESheets(); 	</script> <![endif]--> 

Это скрипт увеличит количество возможных css’ок до 961. Надеюсь, хватит всем.