CSS переменные с помощью PHP
Как мы знаем, CSS3 обещает нам такую фичу как CSS переменные, я рассказывала об этом тут. Но чудо это светит нам совсем не в ближайшем будущем. Однако выход всегда есть.
Если вы хотя бы немного знаете основы языка PHP, то нам с вами не составит труда реализовать использование CSS переменных уже сейчас. Все довольно легко и просто, как пишет нам Крис Койер в своей .
Style.php
Вместо привычного нам расширения .css, мы подключим к страничке файл .php
<link rel='stylesheet' type='text/css' href='css/style.php' />
Тип документа
В самом начале файла style.php необходимо указать, что на выходе нам все-таки нужен файл стилей, т.е. указываем тип документа:
<?php
header("Content-type: text/css; charset: UTF-8");
?>
Ломаете голову как сдать сессию? У нас курсовые работы на заказ срочно.
Вводим переменные
Теперь установим значения для нескольких переменных, например такие:
<?php
header("Content-type: text/css; charset: UTF-8");
$brandColor = "#990000";
$linkColor = "#555555";
$CDNURL = "http://cdn.blahblah.net"
?>
Использование переменных
Достаточно просто вывести обозначенные переменные в необходимых местах стилей:
#header {
background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}
a
color: <?php echo $linkColor; ?>;
}
...
ul#main-nav li a {
color: <?php echo $linkColor; ?>;
}
Другие идеи использования CSS файла сгенерированного с помощью PHP
- Теоретически, вы даже можете использовать информацию о User-agent для вывода стилей под конкретный браузер.
- В зависимости от сезона года, вы можете менять стили, используя информацию о текущей дате.
- Генерировать различные цвета, устанавливать фон случайным образом, и в конце-концов, просто тестировать.
Не работает?
В некоторых случаях (например для реализации нашей идеи в WordPress), вам возможно потребуется прописать следующие строчки в файле .htaccess (только для Apache):
<FilesMatch "^.*?style.*?$"> SetHandler php5-script </FilesMatch>
При этом файл стилей оставляем с расширением .css, а .htaccess кладем в туже папку, где и стили.
Dmoz
В своей теме Constructor для WP использовал немного другой синтаксис:
/* Output CSS */
echo <<<CSS
h1,
h2 { color:{$color1} }
h3,
h4 { color:{$color2} }
h5,
h6 { color:{$color3} }
CSS;
Читабельность выше, но отсутствует подсветка синтаксиса CSS.
Anton ShevchukЦитировать
Осталось добавить кеширование ;)
NayjestЦитировать
WP и так генерит нифиговую нагрузку на сервак, ибо при каждом запросе страницы запускает ВСЕ механизмы функций, а не только те, которые нужны.
добавим генерацию CSS для каждой страницы и без агрессивного кеширования можно забыть о скорости…
Николай ГромовЦитировать
Да, генерируемый CSS — интересная идея. Можно, например, определять юзерагент, и не отдавать нормальным броузерам всякие хаки для IE.
Чтобы оно не тормозило и не нагружало сервера, наверное, имеет смысл еще каким-то образом все это дело кешировать.
kixЦитировать
ничего нового и полезного.
Как читатили уже писали тут: дело уперается в кэширование.
Напишите лучше статью как такое сделат.
Спасибо.
biwebcoЦитировать
biwebco,
В комментариях к оригинальной статье уже есть ответ на этот вопрос.
Достаточно добавить эти строчки в код файла:
header("Cache-Control: must-revalidate"); $offset = 60 * 60 ; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; header($ExpStr);АвторЦитировать
Эх, а валидатору не нравится такое расширение :(
org.w3c.www.http.HttpInvalidValueException: Invalid content type.
VadimЦитировать
Проверял, точно валидатор не в восторге:(
ComboxЦитировать
Спасибо за статью :)
PS Очень приятно видеть девушек среди вебмастеров :) Спасибо за разрушение стереотипов!
solarisadminЦитировать
Проверял я, но поисковики не восторге(
SonyaЦитировать
Не понял целесообразности предлагаемого метода. Генерировать, кешировать… Что меняется в качественном плане? На мой взгляд – ничего нового и хорошего такой подход не принесет.
TexnarЦитировать
Добрый день!
Очень понравилася=)
а можно ж впринципе создать асоциативный массив,где будет свойство, и значение свойства, но вопрос будет ли оно целесобразно?
cava150Цитировать
Texnar, представьте, если много много раз встречается какой то цвет, а вам нужно перенести шаблон на другой проект, изменив цвета, но сохранив дизайн в целом. Вот тут переменные очень удобны! И таких примеров можно привести массу. Идея мне очень понравилась.
Русский блоггерЦитировать
имхо, лучше пусть ява меняет css, меньше нагрузка не сервер будет.
LennyЦитировать
ctrl+h (замена) есть в любом редакторе. Не вижу смысла в таком методе.
СанёкЦитировать
хорошая заметка, осталось найти место чтоб прикрутить :)
Руслан К.Цитировать
Интересная статья, надо будет попробовать ))
walikЦитировать
Мне больше нравится построение с помощью шаблонов. Написал свой собственный простенький шаблонизатор, сейчас все с помощью него реализовываю
Joker-jarЦитировать
“лучше пусть ява меняет css, меньше нагрузка не сервер будет.”
Мне тоже так кажется. Это слишком большая нагрузка на хостинг.
FrimenЦитировать
Нужно utf-8 убрать в заголовке
zЦитировать
Что-то я так и не понял, зачем это нужно?
А если и нужно, то по-моему не так уж и сложно догадаться сменить расширение у CSS-файла.
VadimЦитировать
Добрый день!
Очень понравилася=)
а можно ж впринципе создать асоциативный массив,где будет свойство, и значение свойства, но вопрос будет ли оно целесобразно?
DuCOzЦитировать
испоьзовал в новом проектике, получислоь как раз кстати:)
alexandretЦитировать
Хм.. интересно! Надо где-то применить! :)
ВоффкаЦитировать
Спасибо, для своей создаваемой темы как раз это искал.
demarketЦитировать
У меня в модуле Joomla mod_jmlogin возникала такая ошибка, убрал utf-8 – ошибка устранилась :) Спасибо, сам бы не додумался :)
vadimvxЦитировать
Такой подход очень удобен, если кто-то желает цветовые схемы для сайта. Чтобы не плодить .css, очень удобно выводить его через один .php стиль.
ZloyЦитировать
css должен оставаться css, либо используйте js накрайняк.
тем более в окончательной версии CSS3 планируют реализовать переменные.
рфЦитировать
Спасибо, помогло!
MikЦитировать