CSS压缩的技巧与工具

  发布时间:2009-12-11 00:25:15   作者:佚名   我要评论
学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求,尤其对于大型网站来说,这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。

很多人都有代码洁癖。这不是件坏事。

本文将整理集中你可以用来优化你的CSS的技术,以及一些可以自动压缩你的代码的在线和桌面压缩工具。

压缩还是不压缩

在我们讨论如何压缩CSS之前,需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲,而且并不希望自己的代码被通过压缩器去掉注释和断行。作为一个设计师,你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站,可能就没有必要做额外的压缩。同样,如果你在编写需要和一个开放团队分享的代码,插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而,如果你在设计一个需要大量CSS的大型网站,你肯定要注意你的文件大小并进你所能保持其最小。

可能在寻找压缩和可能性之间的完美结合上面需要花一些时间,但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时,很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。

考虑到这一点儿,让我们开始了解一些技术已保持CSS文件最小化吧。

空白样式定义

让我们从明显的开始。如果你有一个空白样式,丢掉它。不要借口稍后或许会用到,你也知道它们是杂乱的。除非你有一个合理的理由,否则不要添加它们。

缩写

CSS缩写是一种将多行CSS合并到单行的方法。 养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子:

长写版本:

#container{
    padding-top:5px
    padding-right:10px
    padding-bottom:30px
    padding-left:18px
}

缩写版本:

#container{
    padding:5px 10px 30px 18px;
}

了解更多CSS缩写技巧,可以访问下面的文章:

screenshot

推荐阅读阿捷的文章:《常用CSS缩写语法总结

CSS Sprites

CSS sprites背后的最初想法是减少HTTP请求的数量以加快页面的加载时间。Sprite实现这个目标的途径就是拼合多张图片到一个单独的图片文件中,通常是一个网格格式的图片。每个单独的图片通过切换大的sprite图片的background-position来显示。对于CSS代码来说,使用 sprite技术可以大大的提高代码的重用度和可维护性,这会明显的减少CSS的代码量。

要了解更多关于CSS Sprites,请查看Chris Coyier在CSS-Tricks上的教程:

screenshot

当然,前端观察也有一些很有价值的关于CSS Sprites的文章和技巧

减少注释

我喜欢在代码里面使用注释。我添加的注释越多,我就能在视觉上更快的定位到代码中的不同的部分。然而,如果你需要使用少的资源来高度优化的CSS,过度的注释就会吃掉宝贵的字节。所以,试着去掉所有不必要的注释并重新格式化那些你必须要保留的注释到尽可能少的字节。

合理的字体类型(font-Family)

当文件大小成为一个大问题的时候,不要将替代字体包进你的font-famly中。去掉所有不必要的累赘,并将你的额外选项减少到一到两个。

之前:

#container{font-family:Palatino,Georgia,Times,serif;}

之后:

#container{font-family:Palatino,serif;}

关于字体,强烈推荐阅读一下玉伯写的《三谈 Web 默认字体》,文中提到的几篇文章也都值得我们去阅读和思考。

使用16进制色彩

为了减少字节数,将所有RGB色值转换成他们对应的16进制值。这开起来可能没有太大的意义,但是任何字节都是值得的!

之前:

#container{color:rgb(131, 100, 219);}

之后:

#container{color:#8364DB;}

去掉断行

查看每一个样式属性,并将不需要的硬返回去掉。你也可以去掉最后一个分号。

之前:

#container{
    margin:5px;
    padding:5px 10px 30px 18px;
}

之前:

#container{margin:5px;padding:5px 10px 30px 18px}

10个在线CSS压缩工具

CSS压缩工具可以自动完成清理你的代码的大部分工作。它们中的很多会告诉你你的文件被压缩的百分比,所以请多尝试几个以了解哪个是最好的。

CSS Drive

screenshot

可选项:

  • 压缩模式: 低、普通、高度压缩
  • 注释压缩:不压缩、全部、或者长于某个特定值的。

CSS Compressor

screenshot

可选项 (每个均可选Yes 或No ):

  • 重排属性
  • 压缩色彩
  • 压缩font-weight
  • 小写化选择器
  • 去除不必要的空间
  • 去除不必要的分号

Arantius

screenshot

可选项 (每个均可选Yes 或No ):

  • 去除注释
  • 去除至少x字节长度的注释
  • 每行一个规则

CSS Optimizer

screenshot

可选项:

  • 不删除断行(Yes 或 No)
  • 可以处理URL、文件或粘贴的文本等方式的CSS

Lottery Post

screenshot

可选项:无

Clean CSS

screenshot

可选项(每个均可选Yes 或No ):

  • 重排选择器
  • 重排属性
  • 优化选择器及其属性(0, 1 or 2)
  • 合并简写属性
  • 只有安全优化
  • 压缩色彩
  • 压缩Font-weight
  • 小写化选择器
  • 属性字体(小写或大写)
  • 去除不必要的反斜杠
  • 转换!important hack
  • 移除最后一个分号”;”
  • 节省注释
  • 剔除无效属性(CSS2.1, CSS2.0 或CSS1.0)
  • 输入为文件

事实上,这就是开源项目css tidy的演示网站。CSS tidy中文版:http://www.isparkle.cn/show/csstidy/

Pingates

screenshot

可选项 (每个均可选Yes 或No ):

  • 转换长色彩名为16进制
  • 转换长16进制代码为短16进制代码
  • 转换长16进制代码为色彩名字
  • 转换RGB为16进制
  • 去除0度量
  • 合并同一个规则
  • 合并同一个选择器
  • 合并属性
  • 去除重复的属性
  • 从margin和padding中去除无用的值
  • 显示统计
  • 以彩色格式输出
  • 使用最小尺寸输出

PHP Insider

screenshot

可选项:无

SevenForty

screenshot

可选项:

  • 截断选项: 500, 1000, 1500 or 2000

该工具基于YUI压缩器,但是会自动将IE的hacks删除,开发者给出的解释是,IE hacks应该以单个文件出现,而不是杂糅在主CSS文件中,这样会变得难于维护。

Page Column

screenshot

可选项: None

桌面版CSS压缩工具推荐

YUI Compressor与TB Compressor

YUI Compressor是yahoo前端团队开发的一个前端代码压缩工具,功能很强大。需要Java运行环境,可以用java命令手动压缩CSS和JS文件,也可以用ant在编译的时候批量压缩

淘宝前端团队的玉伯根据YUI compressor封装的Windows平台压缩工具,安装卸载都很简单。正如功能强大的YUI Compressor,TBCompressor不仅可以压缩CSS,也可以压缩JS。

在这里下载。了解更多关于TBCompressor – JS和CSS压缩工具

另外,推荐阅读屈超同学的《完善 TBCompressor 对 CSS 文件的压缩过程》。

web 2.0资源优化工具

国人用delphi 7开发的一款桌面工具,也是可以压缩CSS和JS。推荐一下。另外值得一提的是,作者放出了该项目的源代码。

查看官方介绍及下载。另外,貌似该工具的CSS压缩部分基于CSS Tidy。

mergeCSS

CSS森林站长鬼哥出品的一个基于AIR的工具,有很多很有用的功能,比如多文件合并、合并@import导入文件等。查看详细介绍

需要注意的是,该工具对缩写和属性合并的支持并不太好,如果能够增加这些支持,可能会更好吧。

另外一个非常重要的事情是,到目前为止,鬼哥尚未放出该工具,如果你想尝试一下,可以联系他。

page speed

page speed其实是Google开发的一个基于Firebug的firefox插件,主要是用来分析网站前端性能的。但是在page speed的分析结果列表中Minify CSS选项,点开即可看到你的CSS可以压缩的比例,以及后面提供一个压缩过的版本,点击即可查看。唯一不足的就是不能自定义压缩。

GZIP

screenshot

无论多么丑陋的网站,GZIP都是一个对压缩很多类型的代码都的确很有用的工具。它或许并不是最简单的压缩方法,而且对初学者可能还会有些迷惑。查看这个教程以获取更多关于使用GZIP压缩你的样式的信息。

总结

正如我前面说的,这些方法中的一些可能看起来有些过度或毫无意义。关键是看大局。虽然这些技巧中的任何一个可能的只有几乎是微不足道的影响,结合这些技术中的几个或全部就可以对你的CSS文件的大小形成巨大的影响。

另外,如果你了解到有其它的好用的压缩工具,欢迎与我们分享哦~~
另外附脚本之家的css在线压缩工具
https://www.jb51.net/tools/cssyasuo.shtml
https://www.jb51.net/csstidy/css_optimiser.php?lang=zh

相关文章

  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

    本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效
    2024-09-26
  • CSS 中的overscroll-behavior属性详解

    overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be
    2024-09-26
  • css实现四角边框效果

    本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为
    2024-09-24
  • CSS的:required和:optional伪类:如何增强表单字段的视觉识别

    在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的
    2024-09-18
  • css边框修饰实现代码

    本文介绍了CSS中设置边框的几种主要属性,包括边框样式(如实线、虚线等)、边框宽度(可以单独设置每个方向的宽度)、边框颜色(支持单独为每个方向设置颜色)以及圆角边框
    2024-09-18
  • 如何利用CSS实现视差滚动和抖动效果

    通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画
    2024-09-13
  • CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)

    在CSS中,可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器,对于其他浏览器,可采用JavaScript或CSS Fallback等方案,文
    2024-09-11
  • css 自定义变量 var()案例分析

    这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,感兴趣的朋友跟随小编一起看看吧
    2024-08-28

最新评论