样式表(CSS)的压缩和检查

@ 2011-02-12 10:30:05
标签:

    对样式表进行压缩,有两个潜在的原因:

    • 减小文件大小
    • 增加人阅读代码的难度

    用PHP压缩样式表

    function compact_css($css_text) {
     $lines = preg_split('/[\r\n]+/',$css_text);
     
     for($i=0,$n=count($lines); $i<$n; $i++){
       $line = trim($lines[$i]);
       $line = preg_replace("/\/\/(.*)/",'',$line); // single line comment
       $line = preg_replace('/\s+/', ' ', $line);   // merge white space
       $line = str_replace(': ',':',$line);
       $line = str_replace('; ',';',$line);	
       $lines[$i] = $line;
     }
     $str = implode('',$lines);
     $str = preg_replace("/\/\*(.*?)\*\//","",$str);   // multiple line commment    
    
      return '/* '.date('c').' */'.$str;
    }
    

    在Smarty 模版中压缩样式表

    利用上面的代码很容易实现对Smary模版中内嵌的样式表进行压缩。

    function smarty_block_css($param, $content, &$smarty) {
      if($repeat) return; // open tag
      if($_GET['_debug']) return $content;
    
      return compact_css($content);
    }
    
    $smarty->registerPlugin("block",'css', 'smarty_block_css', true);
    

    CSS的校验

    • Firefox中通过安装 Web Developer 插件来侦测
    • 专用的校验工具。比如 cssLint

    网络资源

    标签:

      分享到:
      comments powered by Disqus

      19/22ms