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

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

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

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

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

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

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

    Демо.

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

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

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

    А после всех css файлов написать код, который будет видно только в IE:
    <!--[if IE]>
    	<script>
    		fixIESheets();
    	</script>
    <![endif]-->
    


    Это скрипт увеличит количество возможных css'ок до 961. Надеюсь, хватит всем.
    Ostrovok.ru
    106,00
    Компания
    Поделиться публикацией

    Комментарии 26

      +9
      А разве большое кол-во грузящихся файлов ресурсов не является bad practice?
        +4
        Да. Мое решение только для режима разработки, когда удобно дебажить файлы по отдельности, а не слитые в один. В тексте это написано, но легко пропустить. Переформулирую.
          +1
          Ясно. Из поста было не совсем понятно, что это «only for dev mode», наверное смутила фраза
          Менять бэкенд, что бы он склеивал статику на лету и выводил другую логику специально для IE было непропорционально трудозатратно.
            0
            Я как-то обычно делаю так: создал основной css, потом файлик какой-то структуры или элементов. Отладил? Отдал в общий. Но в соответвующий комментарий. И работает очень даже хорошо.
            0
            Демо – яркий тому пример.
            Я не верю в сайты с настолько сложной структурой одной страницы, в которой более 30 сложных блоков, которые описывать в одном CSS-файле. Это переизбыток.
              0
              Любой сайт удобнее делить на маленькие блоки. Для каждого блока отдельный css. Например, для двух совершенно разных страниц сайта может быть абсолютно одинаковая шапка. Логичнее для этой шапки выделить отдельный css-файл, а не дублировать стили в стилях для этих двух страниц.
            +5
            Хватает одной.
              +4
              Я один не понимаю, зачем делать столько CSS-файлов и, более того, подключать их все на одну страницу?
                +1
                Для декомпозиции. Разрабатывать сайт в большой команде и держать пару css файлов на весь проект, как минимум будет приводить к бесконечным конфликтам.
                  –5
                  Конфликты легко решаются, например, системами контроля версий. Кроме случаев, когда несколько программистов делают правки в тех же местах. Но это другой вопрос – у меня возникают сомнения по поводу качества и производительности, когда более, чем 1-2 программиста настолько тесно работают над одним и тем же куском, что это будет приводить к бесконечным конфликтам.
                +2
                Ладно вам с большим количеством… Полгода потратили на 30 строк?
                  +2
                  Я хотел подчеркнуть выдержку скрипта, перед тем как выложить в паблик.
                  Было подозрение, что ререндеринг стилей мог создать какие-нибудь специфичные баги. Но все хорошо, и ни каких особых багов в IE мы не нашли.
                  0
                  Вроде только для IE8 и меньше. И почему-то условный комментарий для всех ИЕ, хотя еще есть ИЕ9 и ИЕ10.
                    +1
                    Я перепроверил, в IE9 эта бага есть и она фиксится скриптом.
                    А условные комментарии в IE10 не работают.
                      +1
                      Для IE9 тоже актуально, а в IE10 уже conditional comments нет
                      +1
                      >>>Потом в IE начали пропадать стили из разных блоков, и мы осознали, что столкнулись с проблемой всех крупных проектов

                      *HANDSHAKE*
                        0
                        А не проще ли пересобирать все файлы каким-нибудь make'ом и смотреть? Для чего вообще нужно подключать поотдельности каждый ccs'ник — пусть даже для отладки. Можно же как-то задавать классы, совпадающие с частью названия css-файла?
                          0
                          Проще оказалась как раз не думать о сборщиках, а пофиксить браузером. Потери производительности можно потерпеть, ради редких моментов дебага в IE.
                          И такой код легче переносить из проекта в проект.
                          0
                          Попробуйте SCSS. У меня куда больше, чем 30 файлов, но в браузере работаю с одним. Генерирует всё на лету при сохранении, довольно быстро (не обращаю внимание на время, жму в браузере F9 (css_reloader) и вижу изменения). Из недостатков стоит отметить лишь то, что нельзя править файл прямо в браузере. Но этот недостаток с лихвой окупается огромными возможностями SASS\SCSS.
                            0
                            А у нас как раз SASS. Но блоки собираются не только на уровне css, а еще и на уровне html. У которого в ресурсах может быть css и js.
                              0
                              Less.js вообще собирает всё на клиенте (только для дев-мода конечно), и как раз по такому же принципу — закачивает всё через XHR и вставляет в <style>
                              0
                              <style type="text/css">
                                 @import url("import1.css");
                                 @import url("importN.css");
                              </style>
                              

                              Я просто оставлю это здесь. И никаких js.
                                0
                                Я не проверял, но судя по этому посту, ограничение в 31 CSS файл, IE10 похоже преодолевает.
                                Наконец-то!
                                  0
                                  В основе вашей модульной структуры лежит методология наподобие БЭМ либо используется какой-то иной подход?
                                    +1
                                    Сейчас используем как у Google Closure Library. JS иклудит js, scss иклудит scss, html рендерится яваскриптом. Еще полгода назад блоки бились по мотивам БЭМ. Html блоки инклудили js и scss, а последние сами подтягивали нужные зависимости. Подробности есть в статье Фронт-энд Островка изнутри.
                                    0
                                    В Яндексе CSS и JS собирается на лету в один файл (импорты заменяются на содержимое файлов с исключением дубликатов) с использованием fast-cgi решения под названием ycssjs.

                                    Мигрируем с него постепенно на bem server, который используется для сборки всех зависимых ресурсов страницы (например, ещё шаблонов), а не только css и js.

                                    Для сбоки в продакшен используется ycssjs, или borschik, или bem make,

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое