Опубликовано автор в категориях Joomla.

Ни для кого не секрет, что по умолчанию для стилизации разметки в Joomla! принято использовать файл template.css. Однако зачастую при разработке большого проекта возникает ситуация, когда гораздо удобнее не «запихивать» все стили в один файл и в итоге получать громоздкий .css-файл, а разбить стили по разным файлам.

Например, зачастую моя разметка использует следующие .css-файлы:

  • layout.css — разметка, основные блоки
  • joomla.css — стили Joomla!
  • typo.css — элементы типографики и форм
  • menu.css — навигация (как правило, в случае использования выпадающего меню)
  • editor_content.css — стили для редактора
  • ie6only.css — лечим IE6
  • ie7only.css — в случае необходимости

Как видно, данный метод предусматривает минимум четыре запроса, в случае с IE — пять (editor_content.css используется только в backend). Даже если вы будете импортировать стили через основной файл, все равно запросов к серверу не избежать и размер ваших не будет отличатся от исходного. А наша задача минимизировать использование ресурсов сервера.

Для этого нам нужно, по возможности максимально уменьшить число запросов к серверу и уменьшить размер полученного в результате css-кода. Долгое время я использовал обычный метод сборки css с последующим кешированием файлов и дальнейшем обращении «сборщика» к ним через кеш. При этом в самом «сборщике» применялось аппаратное сжатие. В итоге мы получали один меньший файл. Например, при использовании трех файлов общим объемом 18Кб после обработки мы получали один файл размером 6Кб. Однако — это не придел. Можно уменьшить размер конечного файла вдвое.

Делается это посредством аппартной обработки css-фалов посредством PHP. Для этого ваш сборщик, я называю его template.css.php должен выглядеть так:

<?php 
 
if (extension_loaded('zlib') && !ini_get('zlib.output_compression')) @ob_start('ob_gzhandler');
header('Content-type: text/css; charset: UTF-8');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
 
define('DS', DIRECTORY_SEPARATOR);
define('PATH_ROOT', dirname(__FILE__) . DS);
 
ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
 
 
/* general tag styling */
include(PATH_ROOT . 'layout.css');
 
/* typografy styling */
include(PATH_ROOT . 'typo.css');
 
/* joomla core styling */
include(PATH_ROOT . 'joomla.css');
 
ob_end_flush();
?>

В итоге, на выходе мы получаем два больших плюса вместо 6Кб файл размером 3Кб, а также вместо 26мс на доставку запроса 15мс. По моему, плюсы очевидны.

Кликабельно

Кликабельно

Единственным возможным минусом можно считать css «в строку». Хотя, вряд ли это минус. В общем, в конечном итоге решать конечно вам, но я думаю что уменьшенный в шесть раз объем данных для css-файлов и уменьшенное почти вдвое время ответа — это весомые аргументы за.

Постовой:

Мучает вопрос, как заработать в интернете? Заработать в интернете можно, однозначно. Просто нужно знать, где в инете заработать.

Супер актуальная и модная тема — новостройки подмосковья. Даже на фоне кризиса, недвижимость остается привлекательным объектом капиталовложения. Спешите, а то новостройки москвы уже почти все закончились.Грузовые запчасти MAN

11 комментариев к записи “Эффективный CSS для Joomla! 1.5”

  1. Виктор

    Вопрос не много не в тему: Я не давно начел работать с Joomla, и не много не в куриваю. Как заставить выводить шаблон в 100% css?

    P.S. Хороший код, буду использовать.

    Ответить
  2. Hiway

    Виктор, я немного не понял сути вопроса, но если ты сформулируешь его более полно и отправишь его через форму в разделе «Вопросы», то я обязательно тебе отвечу очень полно,возможно, отдельным постом

    Ответить
  3. BUZUN

    Проблема была в ошибке в коде определения браузера для подгрузки еще и css для IE6 и IE 7
    /* ie browser */
    if (array_key_exists('HTTP_USER_AGENT', $_SERVER)) {
    $is_ie7 = strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'msie 7') !== false;
    $is_ie6 = strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'msie 6') !== false;
    if ($is_ie7 || $is_ie6) {
    if ($is_ie7) include(PATH_ROOT . 'ie7only.css');
    else if ($is_ie6) include(PATH_ROOT . 'ie6only.css');
    }
    }

    Ответить
  4. archik

    Ошибка браузера «Страница, которую вы пытаетесь просмотреть, не может быть показана, так как она использует неверную или неподдерживаемую форму компрессии. «

    Ответить
  5. Hiway

    Первая строчка

    if (extension_loaded('zlib') &amp;&amp; !ini_get('zlib.output_compression')) @ob_start('ob_gzhandler');

    Попробуй ее удалить. Возможно сервак глючно работает с zlib
    Если удалить строчку то все должно заработать. Правда сжиматься css не будет.

    Ответить
    • hiway

      Ну, априори, можно. Хотя на самом деле собрать их можно и самому:
      1. layout.css — зависит от нужной разметки.
      2. joomla.css — стандартные классы joomla! (можно взять на форуме, в документации).
      3. typo.css — можно сгенерировать здесь http://pxtoem.com/ с нужными значениями величины фонта.
      4. menu.css — навигация, то есть изначально он пустой а потом там стили меню
      5. editor_content.css — стили для редактора, я лично дублирую стили типографики и, если есть, кастомное оформление текста
      6. ie6only.css — изначально не заполнен
      7. ie7only.css — изначально не заполнен
      Вот как-то так.

      Ответить

Оставить комментарий

  • (не будет показан)