
- •Введение в css
- •Единое стилевое оформление множества документов
- •Централизованное хранение
- •Базовый синтаксис css
- •Правила применения стилей
- •Форма записи
- •Имеет приоритет значение, указанное в коде ниже
- •Значения
- •Комментарии
- •Значения стилевых свойств
- •Проценты
- •Размеры
- •Относительные единицы
- •Абсолютные единицы
- •По шестнадцатеричному значению
- •По названию
- •С помощью rgb
- •Ключевые слова
- •Псевдоклассы
- •Псевдоклассы, определяющие состояние элементов
- •Псевдоклассы, имеющие отношение к дереву документа
- •Псевдоклассы, задающие язык текста
- •Группирование
- •Валидация css
- •Проверить uri
- •Проверить загруженный файл
- •Проверить набранный текст
- •Выбор версии css
- •Написание эффективного кода
- •Размещайте каскадные таблицы стилей в отдельном файле
- •Удаляйте неиспользуемые селекторы
- •Применяйте группирование
- •Используйте универсальные свойства
- •Форматирование кода
- •Минимизация кода
- •Библиотека minify
Библиотека minify
Если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.
Ссылка на проект minify http://code.google.com/p/minify/
Библиотека minify существует как отдельно, так и в виде плагина для WordPress.
Процесс использования библиотеки следующий. Скачиваете архив, внутри него лежит каталог min, который необходимо переписать на сервер. Сжатие CSS-файла происходит довольно просто, вместо обычного пути к стилевому файлу теперь указываем:
http://example.ru/min/?f=themes/default/style.css
В параметре f указывается путь к CSS-файлу относительно корня сайта. Два и более файла пишутся через запятую:
http://example.ru/min/?f=themes/default/style.css,themes/default/cms.css
Также процесс получения адреса можно автоматизировать, перейдя по адресу http://example.ru/min, откроется страница, где предлагается указать путь к файлам, которые вы желаете минимизировать (рис. 22.5).
Рис. 22.5. Страница для управления файлами
Кнопки со стрелками вверх и вниз нужны для изменения порядка файлов, а кнопка «x» для удаления файла из списка. Проверка правильности пути осуществляется автоматически, в случае ошибки появится кнопка с надписью «404!», как показано на рисунке выше. Для добавления еще одного файла в список служит кнопка «Add file». После того, как все файлы указаны, пути к ним заданы корректно, что подтверждается наличием галочки напротив каждого файла, можно нажать кнопку «Update». Ниже на странице появится ссылка на новый комбинированный файл (текст с надписью URI) и тег <link> (текст с надписью HTML), который требуется вставить себе на страницу взамен старого (рис. 22.6).
Рис. 22.6. Результат минимизации
Согласно тестам над WordPress использование библиотеки позволяет сократить количество HTTP-запросов и уменьшить объем CSS и JavaScript-файлов до 70%.
Кроме приведенных методов минимизации CSS-файлов имеются также решения, позволяющие архивировать файлы утилитой gzip прямо на сервере и отдавать браузеру упакованную версию. Современные браузеры прекрасно понимают gzip и распаковывают его на месте. Весь процесс происходит автоматически и приводит к существенному сокращению объема передаваемых по сети файлов. Вопросы настройки gzip выходят за рамки самоучителя, поэтому я не буду на них останавливаться. Всем заинтересованным рекомендую статьи по этим ссылкам.
-
Модуль mod_deflate
-
Сжатие ответов Веб-сервера Apache средствами модуля mod_deflate
-
Настройка mod_gzip – сжатие трафика в Apache