login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > PHP > Overige scripts > CSS minifier

CSS minifier

Auteur: Richard - 06 november 2010 - 15:11 - Gekeurd door: Stijn - Hits: 3082 - Aantal punten: (0 stemmen)




Handig scriptje dat ik op het web ben tegengekomen om CSS te verkleinen.
Zie hieronder de uitleg van de maker:

Jawel, een simpele, kleine, regexgebaseerd (JA!) CSS-minifier.

Uitleg is nauwelijks nodig, de code spreekt voor zich: stop er een stuk CSS in en je krijgt een sterk verkleinde string terug.

Let op(1): het haalt alleen whitespace weg, attributen zoals "margin: 1px 0 1px 0" worden niet naar "margin:1px 0" verkleind. (sinds 22-03 wel, margin: 5px 0px; margin-top: 3px; zal hij wel niks mee doen)

Let op(2): in principe zou er niks fouten moeten gaan. Er is een kleine uitzondering: commentaar binnen een url(mijnurl.png) wordt ook weggehaald. Ja, dit is volgens de standaard toegestaan maar ik ben nog geen enkel geval tegengekomen waar dit zo was. Dus dit verander ik waarschijnlijk ook niet.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. /** 
  3.  * Een helperfunctie voor PHP < 5.3.0 
  4.  */ 
  5. function minifyHelper($match) { 
  6.     /** 
  7.      * Alles moet lowercase, maakt verder niet uit maar is 
  8.      * handig bij vergelijkingen :-) 
  9.      */ 
  10.     $entries = array_map( 
  11.         'strtolower', 
  12.         explode(' ', $match[0]) 
  13.     ); 
  14.  
  15.     switch(count($entries)) { 
  16.     case 4: 
  17.         /** 5px 5px 5px 5px => 5px 5px 5px */ 
  18.         if ($entries[3] === $entries[1]) { 
  19.             // er zijn nog 3 over, doorvallen naar die case 
  20.             array_pop($entries); 
  21.         } else { 
  22.             break; 
  23.         } 
  24.         // DOORVALLEN 
  25.     case 3: 
  26.         /** 5px 5px 5px => 5px 5px */ 
  27.         if ($entries[2] === $entries[0]) { 
  28.             // nu dus nog 2 over... 
  29.             array_pop($entries); 
  30.         } else { 
  31.             break; 
  32.         } 
  33.         // DOORVALLEN 
  34.     case 2: 
  35.         /** 5px 5px => 5px */ 
  36.         if ($entries[1] === $entries[0]) { 
  37.             array_pop($entries); 
  38.         } 
  39.     } 
  40.  
  41.     return implode(' ', $entries); 
  42. } 
  43.  
  44. /** 
  45.  * CSS optimaliseren voor laag bandbreedtegebruik 
  46.  * 
  47.  * @param string $input 
  48.  * @return string 
  49.  * @author Richard van Velzen <rvanvelzen@expert-shops.com> 
  50.  */ 
  51. function minifyCSS($input, $newlineAfterBrace = false) { 
  53.         '~(?xi) 
  54.             (?<!\b(?: # uitzonderingen... bah 
  55.                 background-position 
  56.             )) 
  57.             :\K 
  58.             (?:(?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto ) 
  59.             (?: \s (?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto ) {0,3} 
  60.             (?= [;}] ) 
  61.         ~S', 
  62.         'minifyHelper', 
  65.                 '~(?x) 
  66.                     \s* 
  67.                     (?: 
  68.                         # debug-CSS weghalen 
  69.                         \Q/* REMOVE */\E 
  70.                         (?: 
  71.                           [\r\n]+ 
  72.                           (?! \Q/* END REMOVE */\E ) 
  73.                           .* 
  74.                         )+ 
  75.                         [\r\n]+ \Q/* END REMOVE */\E 
  76.                     | 
  77.                         # commentaar, natuurlijk 
  78.                         /\* [^*]* \*+ (?: [^/] [^*]* \*+ )* / 
  79.                     ) 
  80.                     \s* 
  81.                 ~', 
  82.                 '~(?x) 
  83.                     # nietrelevante whitespace 
  84.                     \s+ (?! [^\'"()\r\n]* \)) 
  85.                 ~', 
  86.                 '@(?x) 
  87.                     (?<=[{};:,+>~]) \s+ 
  88.                     | \s+ (?=[{}:,+>~;]) 
  89.                     | ( \( [^)]* \) | " [^"]* " | \' [^\']* \' ) 
  90.                     # een ; kan natuurlijk in een string voorkomen.. 
  91.                     | ; (?: \s*; )* (?= \s* } ) 
  92.                 @', 
  93.                 '~#(?ix) 
  94.                     # hex-kleuren, normaliseren naar kort formaat 
  95.                     ([a-f\d])\1 
  96.                     ([a-f\d])\2 
  97.                     ([a-f\d])\3 
  98.                 ~', 
  99.                 '~(?x) 
  100.                     # 0/0.0(px|em|etc.)? normaliseren naar 0 
  101.                     (?<=[:, ]) (?:0*\.)?0 
  102.                     (?i: [a-z]{2} | % )? 
  103.                     (?! \w ) 
  104.                 ~', 
  105.                 '@(?xm) 
  106.                     (?<= ^ | } ) 
  107.                     (?: 
  108.                         # een selector met lege regels 
  109.                         (?: ^ | \s* (?: , \s*)? ) 
  110.                         [>+~ ]? 
  111.                         (?: [.#]? [a-z_-]+ | \* 
  112.                             | \[[^]"\']* 
  113.                                 (?: 
  114.                                     (?: "[^"]*" | \'[^\']*\' ) 
  115.                                     [^]"\']* 
  116.                                 )* 
  117.                             ] 
  118.                         )++ 
  119.                     )++ 
  120.                     \s*{}\s* 
  121.                 @' 
  122.             ), 
  124.                 // commentaar 
  125.                 ' ', 
  126.                 // whitespace 
  127.                 ' ', 
  128.                 // whitespace weghalen 
  129.                 '$1', 
  130.                 // hex-verkleining 
  131.                 '#$1$2$3', 
  132.                 // 0-normalisatie 
  133.                 '0', 
  134.                 // lege declaratie 
  135.                 '' 
  136.             ), 
  137.             trim($input) 
  138.         ) 
  139.     )); 
  140.  
  141.     if ($newlineAfterBrace) { 
  142.         $result = trim(str_replace('}', "}\n", $result)); 
  143.     } 
  144.  
  145.     return $result; 
  146. }
  147.  
  148. /**
  149.  * Voorbeeld
  150.  *
  151.  * Ja, niet zeuren dat er niks van klopt! :)
  152.  *
  153.  * Update: extra voorbeelden
  154.  */
  155. echo minifyCSS('
  156. body    div  .class #id [attr],
  157. 	    body [attr] .class     div
  158. 			#id {
  159. 	margin: 0px 5px 2px 5px; /* alleen de laatste 5px mag weg */
  160. 	margin: 3px 3px 3px 3px; /* gelijke set */
  161. 	margin: 0% 0 0px 0em; /* verschillende notaties van 0, moet 0 worden */
  162. 	background: url(blaat;); /* ; in een url, de laatste ; moet wel weg */
  163. }
  164.  
  165. body , html {
  166.     margin: 0px;
  167.     padding: 0;
  168.     background-color :  #000;
  169. }
  170.  
  171.    body  + a * > html {
  172.       color: navy ;
  173. }
  174. ');
  175.  
  176. /*
  177.  Uit het voorbeeld zou moeten komen:
  178.  
  179. body div .class #id [attr],body [attr] .class div #id{margin:0 5px 2px;margin:3px;margin:0;background:url(blaat;)}body,html{margin:0;padding:0;background-color:#000}body+a *>html{color:navy}
  180. */
  181. ?>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (3)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.029s