27个免费在线CSS文件极简化工具

如果您曾经在GTMetrix.com或任何其他网页测试/分析工具上分析过您的网站，那么您肯定会偶然发现“CSS极简化或者CSS压缩”建议。免费在线CSS文件极简化工具即通过减少页面加载时间来提高您的网页性能。

图片来源

根据Kissmetrics的数据，40%的网站访问者会放弃加载时间超过3秒的网站，1秒的延迟（或 3 秒的等待）会使客户满意度降低约16%。所以最重要的是，您需要加快网页加载时间。CSS文件压缩就是为了达到此目的，但首先，您应该知道“代码极简化”是什么意思。根据维基——

“在计算机编程语言，尤其是JavaScript中，极简化是从源代码中删除所有不必要的字符 而不改变其功能的过程。这些不必要的字符通常包括空格字符、换行符、注释，有时还包括块分隔符，它们用于增加代码的可读性，但不是执行所必需的。”

所以代码压缩意味着它将删除空格、新行、块分隔符和注释以最小化文件大小。但是对于新手或在编码方面几乎没有经验的人来说，代码压缩可能是一项可怕的任务。这就是为什么我列出了所有在线CSS压缩工具的原因。这样任何人都可以复制或上传他们的原始CSS代码，压缩并立即使用它，而无需担心任何事情。

手动为CSS文件瘦身

在使用在线CSS文件极简化工具之前，请注意，您可以在不使用任何工具的情况下手动为CSS文件瘦身。例如，这是带有换行符和注释的典型原始CSS代码：

/*--------------------------------------------------------------
 ## Site Branding
 --------------------------------------------------------------*/
 .site-branding {
 width: 80%;
 }

/*--------------------------------------------------------------
 ## Site Navigation
 --------------------------------------------------------------*/
 #site-navigation{
 float: left;
 width: 1%;
 margin-top: 2%;
 }

现在删除注释、行间距和额外空格，上面的代码将如下所示：

.site-branding {width: 80%;}#site-navigation{float: left;width: 1%;margin-top: 2%;}

这就是您手动进行CSS压缩或者极简化的方式，但这是一项过多的重复性任务，而且肯定是一种容易出错的方法。除非你必须这样做，否则我不会推荐它。最好使用在线工具压缩您的CSS代码并从那里复制。

CSS在线极简化工具

1. cssminifier

使用包含下载文件的选项，使用API和许多有用的插件来极简化/压缩您的CSS代码，例如 – Django Helper、Sublime Text 2插件、Krusader文件管理器和PHP库。

2.  minifier

这个在线极简化工具提供删除所有评论、超级紧凑、保持缩进、删除最后一个分号的选项。

3.  freeformatter.com/css-minifier

基于Yahoo YUI Compressor：支持

• 删除无用的空格、缩进字符和换行符
• 删除所有评论
• 删除样式声明的最后一个分号和额外的分号
• 删除空的CSS 声明
• 使用零值时删除单位
• 如果浮点值小于1，则删除前导 0
• 将RGB颜色值转换为较短的十六进制格式
• 遵循模式#AABBCC 的十六进制颜色减少为#ABC
• 为每个CSS文件保留一个字符集，删除所有额外的声明
• 只要安全，None值就会转换为0

您可以复制粘贴您的CSS或键入文件的URL进行极简化。

4.  cleancss.com/css-minify

你只需要键入需要极简化的CSS代码，或者填写CSS文件URL地址，又或者上传CSS文件，即可实现CSS文件压缩。

5.  cnvyr.io

您可以从该网站极简化和gzip压缩您的CSS代码。该在线工具还支持JavaScript极简化和图像优化处理。

6.  minifier.org

基于Peter Finland和MIT-licensed的极简化项目，您可以使用该工具进行CSS和JavaScript文件压缩。

7.  css-minifier.com

一个提供丰富选项可供选择的在线压缩工具。

• 极限（无可读性，最小尺寸）
• 高（中等可读性，较小的尺寸）
• 标准（可读性和大小之间的平衡）
• 低（更高的可读性）

还有更多选项，例如 – 丢弃CSS属性（CSS 3.0、CSS 2.1、CSS 2.0 和 CSS 1.0）、向最终CSS添加时间戳、压缩颜色、压缩字体粗细、删除不必要的反斜杠和删除最后一个分号。

8.  css-beautify-minify

通过文件URL或上传您的CSS 文件，您可以压缩和美化网站的CSS代码。该在线工具还提供可验证CSS代码的选项。

9.  minifycode.com/css-minifier

一键压缩您的CSS 代码。没有其他选项或像其他服务那样的任何额外选项，不过提供CSS美化器。

10.  browserling.com/tools/css-minify

另一个支持压缩及美化CSS文件在线工具。

11.  countwordsfree.com/css-minify

基于YUI Compressor作为CSS极简化的主要参数：

• 删除注释和空格
• 去掉最后一个分号
• 去除多余的分号
• 删除空声明
• 空值优化
• 转换颜色值
• 去除重复的字符集
• 不透明度过滤缩短
• 优化空值

12.  webtoolkitonline.com/css-minifier

一个面向开发人员的在线工具，可以非常方便地压缩CSS。并且还提供其他有用的CSS工具，例如：Less转化CSS工具和CSS格式化工具。

13.  foo123.github.io

一个优秀的在线CSS处理和压缩工具，提供很多选项，例如 – 压缩、美化、删除注释、添加供应商前缀、应用回退polyfills、将HSL(A)转换为RGB(A)、将RGB(A)转换为HEX和行包装。此外，还有几个“仅限服务器”选项，例如 – 嵌入图像、嵌入字体和嵌入导入。

14.  varvy.com/tools/css

Vary.com的工具可以压缩CSS代码，但它不会删除换行符，并且没有选项。

15.  beautifytools.com/css-minifier

您可以通过删除空格、换行符、缩进和注释以及从URL加载和上传文件的选项来缩小和压缩CSS代码，且提供美化选项。

16. codeamaze.com/code-minifier/css-minifier

为您提供从URL加载文件和从文件加载的选项，您可以下载缩小的文件或复制代码。

17.  devotter.com/css-minifier

基于clean-CSS， 您需要拖放CSS文件以压缩。它使用流行的gulp-cssmin插件背后的相同工具。

18.  minifycss.io

该在线工具支持URL加载或者上传文件极简化及压缩CSS。

19. minifyweb.com/minify-css

该网站具有其他任何压缩器都没有的独特功能。您可以将多个CSS文件合并为一个极简化CSS文件。您可以粘贴CSS文件URL或粘贴原始代码。到目前为止，我已经尝试极简化11个文件并且成功了。我不确定是否有文件限制，但同时极简化10个文件对任何人来说绝对是很多。

20.  tutorialspoint.com/online_css_minifier

另一个来自tutorialspoint.com的简单工具，您只需粘贴CSS代码，它就会自动极简化代码。您可以复制代码或下载为文件。

21.  howtodoinjava.com/best-online-css-formatter-minifier

一个在线CSS极简化及格式化在线工具：

• 删除无用的空格、缩进字符和换行符。
• 删除所有评论。
• 删除样式声明的最后一个分号和额外的分号
• 删除空的 CSS 声明
• 使用零值时删除单位。
• 用于美化/格式化CSS。
• 用于极简化CSS。

22. caiapps.com/tools/minifier

另一个用于极简化CSS的在线工具。

23.  css-minify.online-domain-tools.com

使用以下选项极简化你的CSS代码：

• 将每个CSS规则放在单独的行上
• 禁用高级优化
• 删除特殊注释（即 /*! 注释 */）
• 不要删除第一个特殊注释
• 保持与IE8的兼容性

24.  webtools.joomboost.com

该Web工具为您的CSS极简化提供了四个压缩级别：

• 最高（无可读性，最小尺寸）
• 高（中等可读性，较小尺寸）
• 标准（可读性和大小之间的平衡）
• 低（更高的可读性）

25.  htmlminifiers.com/css-minifier

在没有可能的副作用的情况下极简化CSS。

• 删除无用的空格、缩进字符和换行符
• 删除所有评论
• 删除样式声明的最后一个分号和额外的分号
• 删除空的CSS声明
• 使用零值时删除单位
• 如果浮点值小于1，则删除前导 0

26. cuteseotools

另一个简化CSS代码的在线工具。

27.  beautifyconverter.com/css-minifier

包括的选项：从URL加载CSS文件或上传、美化CSS、极简化CSS并下载压缩后的版本。

 

极简化与压缩

极简化是一项非常不错的技术但不会与压缩混淆，这两者是不一样的。极简化后的代码可以按原样运行，极简化意味着它只会从文件中删除空格、注释和其他不必要的字符，以创建一个无需任何操作即可运行的CSS文件。而压缩代码在运行前需要解压缩。这是这两者之间的主要区别。与压缩器相反，压缩后的文件无需任何操作即可运行。

在极简化代码之前，您应该始终保留文件的副本。极简化是改善页面加载时间的好方法。我们相信这些免费的在线CSS极简化工具列表将帮助您减少CSS代码。您是否使用过上述列出的任何CSS文件在线极简化工具？