Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

CSS → Вводим перемные в CSS

Многие знают что CSS3 обещает нам переменые, но пока мы дождемся этой технологии пройдет много времени, а потом еще и чтоб браузеры адаптировались под CSS3. Но выход есть и можно реализовать это в обычном css с помощью php вставок.

Всё очень просто. И если вы выучите основы php то для вас это понять вобще будет не проблема =)
И так начнем. Создадим файл style.php и пропишем в него:
Вводим перемные в CSS


<?php
header("Content-type: text/css; charset: UTF-8");
?>


Что означает данная строка? она задает что данный документ всё таки стили! То есть мы указываем тип документа.

Вводим переменные
Теперь зададим несколько переменных. Например:

<?php
header("Content-type: text/css; charset: UTF-8");

$brandColor = "#993600";
$linkColor = "#522555";
$CDNURL = "http://habrasorium.ru"
?>


Далее используем переменые в css коде.
#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 в html страницу таким образом:
<link rel='stylesheet' type='text/css' href='css/style.php' />

Тобе ж расширение css мы меняем на php.

Для чего можно использовать переменные в css с помощью php?
1) Вы можите сжать css файл с помощью php
2) Даже можете с помощью User-agent определить браузер и выводить определеные стили под браузер пользователя
3) В зависимости от время года можно выводить разный фон
4) Генерировать различные цвета, например для ников пользователей.

Если не будет работать например в WordPress, то нужно прописать следующий код в файл htaccess (только для Apache)
<FilesMatch "^.*?style.*?$">
SetHandler php5-script
</FilesMatch>

При этом файл стилей оставляем с расширением .css, а .htaccess кладем в туже папку, где и стили.

Вот и всё! Экспериментируйте.
Опубликовал dimas_ua, 18-02-2011, 00:00 Комментариев: 0
 (голосов: 0)