PHP скрипт для комбинирования и сжатия CSS файлов

Загрузка нескольких файлов CSS на больших веб сайтах иногда может занимать длительное время. Ситуацию можно улучшить сжав CSS код, удалив комментарии и пробелы. Ниже представлен скрипт PHP, который комбинирует несколько файлов в один и удаляет все комментарии и пробелы, сокращая размер файла.

header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
  /* Удаляем комментарии */
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  /* Удаляем табуляции, пробелы, переводы строки и так далее */
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  return $buffer;
}
/* Список CSS файлов */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');
ob_end_flush();
Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Августа 2012 09:55
    stupidlovejoy
    Крутой скрипт, было бы неплохо если бы для JS такой же был!
    • 4 Августа 2012 16:17
      Inch
      а если попробовать просто в header`e изменить тип файла? Сработает ли
  • 4 Августа 2012 16:47
    exe6nik
    Извините что пиши ни в тему. Как сделать проверку передоверяемых данных в GET запросах. в моем случае передается www.xxx.xx/stat.php?data=2012-06, хотелось бы запретить чтоб не передавались другие параметры кроме 2012-06. надеюсь что правильно сформулировал вопрос. ЗА РАНЕЕ БЛАГОДАРЕН.
  • 4 Августа 2012 21:24
    fedor_kkk
    Вопрос чайника :-) я конечно извиняюсь, но как и куда его вставить, что в css, а что в html ?
    • 5 Августа 2012 01:29
      soprun.vladislav
      Ответ для чайника ) Конечно в .css ты его не вставишь. Самый простой вариант его использования это в самом файле в заголовок вставить стили. index.php
      <!DOCTYPE HTML>
      <html lang="ru"><head><base href=http://<?php echo $_SERVER['HTTP_HOST'] ?> >
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>Документ без названия</title>
      <style type="text/css">
      <?php
      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;
      }
      /* your css files */
      include('style.css');
      ob_end_flush();
      ?>
      </style>
      </head>
      И итоге получим при открытии страницы
      <!DOCTYPE HTML>
      <html lang="ru"><head><base href=http://subdomain.test1.ru >
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>Документ без названия</title>
      <style type="text/css">
      @charset "utf-8";html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin:0; padding:0; display:block;}img, fieldset{border:0;}img{max-width:100%; height:auto; width:auto\9;}body {background: url(img/background.jpg) center top no-repeat #0b0908;margin:0;}#page {width: 980px; margin:0 auto; min-height: 800px;}nav#topnav {width:1082px;height:85px;background:url(img/top_menu.png) left top no-repeat;position: absolute;top: 0;}nav#topnav ul {margin:0 0 0 18px; padding:0; list-style: none; overflow:hidden;}nav#topnav li {float:left;}nav#topnav li a {height:70px; background-image:url(img/menu_btns.png); background-repeat:no-repeat;}nav#topnav li a#home {width:124px; background-position: 0 -73px;}nav#topnav li a#home:hover {background-position: 0 0;}nav#topnav li a#forums {width:146px; background-position: -124px -73px;}nav#topnav li a#forums:hover {background-position: -124px 0;}nav#topnav li a#conng {width:210px; background-position: -270px -73px;}nav#topnav li a#conng:hover {background-position: -270px 0;}nav#topnav li a#armory {width:114px; background-position: -480px -73px;}nav#topnav li a#armory:hover {background-position: -480px 0;}nav#topnav li a#staff {width:98px; background-position: -594px -73px;}nav#topnav li a#staff:hover {background-position: -594px 0;}nav#topnav li a#changelog {width:170px; background-position: -692px -73px;}nav#topnav li a#changelog:hover {background-position: -692px 0;}#wrapper {width: 980px; margin:350px auto 20px;}</style>
      </head>
      
    • 5 Августа 2012 01:40
      soprun.vladislav
      Данный "скрипт" позволяет комбинировать разные стили, в зависимости от страницы т.е. Пример для CMS WordPress
      <style type="text/css">
      <?php
      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;
      }
      /* your css files */
      include('style.css');
      if ( is_home() ) {include('is_home.css');};
      if ( is_archive() ) {include('is_archive.css');};
      if ( is_singular() ) {include('is_singular.css');};
      ob_end_flush();
      ?>
      </style>
      в итоге, есть общий файл "style.css" вставляется на все страницы, тут могу быть общие стили и т.д. при открытии главной добавятся стили которые нужны на главной, а на других нет. тоже самое будет и со страницей архива, записи или страницы. добавятся только необходимы стили. """"что позволит сократить количество запросов."""" на самом деле геморроя будет больше )
      • 5 Августа 2012 12:17
        fedor_kkk
        Спасибо! Работает :-)
    • 23 Августа 2012 02:39
      somenumboola
      Можно также сделать как у самого ruseller-а. Засунуть в папочку min скрипт (index.php) и передавать ему названия файлов.
      <?php
      $files = explode(',',$_GET['f']);
      function compress($buffer) { /* Удаляем комментарии */ $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); /* Удаляем табуляции, пробелы, переводы строки и так далее */ $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); return $buffer;
      }
      $css_path = '' // При необходимости, путь к таблицам стилей.
      ob_start();
      foreach($files as $file)
      {
      if(file_exists($css_path . $file)) include($css_path . $file);
      }
      $buffer = ob_get_clean();
      echo compress($buffer);
      
      А в самом шаблоне
      <link rel="stylesheet" href="*путь_к_файлу*/min/f=css/style.css,css/style1.css,css/style2.css*и_так_далее*" type="text/css"/>
      
      • 12 Июля 2013 12:29
        Дзирт_До_Урден
        Если в таблице стилей написано:
        #menu li a{что-то там}
        то получается:
        #menulia{что-то там}
        соответственно был id="menu" стал id="menulia" и получается, что ничего не получается... Может я чего-то не так понял ???
        • 2 Января 2015 00:36
          mikola69
          Такого быть не должно, данный скрипт убирает двойные пробелы. Если у тебя такое происходит, то значит между #menu и li двойной пробел. Пример:
          #menu(двойной пробел)li => #menuli
          #menu(одинарный пробел)li => #menu li
          
  • 6 Августа 2012 16:00
    San4o
    явно кому пригодится, но опытные вебмастера пользуются онлайн-сервисами, перед тем, как закачать такие файлы на сервер :)
    • 12 Августа 2012 00:57
      lazyproger
      омг, что за бред
  • 8 Сентября 2012 11:11
    Rasmusok
    Бред чистой воды! Скрипт туповат и бесполезен.
    • 6 Ноября 2012 01:41
      malina95
      Этот чкрипт не бесполезен, представь если у тебя например 10 файлов стилей по 20кб и ты их все подключаешь, прикинь сколько времени уйдёт, а этот скрипт обрезает всё что не надо и скорость повышается на треть
      • 14 Мая 2013 18:11
        klacc111
        Полностью с вами согласен! Уже прирост будет на скорости передачи файла, а уж как браузеры любят такой код..
  • 28 Августа 2014 20:09
    Макс Нахимов
    Этот скрипт убог. Мой вес страницы увеличился на 200 кб. Это ужас просто. Говорите что долго подключается файл css. Ну тогда не покупайте говно хостинги, на нормальном vds никогда долго не грузятся файлы, особенно js, css.
    • 2 Января 2015 00:31
      mikola69
      Причем тут хостинг. Грузит браузер пользователя, если у тебя большие css файлы, то и страница будет дольше грузится, не зависимо от хостинга.
  • 8 Апреля 2015 11:35
    Roman Baranov
    скрипт достойный.у меня dle в какой файл скрипт вставлять,в индех.рнр тут полные пути надо прописывать до шаблона /* Список CSS файлов */ 11 include('master.css'); 12 include('typography.css'); 13 include('grid.css'); 14 include('print.css'); 15 include('handheld.css'); 16 ob_end_flush();
^ Наверх ^