CSS压缩、格式化-魔趣吧

CSS压缩、格式化-魔趣吧在线工具集合

CSS压缩、格式化工具

使用说明:CSS压缩有什么用?

概览

压缩CSS代码可以节省很多字节和加速下载、解析以及执行时间,因此对于网站速度的提升很有帮助!

简化CSS的好处跟简化JS一样:减少网络延迟,增强压缩,以及使浏览器更快加载和执行,魔趣吧提供在线简化CSS的免费工具。

说明

通过分析链接和内嵌CSS,重写发现的图片和简化CSS,CSS在<style>块和<link>引用中发现。

许多图片在CSS里引用而不是在HTML,如果能重写这些图片,那么可以节省字节和延长缓存时间。

简化可以大大的减少公共CSS的字节数,通过删除所有说明文字和大多数空白符和缩短颜色名称。

只有headers里包含public或没有Cache-Control的URLs资源需要优化。

操作

这个重写分析HTML文档和找到所有在<link>标签引用的CSS,以及在<style>标签内嵌的CSS,分析CSS和简化结果。

实例

例如,在HTML文档看到这样的

<html>
  <head>
    <style>
      /* This comment will be stripped */
      #iddy, .anotherId {
        border: solid 1px #cccccc;
        padding: 1.2em;
        float: left;
        color:##ff0000;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="extStyle.css">
  </head>
  <body>
    Wow, <div class="classy" id="iddy">
    CSS is <span>stylin'</span>.</div>
  </body>
</html>

extStyle.css代码如下

div.classy span, div.classy img {
    display: block;
    border: none !important;
    background: none !important;
  }

那么,可以简化成这样

<html>
  <head>
    <style>#iddy,#anotherId{border:solid 1px #ccc;padding:1.2em;float:left;color:red}</style>
    <link rel="stylesheet" type="text/css" href="extStyle.HASH.css">
  </head>
  <body>
    Wow, <div class="classy" id="iddy">
    CSS is <span>stylin'</span>.</div>
  </body>
</html>

而重写文件extStyle.HASH.css包含这些代码

魔趣吧

关于魔趣吧|魔趣建站

魔趣吧,志在打造全国最大的建站资源共享平台。 本站提供海量免费的建站资源,包括WordPress模板、Discuz商业模板、Discuz商业插件、PHPWind模板、phpcms模板、帝国cms模板、织梦模板等上万精品模板!同时,提供各种建站素材、JS特效、整站程序源码!
服务中文站长,传播分享精神!建站,就来魔趣吧!!
2015-2017  技术支持:魔趣吧 ( 豫ICP备15026783号-4 )   安全运行