- Подробности
-
Категория: PHP. Синтаксис
Поддержка CSS3 с помощью PHP
Одним из основных пунктов, с которыми приходится иметь дело, когда вплотную подступаешься к использованию СSS3, является необходимость поддержки различных префиксов, определяющих браузер. В данном уроке предлагается метод для решения проблемы повторения одинаковых свойств снова и снова.
Часть вопросов поддержки может быть снята, если генерировать CSS с помощью PHP для сайта, и использовать возможности PHP для абстрагирования нескольких строк CSS3 в одну единственную строку.
PHP для генерации CSS
Использование PHP для генерации CSS не является чем-то новым.
В вашем HTML должна присутствовать следующая строка, чтобы можно было использовать предложенный метод:
1 <link rel="stylesheet" href="/styles/style.php" />
В данной строке только одно отличие от обычной ссылки на CSS файл — вместо указания файла с расширением “.css”, мы вызываем PHP файл. В начало вашего PHP файла нужно вставить следующие строки:
1 <?php
2 header('Content-type: text/css');
3 ?>
Это указание для PHP файла, что его будут пересылать клиенту как CSS. Очевидным преимуществом такого подхода вместо использования статического CSS файла является то, что генерируемый PHP файл CSS позволяет использовать преимущества функциональности PHP (что, конечно, означает одинаковое использование для различных клиентских частей).
Функция для генерации CSS3
Напишем простую функцию для построения секции кода CSS3, которая будет содержать все основные префиксы свойств CSS3. Теперь, если возникнет необходимость вставить CSS3, нужно будет только вызвать данную функции в соответствующем месте кода. Функция использует два аргумента:: (1) стандартное имя свойства, и (2) значение (включая единицы измерения).
Вот код функции:
1 function css3_props($property, $value) {
2 $css3 = "-webkit-".$property.": ".$value.";n"
3 ." -moz-".$property.": ".$value.";n"
4 ." -o-".$property.": ".$value.";n"
5 ." -khtml-".$property.": ".$value.";n"
6 ." ".$property.": ".$value.";n";
7
8 echo $css3;
9 }
Данная функция должна быть размещена в самом верху вашего PHP/CSS файла (или подключаться как внешний файл), а в коде CSS можно будет использовать ее вызов следующим образом:
1 #box-shadow {
2 width: 200px;
3 height: 200px;
4 padding: 20px;
5 <?php css3_props("box-shadow", "#ccc 5px 5px 10px"); ?>
6 }
Первые три строчки (width, height, padding) приведены для примера. Ключевая строка — последняя, в которой производится вызов функции css3_props.
Функция css3_props строит строку в переменной $css3. Строка имеет правильный синтаксис, чтобы свойство CSS выглядело обычным после генерации. В данную строку включаются префиксы, соответствующие браузерам. Аргументы, которые передаются функции должны соответствовать свойствам CSS, которые будут строиться. Последняя строка выводит окончательное сформированное значение.
Преимущества данного метода
Легко поддерживать, так как нужно будет менять значение только в одном месте
Устанавливает все специфические свойства в нужном порядке для всех свойств CSS3 в вашем CSS файле
Устанавливает стандартное свойство последним, что является хорошей практикой применения CSS
Устанавливает весь набор соответствующих свойств CSS вместе
Если нужно будет добавить еще какой-нибудь префикс, то нужно будет изменить лишь только код функции
Очевидные недостатки
Нужно знать хотя бы основы PHP (впрочем, можно воспользоваться простым копированием кода из данного урока)
Для использования и проверки функции нужен сервер, поддерживающий PHP
Если вы кодируете на PHP, то ваш текстовый редактор может не поддерживать подсказки CSS и функции автозавершения свойств
Такая функция работает только с простыми свойствами CSS3, которые имеют пару свойства/значения, как border-radius или text-shadow (то есть не работает с градиентами, анимацией, множественными фонами и так далее)
Не все префиксы необходимы для каждого свойства CSS3, так что много лишнего будет добавлено в ваш код
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.impressivewebs.com/dynamic-css3/
Перевел: Сергей Фастунов
Урок создан: 8 Сентября 2010
Просмотров: 9880
