Динамический CSS как документ MODx

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

Есть ресурс http://www.shauninman.com/plete/2005/08/css-constants, предлагающий воплощать вышесказанное, используя хак @-правила, после чего ваш css-код выглядит слегка неестественно. Что ж, MODx, похоже, первая и единственная пока система, которая справляется с этой задачей с помощью своих функций - легко, изящно и никак не влияя на css-код. Секрет заключается в использовании документа MODx для хранения css-кода.

Единственное требование – должны быть включены дружественные URL с псевдонимами.

Создайте в древе документов вашего сайта папку “css”. Это необязательно, однако логично и добавит аккуратности.
В этой папке создайте новый документ без шаблона (blank) и с типом содержимого, как вы уже догадались, «text/css» (выбрать тип содержимого можно во вкладке «настройка страницы», page settings)
Вставьте в содержимое документа ваш css-код. Используйте, где необходимо, сниппеты, чанки и т. д.
Задайте псевдоним этого документа (как бы вы назвали ваш css-файл), добавив в конце «.css». Это опять-таки необязательно, но так уж принято называть css-файлы.
Замените в шаблоне ссылку на css-файл типа
<link rel="stylesheet" href="assets/templates/default/site.css" type="text/css" media="screen" />
на метод @import. Делается это ввиду того, что ссылка на наш вновь созданный css-документ не работает в IE, по непонятным причинам. Итак пишем:
<style type="text/css">
@import url('/css/my_style_sheet.css');
</style>
И сохраняем шаблон
Не забудьте переписать пути к изображениям в css-коде с учетом нового расположения нашего файла, если это необходимо.
И, наконец, чтобы гарантировать правильную работу этого приема в IE, вписываем в .htaccess следующие строки:
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary