基于web的工具,优化,格式化和检查CSS

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

样式表可以在长度和文件大小方面迅速变大。为了确保你的网页正确快速地呈现,这里有一个汇编一些最好的免费的、基于web的CSS优化器/压缩器、代码格式化器和验证服务.看看它们,选出最适合你的。

优化和压缩

CSS优化器

CSS优化器-屏幕截图。CSS优化器是一个简单的在线优化器,处理当前的CSS并输出压缩版本。您可以选择链接到样式表的URL、上传CSS文件或直接输入样式。这是一个“即插即用”的简单工具——没有选项,所以优化过程对所有输入都是相同的(如果你想标准化压缩设置,这很好)。

干净的CSS

干净的CSS -屏幕截图。干净的CSS是基于流行的CSS minifier,CSSTidy.您可以设置所需的压缩级别(压缩程度越高,可读性就越差)并定制压缩选项。之后,它会逐行打印报告,准确地显示更改的内容。

还有CSS Formatter和Optimiser,它使用了CSSTidy (1.3dev)的最新版本。

CSS驱动器画廊- CSS压缩机

CSS驱动器画廊- CSS压缩机-屏幕截图。CSS驱动的CSS压缩机有两种模式,常规的模式和先进的模式(有更多的选项可以设置)。您可以删除注释(strip comments选项)或指定删除超过某个字符限制的注释,从而保留较短的注释。普通模式对于那些不挑剔的人来说是完美的——只要在轻压缩、普通压缩和超紧凑压缩之间选择,你就准备好摇滚了。

在线CSS优化器

在线CSS优化器-屏幕截图。在线CSS优化器是另一个简单的CSS优化工具,基于CSS optimizer命令行应用程序,适用于OS X和Linux。有两种方式输入CSS:通过页面上提供的文本框或直接链接到样式表。有时您会发现需要反向压缩—您可以使用站点上的Uncompress CSS应用程序来实现这一点。

CSS压缩机

CSS压缩机-界面截图。另一个流行的基于web的CSS压缩工具是Robson的开源软件CSS压缩机,(请查看CSS Compressor PHP源代码)。你可以设置大量的压缩选项,包括颜色、度量(单位)、规则和CSS属性。CSS压缩机还提供了一个有用的组合工具,同时组合和压缩最多三个独立的CSS文件。

格式化

FormatCSS

FormatCSS -屏幕截图。FormatCSS允许您粘贴有效的CSS代码,纠正和标准化您的源代码。您可以应用一些可用的设置和规则来实现您想要的格式类型—包括按字母顺序排列CSS,取消代码的大写,以及处理样式的一些选项。

prettyprinter.de

Prettyprinter.de screen截图。prettyprinter.de不仅限于CSS——它还格式化PHP、Java、c++、C、Perl和JavaScript——因此,如果您碰巧使用任何其他受支持的语言,它是您格式化需求的一个极好的“一站式”。它总共有13个不同的选项可以设置,包括“减少空格”,“删除空行”,并自动在花括号后添加新行。

Tabifier

Tabifier -屏幕截图。Tabifier是多语言的web工具,专门设计用于标准化源代码的缩进。它支持HTML、CSS和C风格。这是一个简单的工具,非常适合快速格式化缩进。

验证和检查

W3C CSS验证服务

W3C CSS验证服务-屏幕截图。也许最常见的基于web的CSS验证服务是W3C CSS验证服务.它使用起来非常简单,只需输入样式表的URL,它就会输出样式表的状态,并指出错误、警告和其他问题。

Juicy Studio: CSS分析器

Juicy Studio: CSS分析器-屏幕截图。多汁的工作室的CSS分析器将W3C验证服务与源代码中使用的颜色对比(有助于解决视力受损的可访问性问题)和度量单位的附加检查结合起来。您可以通过URL输入CSS,也可以将代码复制到页面上提供的文本框中。结果是关于CSS的错误和警告的非常详细的分类,类似于W3C CSS验证服务。

CSS冗余检查程序

CSS冗余检查-屏幕截图。CSS冗余检查程序是一个简单的工具,用于检查是否有可以组合的冗余样式。这减少了不必要的样式,是检查工作的好方法。这是一个三步过程:简单地链接到样式表,放置几个使用样式表的页面,然后按下“检查”按钮。

输出是建议的详细列表,以及可以通过组合冗余样式来减少代码的位置。如果你使用过以上任何一种工具,请在评论中与我们分享你的经历(好的,尤其是坏的).由于这些都是自动化的,并且有标准的处理方法,所以在使用输出时,请谨慎使用并使用自己的判断——事情可能会很糟糕彻底测试结果

如果你喜欢这篇文章,这些其他的文章可能也会让你感兴趣:

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!