(转)8款在线CSS优化工具/组织和压缩CSS

CSS的优化通常包括两方面: 格式化CSS和精简CSS

精简CSS的办法是把具有相同属性的元素合并在一起,但这会降低代码的可读性,使代码的后期维护很麻烦,稍不注意就出错。

格式化CSS一般就是多行模式或单行模式的选择,比如我个人就完全受不了多行模式 

下面是一些在线的CSS优化工具,能让你方便的对CSS文件进行各种优化处理。

1. Online CSS Optimizer /在线CSS优化

该在线工具用于精简和压缩样式表的文件大小,优化后的代码将完全是混乱的,支持输入URL,提交文件和直接输入进行压缩。

2. CSS Compressor/CSS压缩

作用同上,但这个工具拥有非常详细的压缩选项,它包含基本模式和高级模式。

在基本模式下, 你可以选择压缩模式: 轻度,标准和高度。最高模式压缩后的文件最小,但同时可读性也就最低,甚至压缩后就出问题也可能,以此类推。还可以选择CSS注释代码的处理: 不处理注释,清除所有注释或限定注释字符数。

在高级模式下,还可以对空白,Tab,新行等等进行选择处理。

3. CleanCSS / CSS格式化和优化工具

基于 CssTidy 的一款在线CSS优化工具,既可以格式化CSS代码,也可以优化CSS减少CSS文件大小,包含非常详细的选项设置。比如选择器和属性的排序,大小写转换等等。

4. CSS Analyzer / CSS有效性分析工具

检查样式表的有效性,验证样式表是否符合 W3c 标准,同时进行颜色对比测试和确保尺寸的单位(W3C的Guideline 3.4 建议使用相对而非绝对单位,虽然px是相对单位,但是最终的字体大小却取决于输出介质,所以建议是使用百分比和em等尺寸单位。)

5. Format CSS Online /在线CSS格式化工具

这是一个专门用于格式化CSS样式表文件的在线工具,讨论该使用”多行模式”还是”单行模式”或其它模式是没什么意义的,不如大家就按自己的模式去做,在协作的时候用工具重新格式化成自己喜欢的模式就好了。

6. Tabifier

非常简单的格式化工具,通过增加代码的缩进来让代码更具可读性。

7. Pretty Printer

一款多用途代码优化工具,提供多种选项,除 CSS 外,还支持 PHP,Java,C++,C,Perl,JavaScript 等多种语言。

8. Styleneat

简单易用的CSS格式化工具,虽然选项不多,但还是蛮实用的,支持直接输入,上传文件和输入URL。 

最后,个人的一些建议: 使用在线工具进行格式化,但不要使用在线工具进行压缩,最好自己手动进行一些元素和属性合并。

时间: 2024-10-27 13:11:26

(转)8款在线CSS优化工具/组织和压缩CSS的相关文章

14个在线网站优化工具

先介绍的最重要的两个网站管理员工具,"Google网站管理员工具"和"百度站长平台",在这里卢松松就不多做介绍了,一般人都知道. 2:Google基于搜索的关键字工具   它可以检测您网站的内容,并将其与实际的 Google 搜索查询进行匹配,从而为您提供一个高度相关.搜索频率较高的关键字列表,该工具还提供有关每个关键字的其他信息,例如月平均搜索次数.使用某个关键字的广告展示位置的竞争激烈程度.将广告置于前三位的估计出价.广告占有率/搜索占有率等. 3:ps教程:/

两款国外SEO优化工具推荐

SEO博客在站长常用免费SEO工具一文基本上都是推荐国内SEO工具,本文福建SEO将为大家带来的是:两款国外SEO优化工具推荐. 1.重定向检查器,Redirect Checker,也可以称为页面跳转方式检查工具.Chinaz站长工具里面的HTTP状态查询也可以实现部分功能. Redirect Checker:http://www.internetofficer.com/seo-tool/redirect-check/更加强大. Which redirection ?在文本框粘贴需要检查的网址,

PHP小技巧之JS和CSS优化工具Minify的使用方法_php技巧

一.实现合并和压缩多个JS和CSS文件的代码 HTML: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /><script type="text/javascript" src="jsmin.p

在线网页编辑工具Thimble和imcreator对比

文章描述:在线网页开发工具Thimble与imcreator评测. Mozilla于6月19日正式推出了一款基于网页的新开发工具Thimble,采用可视化的编辑器帮助用户在浏览器中撰写和修改html与css代码,并能够及时的提醒用户代码中的错误,且提供简单的代码说明. 其实这种网页开发工具并非只此一家,前期就使用过另外一款在线网页编辑工具-imcreator,下面,就带大家从以下三个方面来谈谈此两款网页编辑工具的体验. 一.选择模式:thimble和imcreator都允许您选择自定义网站或者根

2016年最热门的15 款代码语法高亮工具,美化你的代码_javascript技巧

前言: 代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,比如编程语言,标记语言,这些语言的语法错误显示是有区别的.语法高亮并不会影响文本自身的意义,而且能很好的符合人们的阅读习惯. 目前,有很多免费而且有用的代码高亮脚本.这些脚

TopBox(智投分析):国内首款在线客服效果分析系统

医疗行业及电商行业是在线客服系统使用最多且要求最为细致的一类用户群体.从最简单的客户对话,到要求系统提供详细的跟踪方案和资源自动匹配,医疗行业及电商行业对在线客服的要求是随着网络营销的深入在逐步增强.对于大部分涉及产品或服务转化的企业,其实他们心里都很清楚,从在线客服这一端口能获取到,是最直接的转化数据,抓好这一端口,就等于有效的控制了意向客户的转化率.而在线客服这一端口的数据分析系统,由广州天拓智投率先打破面市,名为"Topbox(智投分析)",打造了国内首款在线客服效果分析系统.当

网页开发者必备的20款在线实用工具

  互联网已经成为我们生活中无法割裂的一部分,生活中越来越多的服务都与网络紧密的结合到一起,深刻地影响着我们的生活和工作,很难想象没了它我们的日常生活会多麻烦.我们在公交上刷微博看新闻,在闲暇的时候在网络上寻找自己感兴趣的东西,在公司工作借助网络来宣传自己的企业,寻找合作伙伴和客户,等等等等. 与此同时,网络技术的发展也使得越来越多的事情可以在网络上完成--比如,设计和开发.这次我们推荐的20个网页开发工具都无需安装,借助浏览器,网页开发者可以在这里便捷地完成许多网页工作,称之为必备并不为过.

十款精心挑选的在线CSS3代码生成工具

今天这篇文章向大家推荐十款非常有用的在线CSS3代码生成工具,这些工具能够帮助你方便的生成CSS3特效.CSS3是对CSS规范的改善和增 强,增加了圆角.旋转.阴影.渐变和动画等众多强大的特性,它使得Web开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写 JavaScript才能实现的效果,如今只需几句简单的CSS3代码就能实现.  CSS3 Maker 这款工具非常强大,可在线演示渐变.阴影.旋转.动画等非常多的效果,并生成对应效果的代码,   Border Radius 一款简单

网页速度至关重要:3款免费的网页速度优化工具

文章描述:对于页面加载优化工具,最好有多种可选项(更好的是,免费的多种可选项).但你可以用这些工具生成一个网站性能增强性可操作的列表.如果你有一些我没有注意到的工具,随时在评论中让我们知道. 在过去几个月里,google一直在告诉世界,网页速度越来越成为网站的一个重要方面.google speed网站,已经有一个值得赞赏的目标,就是网上浏览要像翻书一样快.在他们的网站管理员博客中,已经介绍了好几篇博文和各式各样免费的工具,包括他们自己的和其他人的,并取得了很大的效果. 因此,作为一个网站负责人,