[ Content | Sidebar ]

Posts tagged css

纯sed压缩css文件

额,如果不考虑用java,还是可以考虑考虑这个…

#!/bin/sh
#"^M"用来代替显示win下的换行符,直接复制这段脚本是不能用滴
cat $1 | sed -e 's/^M//g;s/^\xef\xbb\xbf//g;s/\([^0-9]\)0p[xt]/\10/g' -e 's/\/\*.*\*\///g' | sed -e '/^[\t ]*\/\*/,/\*\/[\t ]*$/d' | sed -e '/^[\t ]*$/d' -e 's/^[\t ]*//g' -e 's/;[\t ]*/;/g' -e 's/}[\t ]*/}/g' -e 's/\([^,\{;\}]\)$/\1;/g' -e 's/};/}/g' | sed -e :a -e '/[,;{][\t ]*$/{N;s/\n/ /;ba}' > /tmp/lala_css
mv /tmp/lala_css $1
Copy Code 

压缩规则较简单..

  • 删除注释
  • 删除不必要的空白
  • 删除window的utf BOM标记,删除win下的换行符
  • 每条规则压成一行
  • 0px -> 0

压缩效果如下,比yuicompressor差一点:

 72344 2009-12-01 19:57 layout.css
 69626 2009-12-01 19:52 layout-mini-sed.css
 68720 2009-12-01 19:56 layout-mini-yui.css

文件下载点这里:compress-css.zip

ie6下filter造成图片出现白点

<html>
正常的图片<br />
<img src="http://lh3.ggpht.com/_l8FcMjS-xnI/Sb3wh8kSk6I/AAAAAAAAExc/DMUyic7Odas/screenshot_003.jpg" /> <br />
添加透明之后<br />
<img style="filter:alpha(opacity=100);" src="http://lh3.ggpht.com/_l8FcMjS-xnI/Sb3wh8kSk6I/AAAAAAAAExc/DMUyic7Odas/screenshot_003.jpg"  />
</html>
Copy Code | Run Code

shell:创建单独的样式hack文件

不管怎么说，通过”<!–[if lte IE 6]>”的形式单独加载patch文件是一种不错的做法，用ff的用户不用为这些为ie而做的恶心patch浪费流量，页面的渲染速度也许会有所提升。

下午靖威同学跟我说，可不可以写一个脚本可以提取样式表中的hack，生成单独的hack文件，这样可以大大减少单独维护hack文件的成本。感觉想法不错，难度也不是很大，参考了一下shell说明，写了几句，先备个忘，下周有时间测试一下。。

#!/bin/bash
echo "$1/csspro/"
find "$1/csspro/" -name *.css | grep -v "ie[67]" > /tmp/allcss.tmp
cat /tmp/allcss.tmp | xargs -i sed -i '/^$/d;s/\\{\\s/\\{/;s/\\;\\s/\\;/;s/\\s\\}/\\}/;s/\/\*.*\*\///;/^[\t ]*\/\*/,/\*\/[\t ]*$/d' {}
cat /tmp/allcss.tmp | xargs -i sed -n '/* *html/p' {}  >> "$1/csspro/patch/ie6.css"
cat /tmp/allcss.tmp | xargs -i sed -n '/*+html/p' {}  >> "$1/csspro/patch/ie7.css"
cat /tmp/allcss.tmp | xargs -i sed -i '/* *html/d;/*+html/d' {}
rm /tmp/allcss.tmp
Copy Code 

IE下filter失效的问题

请在ie下测试一下代码

1
2

<p style="width:auto;color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果(这个是不生效的)</p>
<p style="zoom:1;color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果(使用zoom使其拥有布局)</p>
Copy Code | Run Code

原因是只有当元素的hasLayout为true时,filter才会生效,真贱~~
参阅:http://audi.tw/Blog/CSS/css.zoom.filter.alpha.opacity.asp