如果您曾经在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文件在线极简化工具?
原文地址:https://www.wbolt.com/free-online-css-minifiers.html