Почему мы не используем динамический (на стороне сервера) CSS?

Сгенерированный HTML на стороне сервера тривиален (и это был единственный способ создать динамические веб-страницы до AJAX), CSS на стороне сервера - нет. На самом деле, я никогда не видел это. Существуют CSS-компиляторы, но они генерируют CSS-файлы, которые можно использовать как статические.

Технически, он не требует специальных библиотек, тег стиля HTML должен ссылаться на скрипт шаблона PHP (/ ASP / что угодно) вместо статического файла CSS, и скрипт должен отправлять заголовок типа контента CSS - и все.

Есть ли проблемы с кешем? Я так не думаю. Скрипт должен отправлять заголовки без кэширования и т. Д. Это проблема для дизайнеров? Нет, они должны редактировать шаблон CSS (как они редактируют шаблон HTML).

Почему мы не используем динамические генераторы CSS? Или, если есть, пожалуйста, дайте мне знать.

Основная причина, почему css редко генерируется динамически (это также верно для javascript), заключается в том, что они являются хорошими кандидатами для кэширования. CSS - это очень гибкий способ стилизации ваших страниц, с правильной комбинацией классов, вы можете получить все различные части всех ваших разных страниц, стилизованные под все виды подсказок, все без необходимости обуславливать любую из них в CSS Сам о том, что на самом деле происходит в этом просмотре страницы.

Просто потому, что CSS не должен отличаться на странице, приводит к очень распространенной практике оптимизации стоимости его загрузки. Большинство сайтов объединяют все CSS для всего сайта в одну загрузку, поэтому части, которые будут применяться к различным просмотрам страниц, присутствуют только в одном загруженном файле. Благодаря кешированию ваши клиенты не должны ждать загрузки второй раз. Возможно, что еще более важно, вы, как поставщик контента, не должны платить за загрузку контента более одного раза; и вы даже можете разместить статический CSS на сервере, который лучше подходит для обслуживания статического контента, что освобождает ресурсы для реального динамического контента на ваших серверах приложений.

Эта практика настолько распространена, что многие браузеры просто предполагают, что CSS является статическим; и очень неохотно скачивают CSS, который у них уже есть; даже если пользователи перезагрузят страницу. Эта специальная обработка применяется только к CSS; другие типы контента перезагружаются, как и ожидалось.

Я полагаю, что ваше предположение неверно: в моем последнем проекте приложение использовало сгенерированный сервером CSS, загруженный ajax (потому что, в зависимости от местоположения карты, которую вы просматривали, страница была оформлена в совершенно разных стилях).

Однако случаи использования, когда получение дополнительного CSS с помощью ajax решило бы проблему, встречаются довольно редко, поэтому, возможно, вы никогда не сталкивались с этим: обычно проще поддерживать набор таблиц стилей, которые предварительно обрабатываются во время развертывания (LESS + минификация) и кэшируются ( Например, на следующей странице можно будет повторно использовать кешированную таблицу стилей, поэтому начальное время будет короче).

На самом деле, есть варианты использования для динамического CSS. Я работал с тремя разными видами:

1. Меньше - Меньше CSS - это в основном расширение языка CSS, которое добавляет «динамическое поведение, такое как переменные, миксины, операции и функции». Также допускаются «вложенные правила», что очень удобно. Я использовал Less в основном для того, чтобы сделать CSS писать менее многословно, исключив некоторые повторения.

2. Перезапись URL-адреса. В качестве подтверждения вашего заявления о том, что проблем с кэшем нет, я давно использовал PHP для предоставления скриптов в виде файлов CSS с правильными заголовками кэша. В основном я делаю это для обслуживания файлов CSS из библиотек, которые не находятся в корневом веб-каталоге.

3. Динамические отчеты. В одном проекте, над которым я работал, у нас был построитель отчетов для всех видов данных в системе. Мы выводим (внутри styleтегов, как вы упомянули) правила динамического стиля в основном для цветов, которые были выбраны пользователем в построителе отчетов.

^{Примечание. При выводе CSS непосредственно на URL (как в 1 или 2 ) и без встраивания его в страницу, которая уже генерируется сценарием, вы добавите серверу довольно значительную нагрузку по сравнению со статическим контентом. Таким образом, если у вас есть значительный трафик, даже если вы можете делать это динамически каждый раз, вы захотите кэшировать его как статический файл, если ваш вариант использования позволяет.}

Но почему это не более распространено? Я думаю, что есть одна главная причина - CSS на самом деле не создан для вывода контента. Так что просто нет большой необходимости. Помимо вывода динамических цветов, выбранных пользователем, как мы это делали, или, возможно, фоновых изображений (хотя, если изображение является контентом , это, вероятно, хороший аргумент для использования imgтега), что еще вам нужно сделать динамически?

Большинство динамических изменений стиля могут быть произведены путем обращения к различным статическим документам CSS.

Так что, конечно, это возможно, как вы думали, но причин для этого не так уж много.

Есть два отдельных аспекта динамической загрузки CSS ...

1. Генерация файла CSS динамически на сервере

   Это довольно просто, и многие сайты делают это. Это полезно, если вы измените свой CSS в зависимости от некоторых условий. Например, если вы выбираете тему своего сайта в зависимости от географического местоположения пользователя.

2. Загрузка файла CSS по запросу через загрузчик JS-скрипта

   Это может пригодиться, если вы динамически создаете большую часть DOM, а затем загружаете необходимые стили. НО, как говорит автор LABjs ...

   на самом деле определить, завершена ли загрузка динамически загруженного CSS-файла, на самом деле довольно сложно и сложно для кросс-браузерной работы. События «загрузки» не запускаются так, как можно было бы надеяться / ожидать. поэтому добавление такой поддержки добавит нетривиальный размер к LABjs

1. Мы делаем это. Все время. Особенно для таких вещей, как индивидуальный брендинг клиента в SaaS-приложении, где цвета и т. Д. Берутся из базы данных.
2. С точки зрения пользователя намного быстрее предварительно сгенерировать CSS до, во время развертывания или во время загрузки приложения, если приложение имеет фазу загрузки. Обычно мы предпочитаем предварительно генерировать статические CSS-файлы, когда это возможно.
3. Для максимальной скорости (с точки зрения пользователя) лучше всего доставлять статические CSS-файлы в CDN, а браузер должен получать их из CDN, а не с серверов приложений. Как правило, это возможно только в том случае, если файлы CSS могут быть предварительно сгенерированы до или во время развертывания, и когда часть развертывания доставляет предварительно созданные статические файлы CSS в CDN. CDN теперь очень дешевы и просты в использовании - посмотрите Amazon CloudFront и Rackspace Cloud Files.

Есть ли проблемы с кешем? Я так не думаю. Скрипт должен отправлять no-cache и т. Д.

Все очень хорошо, но это значительная часть в целом статической информации, которую вы просите пользователя загружать каждый раз, когда он загружает страницу. Так что вам лучше иметь веские причины для этого.

Что же это может быть за причина?

Если вы хотите изменить стиль, основанный на различных параметрах, то вы делаете это, имея несколько таблиц стилей и генерируя HTML-код для загрузки правильного.

Динамический CSS довольно тривиален, и хотя его приложения более ограничены (учитывая, как динамически генерируемый HTML со статической таблицей стилей решает большинство повседневных задач, а сам CSS включает несколько механизмов для достижения полудинамичности), я ' Я видел, что он использовался во многих случаях, и я использую их сам, когда мне это нужно.

Часто «динамическая» часть делает немного больше, чем объединение нескольких таблиц стилей в одну (для уменьшения количества HTTP-запросов) и минимизация их (для уменьшения использования полосы пропускания), но простые вещи, такие как подстановка переменных (например, использование переменных для цветов, используемых повсеместно таблица стилей) может сделать вашу жизнь намного проще. Однако, поскольку CSS имеет довольно простой синтаксис с небольшим количеством предостережений, для этого обычно достаточно универсальной системы обработки текста или языка сценариев, такого как PHP, поэтому вы не видите много готовых систем обработки CSS.

Может быть, вы видели их в дикой природе, не узнавая их. Серверы, отправляющие динамические сценарии, обычно используют перезапись URL-адресов, поэтому URL-адрес становится неотличимым от статически обслуживаемого содержимого. Это необходимо, потому что некоторые браузеры (особенно IE) полагаются на расширения для правильного определения типа MIME при определенных обстоятельствах, игнорируя (или отбрасывая) любые заголовки Content-Type, которые вы, возможно, отправили.

Что касается кеширования: таблицы стилей обрабатываются GET-запросами, и их кэширование абсолютно необходимо для хорошего пользовательского опыта. Вы не хотите наблюдать за обновлением страницы, поскольку она повторно загружает таблицу стилей при каждом запросе. Вместо этого вы должны поместить все параметры, которые изменяют вывод вашей обработки таблицы стилей, в строку запроса; другая строка запроса дает другой URL, что, в свою очередь, приводит к отсутствию кэша, поэтому при каждом изменении параметров таблица стилей будет перезагружаться, даже если клиент кэширует все. Если вам действительно нужен CSS, который потенциально отличается для каждого запроса и зависит от побочных эффектов, рассмотрите возможность помещения нединамической части в статически обслуживаемую таблицу стилей и выполняйте только те операции, которые динамически необходимы.

Есть некоторые сценарии, в которых я бы хотел использовать динамический CSS, но чаще всего я застрял с помощью дизайнеров, которым нужна помощь в понимании основ CSS. Добавление динамического языка в микс может привести к взрыву головы.

Еще один способ взглянуть на это - «какой-то другой парень делает всю мучительную ручную работу, а не моя проблема, двигаясь дальше ...»