Грузим много CSS для IE в режиме разработки

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

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

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

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

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

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

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

Демо ^[3].

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

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

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

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

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

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

Автор: lusever

Источник ^[5]