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: |
<?php
/**
* Een helperfunctie voor PHP < 5.3.0
*/
function minifyHelper($match) {
/**
* Alles moet lowercase, maakt verder niet uit maar is
* handig bij vergelijkingen :-)
*/
$entries = array_map(
'strtolower',
explode(' ', $match[0])
);
switch(count($entries)) {
case 4:
/** 5px 5px 5px 5px => 5px 5px 5px */
if ($entries[3] === $entries[1]) {
// er zijn nog 3 over, doorvallen naar die case
array_pop($entries);
} else {
break;
}
// DOORVALLEN
case 3:
/** 5px 5px 5px => 5px 5px */
if ($entries[2] === $entries[0]) {
// nu dus nog 2 over...
array_pop($entries);
} else {
break;
}
// DOORVALLEN
case 2:
/** 5px 5px => 5px */
if ($entries[1] === $entries[0]) {
array_pop($entries);
}
}
return implode(' ', $entries);
}
/**
* CSS optimaliseren voor laag bandbreedtegebruik
*
* @param string $input
* @return string
* @author Richard van Velzen <rvanvelzen@expert-shops.com>
*/
function minifyCSS($input, $newlineAfterBrace = false) {
$result = trim(preg_replace_callback(
'~(?xi)
(?<!\b(?: # uitzonderingen... bah
background-position
))
:\K
(?:(?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto )
(?: \s (?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto ) {0,3}
(?= [;}] )
~S',
'minifyHelper',
preg_replace(
array(
'~(?x)
\s*
(?:
# debug-CSS weghalen
\Q/* REMOVE */\E
(?:
[\r\n]+
(?! \Q/* END REMOVE */\E )
.*
)+
[\r\n]+ \Q/* END REMOVE */\E
|
# commentaar, natuurlijk
/\* [^*]* \*+ (?: [^/] [^*]* \*+ )* /
)
\s*
~',
'~(?x)
# nietrelevante whitespace
\s+ (?! [^\'"()\r\n]* \))
~',
'@(?x)
(?<=[{};:,+>~]) \s+
| \s+ (?=[{}:,+>~;])
| ( \( [^)]* \) | " [^"]* " | \' [^\']* \' )
# een ; kan natuurlijk in een string voorkomen..
| ; (?: \s*; )* (?= \s* } )
@',
'~#(?ix)
# hex-kleuren, normaliseren naar kort formaat
([a-f\d])\1
([a-f\d])\2
([a-f\d])\3
~',
'~(?x)
# 0/0.0(px|em|etc.)? normaliseren naar 0
(?<=[:, ]) (?:0*\.)?0
(?i: [a-z]{2} | % )?
(?! \w )
~',
'@(?xm)
(?<= ^ | } )
(?:
# een selector met lege regels
(?: ^ | \s* (?: , \s*)? )
[>+~ ]?
(?: [.#]? [a-z_-]+ | \*
| \[[^]"\']*
(?:
(?: "[^"]*" | \'[^\']*\' )
[^]"\']*
)*
]
)++
)++
\s*{}\s*
@'
),
array(
// commentaar
' ',
// whitespace
' ',
// whitespace weghalen
'$1',
// hex-verkleining
'#$1$2$3',
// 0-normalisatie
'0',
// lege declaratie
''
),
trim($input)
)
));
if ($newlineAfterBrace) {
$result = trim(str_replace('}', "}\n", $result));
}
return $result;
}
/**
* Voorbeeld
*
* Ja, niet zeuren dat er niks van klopt! :)
*
* Update: extra voorbeelden
*/
echo minifyCSS('
body div .class #id [attr],
body [attr] .class div
#id {
margin: 0px 5px 2px 5px; /* alleen de laatste 5px mag weg */
margin: 3px 3px 3px 3px; /* gelijke set */
margin: 0% 0 0px 0em; /* verschillende notaties van 0, moet 0 worden */
background: url(blaat;); /* ; in een url, de laatste ; moet wel weg */
}
body , html {
margin: 0px;
padding: 0;
background-color : #000;
}
body + a * > html {
color: navy ;
}
');
/*
Uit het voorbeeld zou moeten komen:
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}
*/
?>
<?php /** * Een helperfunctie voor PHP < 5.3.0 */ function minifyHelper($match) { /** * Alles moet lowercase, maakt verder niet uit maar is * handig bij vergelijkingen :-) */ 'strtolower', ); switch(count($entries)) { case 4: /** 5px 5px 5px 5px => 5px 5px 5px */ if ($entries[3] === $entries[1]) { // er zijn nog 3 over, doorvallen naar die case } else { break; } // DOORVALLEN case 3: /** 5px 5px 5px => 5px 5px */ if ($entries[2] === $entries[0]) { // nu dus nog 2 over... } else { break; } // DOORVALLEN case 2: /** 5px 5px => 5px */ if ($entries[1] === $entries[0]) { } } } /** * CSS optimaliseren voor laag bandbreedtegebruik * * @param string $input * @return string * @author Richard van Velzen <rvanvelzen@expert-shops.com> */ function minifyCSS($input, $newlineAfterBrace = false) { '~(?xi) (?<!\b(?: # uitzonderingen... bah background-position )) :\K (?:(?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto ) (?: \s (?:\d*\.)?\d+ (?: [a-z]{2} | %)? | auto ) {0,3} (?= [;}] ) ~S', 'minifyHelper', '~(?x) \s* (?: # debug-CSS weghalen \Q/* REMOVE */\E (?: [\r\n]+ (?! \Q/* END REMOVE */\E ) .* )+ [\r\n]+ \Q/* END REMOVE */\E | # commentaar, natuurlijk /\* [^*]* \*+ (?: [^/] [^*]* \*+ )* / ) \s* ~', '~(?x) # nietrelevante whitespace \s+ (?! [^\'"()\r\n]* \)) ~', '@(?x) (?<=[{};:,+>~]) \s+ | \s+ (?=[{}:,+>~;]) | ( \( [^)]* \) | " [^"]* " | \' [^\']* \' ) # een ; kan natuurlijk in een string voorkomen.. | ; (?: \s*; )* (?= \s* } ) @', '~#(?ix) # hex-kleuren, normaliseren naar kort formaat ([a-f\d])\1 ([a-f\d])\2 ([a-f\d])\3 ~', '~(?x) # 0/0.0(px|em|etc.)? normaliseren naar 0 (?<=[:, ]) (?:0*\.)?0 (?i: [a-z]{2} | % )? (?! \w ) ~', '@(?xm) (?<= ^ | } ) (?: # een selector met lege regels (?: ^ | \s* (?: , \s*)? ) [>+~ ]? (?: [.#]? [a-z_-]+ | \* | \[[^]"\']* (?: (?: "[^"]*" | \'[^\']*\' ) [^]"\']* )* ] )++ )++ \s*{}\s* @' ), // commentaar ' ', // whitespace ' ', // whitespace weghalen '$1', // hex-verkleining '#$1$2$3', // 0-normalisatie '0', // lege declaratie '' ), ) )); if ($newlineAfterBrace) { } return $result; } /** * Voorbeeld * * Ja, niet zeuren dat er niks van klopt! :) * * Update: extra voorbeelden */ body div .class #id [attr], body [attr] .class div #id { margin: 0px 5px 2px 5px; /* alleen de laatste 5px mag weg */ margin: 3px 3px 3px 3px; /* gelijke set */ margin: 0% 0 0px 0em; /* verschillende notaties van 0, moet 0 worden */ background: url(blaat;); /* ; in een url, de laatste ; moet wel weg */ } body , html { margin: 0px; padding: 0; background-color : #000; } body + a * > html { color: navy ; } '); /* Uit het voorbeeld zou moeten komen: 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} */ ?>
Download code (.txt)
|
|
Stemmen |
Niet ingelogd. |
|