有没有任何积极的CSS缩小工具?
我想知道是否有人知道一个工具,将积极重写CSS来更有效地压缩样式。 我想:
.foo { color : red; font-size: 16px; height: 20px; } .bar { color : red; font-size: 16px; height: 30px; }
被压缩到:
.foo, .bar { color : red; font-size : 16px; } .foo { height : 20px; } .bar { height : 30px; }
为了清楚起见,我所知道的所有缩小器,例如YUI Compressor,只删除空格,并且可能会join一些属性(如font-family
和font-size
为font
)。 我正在寻找一些愿意完整地重写文件结构的东西。
简而言之,如果有人知道任何人的工作背后的压缩逻辑,这个信息将不胜感激。 如果找不到我想写的东西,但是还有一百万的东西需要考虑,比如页margin-top
, margin
,select器特殊性和包含顺序等等等等。如何有效地压缩信息,如重复select器或属性会更有效率?
我不知道任何积极的CSS缩小工具,但可以使用以下方法:
build立
- 展开你的CSS(
margin:1px 0 0 0;
margin-top:1px; margin-left:0px;
…)。 - build立一个图G =(V,E),其中V为顶点集合,E为边集合:
- V由两个集合A(唯一select器,例如
div
,p > span
,#myid
)和B(唯一属性,例如display:block;
color:#deadbeef;
)组成。 - E由select器(在A中)和属性(在B中)之间的所有关联组成。
- V由两个集合A(唯一select器,例如
- 为
b
的元素使用适当的权重函数c
。 这可能是给定元素b
的邻居数量,或accumulated lenght of properties - accumulated length of selectors
。 你的select。
你可能会注意到,通过使用这种方法,你会得到一个二分图。 现在尝试下面的贪婪algorithm(伪代码):
algorithm
- 取B中具有最大权重的元素b并将其添加到空集Z中
- 检查B中的另一个元素d是否具有相同的权重
- 如果存在这样的广告,检查它是否覆盖相同的select器。
- 如果d覆盖相同的select器:将d添加到Z并转到步骤2。
- 如果d没有覆盖相同的select器,则检查具有相同权重的下一个元素,或者如果检查了所有元素,则转到步骤3。
- 如果存在这样的广告,检查它是否覆盖相同的select器。
- 现在Z是一组包含一些select器的属性。 将其parsing为一个缓冲区。
- 删除Z中的所有元素及其在G中的相邻边,并删除Z本身。
- 如果B不为空,请转到步骤1。
- 您的缓冲区包含一个预缩小的CSS代码。 你现在可以合并一些属性(例如
margin-top:0px;margin-left:1px
)。
备注
请注意,实际压缩取决于你的体重function。 由于这是一个贪婪的algorithm,它可能会返回一个缩小的CSS,但我相信有人会发表一个反例。 还要注意,你必须在删除Z中的元素后更新你的权重函数。
运行时估计
如果我没有弄错的话,algorithm总是会终止并运行在O( |B|^2*|A|
)。 如果您使用堆并对每个邻接列表(设置时间O( |B|*|A|log(|A|)
))中的属性进行sorting,您将得到O( |B|*|A|* (log(|B|)+log(|A|))
)。
CSS Tidy就像一个冠军!
- 像“黑色”或rgb(0,0,0)这样的颜色,如果可能的话,会被转换成#000000或#000。
- 如果一些hex代码较短,则用它们的颜色名称replace它们。
- {property:x; property:y;}成为{property:y;}
- (所有重复的属性被合并)margin:1px 1px 1px 1px; 成为保证金:1px;
- 保证金:0像素; 变成保证金:0;
- 一个{边距:10px的; 边距:10px的; 保证金左:10px的; margin-right:10px;}变成
- 一个{余量:10px的;}
- 保证金:010.0px; 成为保证金:10px;
- 所有不必要的空白被删除
- 取决于压缩级别,所有的背景属性被合并
- 所有评论被删除
- 每个块中的最后一个分号可以被删除
- 缺less分号被添加
- string中不正确的换行符是固定的
- 缺less的单位被添加
- 不好的颜色(和颜色名称)是固定的
- 适当的价值 ! 重要; 成为财产:价值!重要;
你见过YUI压缩机吗?
一个名为CSS Tools的项目声称要这样做。