Как веб разработчики, мы часто разделяем стили между несколькими таблицами стилей для более логичной структуры и легкого изменения в дальнейшем. Однако, это увеличивает количество запросов на сервер, что выливается в более медленную загрузку страниц. Используя PHP мы можем сразу убить двух зайцев: иметь несколько таблиц стилей, и использовать всего один запрос для обращения к ним всем.
Подготовка
Перед оптимизацией CSS файлов, нам необходимы стили для работы. Давайте создадим несколько файлов с стилями:
// main.css
// CSS для примера
body {
width: 800px;
margin: 0 auto;
color: grey;
}
#wrapper {
margin-top: 30px;
background: url(../images/cats.png);
}
// typography.css
// CSS для примера
body {
font-family: Arial, san-serif;
font-weight: bold;
}
strong {
font-size: 120%;
}
// forms.css
// CSS для примера
form {
position: relative;
top: 400px;
z-index: 99;
}
input {
height: 50px;
width: 400px;
}
PHP
Нам необходимо извлечь содержание всех файлов и соединить в определенном порядке. Значит наш скрипт должен получить имена таблиц стилей через УРЛ параметры, открыть эти файлы и соединить.
<?php
//Определяем переменные
// --- NOTE: PATHS NEED TRAILING SLASH ---
$cssPath = './css/';
if (isset($_GET['q'])) {
$files = $_GET['q'];
// Получаем массив файлов
//Давайте убедимся, что в файловых именах нет страшных символов :) .
foreach ($files as $key => $file) {
$files[$key] = str_replace(array('/', '\\', '.'), '', $file);
}
$cssData = '';
foreach ($files as $file) {
$cssFileName = $cssPath . $file . '.css';
$fileHandle = fopen($cssFileName, 'r');
$cssData .= "\n" . fread($fileHandle, filesize($cssFileName));
fclose($fileHandle);
}
}
// Скажи браузеру, что у нас CSS файл
header("Content-type: text/css");
if (isset($cssData)) {
echo $cssData;
echo "\n\n// Generated: " . date("r");
} else {
echo "// Files not avalable or no files specified.";
}
?>
Более подробно о каждой части кода
<?php
//Определяем переменные
// --- NOTE: PATHS NEED TRAILING SLASH ---
$cssPath = './css/';
if (isset($_GET['q'])) {
$files = $_GET['q'];
// Got the array of files!
//Давайте убедимся, что в файловых именах нет страшных символов :) .
foreach ($files as $key => $file) {
$files[$key] = str_replace(array('/', '\\', '.'), '', $file);
}
Этот код устанавливает путь к папке со стилями и проверяет на наличие файлов. Путь к папке должен иметь слеши вначале и в конце названия папки, так как в противном случае у нас будет масса ошибок. Далее мы проверяем каждое имя файла и удаляем точки и/или слеши.
$cssData = '';
foreach ($files as $file) {
$cssFileName = $cssPath . $file . '.css';
$fileHandle = fopen($cssFileName, 'r');
$cssData .= "\n" . fread($fileHandle, filesize($cssFileName));
fclose($fileHandle);
}
}
Теперь нам необходимо создать общую таблицу стилей из файлов. Для этого мы запускаем цикл, который просматривает массив файлов, открывает каждый файл и соединяет в единый файл. "\n" добавляет новую строку для порядка и чистоты. Функция filesize() используется для того, чтобы узнать длину файла и передать fread().
// Скажи браузеру, что у нас CSS файл
header("Content-type: text/css");
if (isset($cssData)) {
echo $cssData;
echo "\n\n// Generated: " . date("r");
} else {
echo "// Files not avalable or no files specified.";
}
?>
Последняя часть кода передает все стили браузеру. Это значит, что нам необходимо сказать PHP, что мы передаем CSS информацию и что PHP должно проинформировать об этом браузер. Мы делаем это с помощью функции header(), и устанавливаем Content-type: text/css. Далее мы передаем CSS клиенту. Но перед этим проверяем наличие CSS стилей в файле. Если их нет, значит это означает, что названия CSS файлов не были переданы. Если же у нас есть файлы мы их передаем и добавляем сообщение о генерации.
Проверка
Теперь время проверить скрипт. Создаем папку и файлы в ней. Взгляните на структуру папки ниже. Если Вам необходимо другая структура, тогда не забудьте поменять пути.
Теперь загрузите все файлы в корень сайта и обратитесь к файлу index.php через браузер. Вас должна встретить фраза 'Files not available or no files specified' (файлы не доступны или не указаны). Это означет, что мы не дали названия файлов, которые необходимо соединить. Однако, хорошая новость - что все работает без ошибок. Давайте попробуем напечатать в браузере 'index.php?q[]=main'. У Вас на экране появится содержание файла main.css. Если нам необходимо извлечь несколько файлов и объединить их, нам необходимо отправить следющий запрос 'index.php?q[]=main&q[]=forms'. Как Вы видите мы можем повторять 'q[]=' сколько угодно раз. Вы можете объединить в один файл хоть 50 таблиц стилей.
Заключение
Данный метод может быть очень полезным, и иметь множество плюсов. У Вас может быть общая таблица стилей для всего сайта, и отдельная, например, для страниц с формами.
Небольшое предупреждение: если Вы поместите файл index.php в любую папку (не в папку с CSS), тогда Вам необходимо прописывать относительные пути к фоновым изображениям так, как будто index.php является Вашей таблицей стилей. Так будет думать браузер.