Ни для кого не секрет, что по умолчанию для стилизации разметки в 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-файлов и уменьшенное почти вдвое время ответа — это весомые аргументы за.

Постовой:

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

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

• Виктор says:

  декабря 24, 2008 at 12:08

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

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

  Reply
• Hiway says:

  декабря 24, 2008 at 12:47

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

  Reply
• Виктор says:

  декабря 24, 2008 at 15:07

  Оке, написал) Буду признателен за ответ...

  Reply
• Hiway says:

  декабря 25, 2008 at 21:54

  Ответил, читай в последнем посте или в «Вопросах»

  Reply
• BUZUN says:

  января 14, 2009 at 00:22

  а как теперь это включить в index.php? (в какое место и каким образом)

  Reply
• BUZUN says:

  января 14, 2009 at 08:54

  Соори снимается вопрос

  Reply
• BUZUN says:

  января 14, 2009 at 09:28

  Проблема была в ошибке в коде определения браузера для подгрузки еще и 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'); } }

  Reply
• archik says:

  апреля 14, 2009 at 05:11

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

  Reply
• Hiway says:

  апреля 14, 2009 at 18:46

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

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

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

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

  Reply
• Ad says:

  ноября 28, 2009 at 03:55

  А можно попросит у вас пустые/шаблонные указаные выше файлы css?

  Reply
  • hiway says:

    ноября 28, 2009 at 08:49

    Ну, априори, можно. Хотя на самом деле собрать их можно и самому:

    1. layout.css — зависит от нужной разметки.

    2. joomla.css — стандартные классы joomla! (можно взять на форуме, в документации).

    3. typo.css — можно сгенерировать здесь pxtoem.com с нужными значениями величины фонта.

    4. menu.css — навигация, то есть изначально он пустой а потом там стили меню

    5. editor_content.css — стили для редактора, я лично дублирую стили типографики и, если есть, кастомное оформление текста

    6. ie6only.css — изначально не заполнен

    7. ie7only.css — изначально не заполнен

    Вот как-то так.

    Reply