В Островке при разработке сайта используется модульная структура. Логические элементы состоят из разметки, стилей и javascript-файлов.
После перехода на такую структуру, пару месяцев все было хорошо. Потом в IE начали пропадать стили из разных блоков, и мы осознали, что столкнулись с проблемой всех крупных проектов – в IE9 и младше не грузится больше 31го css файла разом.
Менять бэкенд, что бы он склеивал статику на лету и выводил другую логику специально для IE было непропорционально трудозатратно. И я начал писать скрипт, который решает эту проблему.
Смысл решения известен и успешно применяется. Например, в Яндексе на бэкенде в css'ки импортятся файлы блоками по 31 штуке.
Вначале я решил оптимизировать и грузить в первый файл следующие 30 css файлов импортами. Но в таком случае первый стиль имел приоритет над остальными. Это периодически ломало верстку.
Рабочим алгоритмом стало:
- Удалить из документа все файлы стилей
- Генерация тэгов style с 31им импортом.
Демо.
За полгода мы все отладили, и скрипт готов увидеть свет. Только не используйте его на продакшене – он здорово замедлит рендеринг старницы в IE.
Как использовать
Надо подключить javascript файл на страницу.
А после всех css файлов написать код, который будет видно только в IE:
<!--[if IE]>
<script>
fixIESheets();
</script>
<![endif]-->
Это скрипт увеличит количество возможных css'ок до 961. Надеюсь, хватит всем.
Автор: lusever
