compress CSS code – compressor

Kompresja kodu CSS, gotowa funkcja PHP która za pomocą wyrażeń regularnych usuwa zbędne znaki z kaskadowego arkusza stylów – CSS tym samym zmniejszając jego rozmiar, co prowadzi do szybszego wczytania strony (stylów) jak i zmniejszenia zużycia transferu (należy pamiętać że plik ze stylem jest wczytywany z każdym żądaniem przeglądarki, dlatego nawet mała różnica rozmiaru ma znaczenie)

Działanie można przetestować na: Kompresja CSS

Aktualnie funkcja usuwa wszystko co nie potrzebne, zachowuje składnię CSS. Dzięki zachowaniu składni arkusz po kompresji będzie działał prawidłowo.

Aktualnie usuwane zbędne rzeczy takie jak:

  • Tabulatory – TAB – 0×09 (\t, \x09)
  • Tabulator Pionowy – vertical tab – 0×0B (\x0B)
  • Znak nowej linii – 0×0A (\n, \x0A)
  • Znak powrotu karetki – 0×0D (\r, \x0D)
  • Puste znaki – 0×00 (\0, \x00)
  • Każdą podwójną spację (i więcej np. 3, 4 i tak dalej) 0×20 0×20 – (\x20\x20)
  • Każdą pojedynczą spację, lecz tylko w wybranych i dozwolonych miejscach (zmienna $char_css)
  • Wszystkie komentarze
  • Skraca kolory o ile to możliwe w zapisie HEX z np. z #aaffaa na #afa
  • Usuwa średnik z ostatniej reguły, ponieważ jest zbędny

Zostało dodane usuwanie zbędnych spacji po znaku @ (małpa) oraz zmiana tabulatorów od jednego w górę na pojedynczą spację, oraz zamiana spacji od dwóch w górę na jedną

function compress_css($css_code) {
/*********************
//
//Compress CSS by tosiek - https://tosiek.pl/
//
*********************/
//Special CSS characters after and before the spaces are removed
//do not use ')' !!! - this causes a bug in Internet Explorer
	$char_css='{|}|(|;|:|,|\'|"|@';
	//pattern to shortening hex colour
	$hex_char='[a-f0-9]';
	//
	// Arrays
	//
	//array with pattern
	$pattern=array(
		//new lines(\n and \r)
		"/\x0A/","/\x0D/",
		//vertical tab and tab
		"/\x0B/","/\x09{1,}/",
		//NULL bytes (\0)
		"/\\x00/",
		//double spaces and more, more
		"/\x20{2,}/",
		//remove spaces with $char_css, after and before
		"/([{$char_css}]+)\x20/","/\x20([{$char_css}]+)/",
		//remove all comments
		"!/\*[^*]*\*+([^/][^*]*\*+)*/!",
		//short hex colour
		"/#({$hex_char})\\1({$hex_char})\\2({$hex_char})\\3/i",
		//remove last ';'
		"/;}/",
	);
	//array with replacement
	$replacement=array(
		//new lines(\n and \r)
		'','',
		//vertical tab and tab
		'',"\x20",
		//NULL bytes (\0)
		'',
		//double spaces and more, more
		"\x20",
		//remove spaces with $char_css, after and before
		'$1','$1',
		//remove all comments
		'',
		//short hex colour
		'#\1\2\3',
		//remove last ';'
		"}",
	);
	// strlen() before compress
	$start=strlen($css_code);
	//Compress CSS with regular expressions
	$replace=preg_replace($pattern,$replacement,$css_code,-1);
	// strlen() after compress
	$final=strlen($replace);
	//counts the difference in characters
	$exhed=$start-$final;
	//counts the difference in percentages
	$compression=round(($exhed)/$start*100,2);
	//Return compress CSS code with info (comment) in new line
	return $replace."\n".'/* Poczatkowy rozmiar: '.$start.' bajtow; Po kompresji: '.$final.' bajtow; Zmniejszono o: '.$exhed.' bajtow ('.$compression.'% procent) */';
}

przykładowe wykorzystanie z użyciem pliku style.css:

<?php
$style = file_get_contents(dirname(__FILE__).'style.css');
$style = compress_css($style);
echo $style;
?>

Podany powyżej kod po wywołaniu go, wyświetli nam skompresowany kod z pliku style.css wraz z informacją o rozmiarze przed i po kompresji oraz oszczędności w procentach.

/* Poczatkowy rozmiar: 37 bajtow; Po kompresji: 14 bajtow; Zmniejszono o: 23 bajtow (62.16% procent) */

Przykładowy kod przed kompresją (należy zwrócić uwagę na niewidoczne znaki takie jak spacje, tabulatory i przejścia do nowych linii – entery)

	*  {
margin:   0		 6;
  }

Oraz po kompresji:

*{margin:0 6}
/* Poczatkowy rozmiar: 37 bajtow; Po kompresji: 13 bajtow; Zmniejszono o: 24 bajtow (64.86% procent) */