缩小和混淆类似于 Javascript 的 CSS

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4597914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 14:15:47  来源:igfitidea点击:

Minifying and Obsfucating CSS similar to Javascript

javascripthtmlcssobfuscationminify

提问by Rion Williams

I know there are several tools out there that are capable of obfuscating JavaScript files such as by turning a simple functions like:

我知道有几种工具能够混淆 JavaScript 文件,例如通过转换一个简单的函数,例如:

function testing()
{
  var testing;
  var testing2;
  alert(testing+testing2);
}

into

进入

function a(var a,b;alert(a+b);)

My question is does something like this exist for use with CSS/HTML (or is there a tool that has a similar effect)? In particular, a minification/obfuscation tool that actually renames variables and refereneces and eliminates additional white-space etc.

我的问题是是否存在与 CSS/HTML 一起使用的类似内容(或者是否有具有类似效果的工具)?特别是,实际重命名变量和引用并消除额外空白等的缩小/混淆工具。

And if so - would the benefits in performance outweigh the readability in both CSS/HTML/JavaScript minification/obfuscation?

如果是这样 - 性能上的好处是否会超过 CSS/HTML/JavaScript 缩小/混淆的可读性?

回答by Kevin Sylvestre

It is very difficult to 'minify' HTML or CSS because all that can safely be saved is white space (which doesn't amount to a huge saving). As for class renaming, you loose an important part of the web which is having semantic code (which represents meaning). I think the best option is to ensure that you have gzip compression enabled on your web server and focus on combining your assets into a single file wherever possible.

“缩小” HTML 或 CSS 是非常困难的,因为所有可以安全地保存的是空白(这并不能节省大量的空间)。至于类重命名,你失去了网络的一个重要部分,它具有语义代码(代表意义)。我认为最好的选择是确保您在 Web 服务器上启用了 gzip 压缩,并尽可能专注于将您的资产合并到一个文件中。

回答by zah

HTML Muncheris a python tool that tries to rename IDs and CSS class names across HTML, javascript and CSS files. You can use it as a first step in your optimization process, before passing the files to other tools such as Google Closure Compiler or YUI CSS Compressor.

HTML Muncher是一个 Python 工具,它尝试跨 HTML、javascript 和 CSS 文件重命名 ID 和 CSS 类名。在将文件传递给其他工具(例如 Google Closure Compiler 或 YUI CSS Compressor)之前,您可以将其用作优化过程的第一步。

回答by Hank Gay

The YUI Compressor minifies CSS, but I'm not sure how big a win it might be over simple gzip compression. If you have that much CSS, it might be a warning sign of bigger problems.

YUI Compressor缩小了 CSS,但我不确定它比简单的 gzip 压缩有多大优势。如果你有那么多 CSS,这可能是更大问题的警告信号。

回答by Hank Gay

Take a look at this: minifycss

看看这个:minifycss

As for obfuscation I am not sure that this is such a good idea. The css classes can be manipulated anywhere. The minute you change the css you will lose the link to the classes/ids etc...

至于混淆,我不确定这是一个好主意。css 类可以在任何地方操作。更改 css 的那一刻,您将失去指向类/ID 等的链接...

回答by Phrogz

If you use Ruby, here is a Ruby CSS Minifierthat I use to good effect. Given my already-terse style, it gives me about 15% reduction in my file sizes.

如果您使用 Ruby,这里有一个Ruby CSS Minifier,我使用它效果很好。鉴于我已经简洁的风格,它使我的文件大小减少了大约 15%。

For example, on one project the aggregate of 5 files at 32.3kiB becomes 1 file of 26.4kiB (18%). On another project, 2 files of 21.6kiB become 1 file of 19.0kiB (12%).

例如,在一个项目中,32.3kiB 的 5 个文件的总和变成了 26.4kiB 的 1 个文件 (18%)。在另一个项目中,21.6kiB 的 2 个文件变成了 19.0kiB 的 1 个文件(12%)。

回答by David Murdoch

Take a look at html5boilerplate.com; specifically the latest source-code on GitHub.

看看html5boilerplate.com;特别是 GitHub 上的最新源代码。

HTML5Boilerplate's build script can minifyJavaScript, CSS, and HTML for you. It doesn't rename your CSS selectors but it is probably the closest to an automated "obfuscator" you will find.

HTML5Boilerplate 的构建脚本可以为您缩小JavaScript、CSS 和 HTML。它不会重命名您的 CSS 选择器,但它可能最接近您会发现的自动“混淆器”。



If you are just looking to eek out some additional bytes from each page make sure you are using gzip/deflate compression and THEN try alphabetizing your CSS selector properties and your HTML element's attributes and their values.

如果您只是想从每个页面中找出一些额外的字节,请确保您使用 gzip/deflate 压缩,然后尝试按字母顺序排列 CSS 选择器属性和 HTML 元素的属性及其值。

Read thisfor Google's detailed recommendations on the above method.

阅读本文以了解 Google 对上述方法的详细建议。



In some dynamic languages with HTML helpers (like asp.net/C#) you can overwrite the html-control's "ClientID" method to be a random string and dynamically link your CSS selectors to your HTML (well, the server-side controls that render HTML). But that would be for another question entirely and is likely not what you are looking to get into. It would also become a maintenance nightmare.

在某些带有 HTML 帮助程序的动态语言(如 asp.net/C#)中,您可以将 html 控件的“ClientID”方法覆盖为随机字符串,并将 CSS 选择器动态链接到 HTML(嗯,呈现HTML)。但这完全是另一个问题,可能不是你想要的。这也将成为维护的噩梦。



回答by t_warsop

There are many online tools you can use for things like css minification. Here is an online css minifier! I found.

有许多在线工具可以用于诸如 css 缩小之类的事情。这是一个在线 css minifier!我发现。

As for renaming css classes, I would try and avoid that as you will lose a lot of the readability from your html.

至于重命名 css 类,我会尽量避免这种情况,因为您将从 html 中失去很多可读性。

回答by user3720773

I have developed tool for Obfuscating CSS. It's target is not to make stylesheets load faster or whatever, but to make your "reusable" work safe from stealing. It has several methods how to make a hell of getting an original CSS source (But it's still in development and better methods will be used). I would reccomend it to HTML/CSS templates sellers, who provide live demos and are worried of thefts, and also for coders - freelancers, who wants to present their work to (untrusty) customers. You can try it: http://cssobfuscator.com

我开发了混淆 CSS 的工具。它的目标不是使样式表加载速度更快或其他什么,而是使您的“可重用”工作安全免遭窃取。它有几种方法来获取原始 CSS 源代码(但它仍在开发中,将使用更好的方法)。我会向 HTML/CSS 模板卖家推荐它,他们提供现场演示并且担心被盗,以及编码员 - 自由职业者,他们想要向(不信任的)客户展示他们的作品。你可以试试:http: //cssobfuscator.com