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: 3091 - 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:
  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) {
  52. '~(?xi)
  53. (?<!\b(?: # uitzonderingen... bah
  54. background-position
  55. ))
  56. :\K
  57. (?:(?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto )
  58. (?: \s (?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto ) {0,3}
  59. (?= [;}] )
  60. ~S',
  61. 'minifyHelper',
  62. '~(?x)
  63. \s*
  64. (?:
  65. # debug-CSS weghalen
  66. \Q/* REMOVE */\E
  67. (?:
  68. [\r\n]+
  69. (?! \Q/* END REMOVE */\E )
  70. .*
  71. )+
  72. [\r\n]+ \Q/* END REMOVE */\E
  73. |
  74. # commentaar, natuurlijk
  75. /\* [^*]* \*+ (?: [^/] [^*]* \*+ )* /
  76. )
  77. \s*
  78. ~',
  79. '~(?x)
  80. # nietrelevante whitespace
  81. \s+ (?! [^\'"()\r\n]* \))
  82. ~',
  83. '@(?x)
  84. (?<=[{};:,+>~]) \s+
  85. | \s+ (?=[{}:,+>~;])
  86. | ( \( [^)]* \) | " [^"]* " | \' [^\']* \' )
  87. # een ; kan natuurlijk in een string voorkomen..
  88. | ; (?: \s*; )* (?= \s* } )
  89. @',
  90. '~#(?ix)
  91. # hex-kleuren, normaliseren naar kort formaat
  92. ([a-f\d])\1
  93. ([a-f\d])\2
  94. ([a-f\d])\3
  95. ~',
  96. '~(?x)
  97. # 0/0.0(px|em|etc.)? normaliseren naar 0
  98. (?<=[:, ]) (?:0*\.)?0
  99. (?i: [a-z]{2} | % )?
  100. (?! \w )
  101. ~',
  102. '@(?xm)
  103. (?<= ^ | } )
  104. (?:
  105. # een selector met lege regels
  106. (?: ^ | \s* (?: , \s*)? )
  107. [>+~ ]?
  108. (?: [.#]? [a-z_-]+ | \*
  109. | \[[^]"\']*
  110. (?:
  111. (?: "[^"]*" | \'[^\']*\' )
  112. [^]"\']*
  113. )*
  114. ]
  115. )++
  116. )++
  117. \s*{}\s*
  118. @'
  119. ),
  120. // commentaar
  121. ' ',
  122. // whitespace
  123. ' ',
  124. // whitespace weghalen
  125. '$1',
  126. // hex-verkleining
  127. '#$1$2$3',
  128. // 0-normalisatie
  129. '0',
  130. // lege declaratie
  131. ''
  132. ),
  133. trim($input)
  134. )
  135. ));
  136.  
  137. if ($newlineAfterBrace) {
  138. $result = trim(str_replace('}', "}\n", $result));
  139. }
  140.  
  141. return $result;
  142. }
  143.  
  144. /**
  145.  * Voorbeeld
  146.  *
  147.  * Ja, niet zeuren dat er niks van klopt! :)
  148.  *
  149.  * Update: extra voorbeelden
  150.  */
  151. echo minifyCSS('
  152. body div .class #id [attr],
  153. body [attr] .class div
  154. #id {
  155. margin: 0px 5px 2px 5px; /* alleen de laatste 5px mag weg */
  156. margin: 3px 3px 3px 3px; /* gelijke set */
  157. margin: 0% 0 0px 0em; /* verschillende notaties van 0, moet 0 worden */
  158. background: url(blaat;); /* ; in een url, de laatste ; moet wel weg */
  159. }
  160.  
  161. body , html {
  162. margin: 0px;
  163. padding: 0;
  164. background-color : #000;
  165. }
  166.  
  167. body + a * > html {
  168. color: navy ;
  169. }
  170. ');
  171.  
  172. /*
  173.  Uit het voorbeeld zou moeten komen:
  174.  
  175. 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}
  176. */
  177. ?>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

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