CSS minifier and color replaces


/ Published in: PHP
Save to your folder(s)

With this file you can load stylesheets and minify the code while changing colors. The stylesheets are loaded using file_get_contents and you can attach them one after another if you have multiple sheets. The colors are replaces based on a variable thats commented out of the css code, an example of the way thats formatted is below the cod block. The minification is done with a regular expression that removes all comments, line breaks, and un-needed spaces. The color replacement is done with a different regular expression and the colorize function that takes the variable and returns a color. You can use whatever method you want to get the color, but I personally am using variables from a Wordpress plugin (and stores using the Wordpress options function) to give users color customizability of their site.

If you have any questions or comments you can post a comment here or at the link, there is also a more in depth explanation at the link if your interested.

UPDATE: improved it's ability to find colors in the CSS declaration, also added the "transparent" keyword in as something it can find.


Copy this code and paste it in your HTML
  1. // php code that does the work
  2. <?php
  3. require('../../../wp-load.php');
  4. function colorize($m){
  5. // Your code to get the new color goes here, in this case it's grabbing a stored value from a Wordpress plugin.
  6. $c=get_option('tc_'.$m[4]);
  7. $m[3] = $c;
  8. if($c!=''){
  9. return $c;
  10. }else{
  11. return $m[0];
  12. }
  13. }
  14. header("Content-type: text/css");
  15. $css = file_get_contents('style.css');
  16. $css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})|\s+(?<=:)~sU','',preg_replace_callback('~((transparent|#[A-F0-9a-f]{6}))(?=(.)+(?=/\*#(.+)#\*/))~U','colorize',$css));
  17. echo $css;
  18. ?>
  19.  
  20. // example of the css before colorization, note the comment
  21. element {
  22. padding: 0;
  23. margin: 0 10px;
  24. color: #000000;/*#c_t#*/
  25. }
  26.  
  27. // how it looks after colorization, note the color.
  28. element {
  29. padding: 0;
  30. margin: 0 10px;
  31. color: #FF0000;
  32. }
  33.  
  34. // older version, doesn't grab color codes as well, missing transparent keyword.
  35. <?php
  36. function colorize($v){
  37. //whatever code you use to turn variable $v into color $c, very dependent on your specific implementation.
  38. return $c;
  39. }
  40. header("Content-type: text/css");
  41. $css = file_get_contents('style.css');
  42. $css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})~sU','',preg_replace_callback('~#[A-F0-9a-f]{3,8}(?=;/\*#([\d\w\s]+)(:(.+))?#\*/)~U','colorize',$css));
  43. echo $css;
  44. ?>

URL: http://fatfolderdesign.com/382/css/css-minifier-and-color-changer

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.