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.
Цитировать
Осталось добавить кеширование ;)
Цитировать
WP и так генерит нифиговую нагрузку на сервак, ибо при каждом запросе страницы запускает ВСЕ механизмы функций, а не только те, которые нужны.
добавим генерацию CSS для каждой страницы и без агрессивного кеширования можно забыть о скорости…
Цитировать
Да, генерируемый CSS — интересная идея. Можно, например, определять юзерагент, и не отдавать нормальным броузерам всякие хаки для IE.
Чтобы оно не тормозило и не нагружало сервера, наверное, имеет смысл еще каким-то образом все это дело кешировать.
Цитировать
ничего нового и полезного.
Как читатили уже писали тут: дело уперается в кэширование.
Напишите лучше статью как такое сделат.
Спасибо.
Цитировать
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.
Цитировать
Проверял, точно валидатор не в восторге:(
Цитировать
Спасибо за статью :)
PS Очень приятно видеть девушек среди вебмастеров :) Спасибо за разрушение стереотипов!
Цитировать
Проверял я, но поисковики не восторге(
Цитировать
Не понял целесообразности предлагаемого метода. Генерировать, кешировать… Что меняется в качественном плане? На мой взгляд – ничего нового и хорошего такой подход не принесет.
Цитировать
Добрый день!
Очень понравилася=)
а можно ж впринципе создать асоциативный массив,где будет свойство, и значение свойства, но вопрос будет ли оно целесобразно?
Цитировать
Texnar, представьте, если много много раз встречается какой то цвет, а вам нужно перенести шаблон на другой проект, изменив цвета, но сохранив дизайн в целом. Вот тут переменные очень удобны! И таких примеров можно привести массу. Идея мне очень понравилась.
Цитировать
имхо, лучше пусть ява меняет css, меньше нагрузка не сервер будет.
Цитировать
ctrl+h (замена) есть в любом редакторе. Не вижу смысла в таком методе.
Цитировать
хорошая заметка, осталось найти место чтоб прикрутить :)
Цитировать
Интересная статья, надо будет попробовать ))
Цитировать
Мне больше нравится построение с помощью шаблонов. Написал свой собственный простенький шаблонизатор, сейчас все с помощью него реализовываю
Цитировать
“лучше пусть ява меняет css, меньше нагрузка не сервер будет.”
Мне тоже так кажется. Это слишком большая нагрузка на хостинг.
Цитировать
Нужно utf-8 убрать в заголовке
Цитировать