blocks|key|2564801|text|要“缩小”HTML或CSS是非常困难的，因为所有可以安全地保存的都是空白(这并不意味着可以节省大量的空间)。至于类的重命名，你失去了web的一个重要部分，那就是具有语义代码(表示意义)。我认为最好的选择是确保您的web服务器上启用了gzip压缩，并尽可能专注于将您的资产组合到单个文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2564802|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|497969|text|HTML+Muncher是一个python工具，它尝试在HTML、javascript和CSS文件中重命名is和CSS类名称。在将文件传递到Google+Closure+Compiler或YUI+CSS+Compressor等其他工具之前，您可以将其用作优化过程的第一步。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|497970|entityMap|0|LINK|mutability|MUTABLE|url|http://htmlmuncher.com/^0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://htmlmuncher.com/" rel="noreferrer">HTML Muncher</a> is 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.

blocks|key|2564852|text|YUI+Compressor+minifies+CSS，但我不确定它比简单的gzip压缩有多大的优势。如果你有那么多的CSS，这可能是一个更大问题的警告信号。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2564853|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/compressor/css.html^0|F|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The YUI Compressor <a href="http://developer.yahoo.com/yui/compressor/css.html" rel="nofollow">minifies CSS</a>, 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.

blocks|key|2564891|text|看看这个：minifycss|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2564892|至于混淆，我不确定这是不是一个好主意。css类可以在任何地方操作。在你改变css的那一刻，你将失去指向css/id等的链接……|2564893|entityMap|0|LINK|mutability|MUTABLE|url|http://www.minifycss.com/^0|5|9|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Take a look at this: <a href="http://www.minifycss.com/" rel="nofollow">minifycss</a>

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...

blocks|key|4161941|text|如果你使用Ruby，这里有一个我使用的Ruby+CSS+Minifier，效果很好。考虑到我已经简洁的风格，它使我的文件大小减少了大约15%25。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4161942|例如，在一个项目中，32.3kiB的5个文件的聚合变成了26.4kiB的1个文件(18%25)。在另一个项目中，21.6kiB的2个文件变成了19.0kiB的1个文件(12%25)。|4161943|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rgrove/cssmin^0|J|H|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

If you use Ruby, here is a <a href="https://github.com/rgrove/cssmin" rel="nofollow">Ruby CSS Minifier</a> that I use to good effect. Given my already-terse style, it gives me about 15% reduction in my file sizes.

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%).

blocks|key|2564992|text|看看html5boilerplate.com；特别是GitHub上的最新源代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2564993|HTML5Boilerplate的构建脚本可以为您缩减JavaScript、CSS和HTML。它不会重命名你的CSS选择器，但它可能是你能找到的最接近自动化的“混淆器”了。|2564994|2564995|如果您只是想从每个页面中提取一些额外的字节，请确保使用的是gzip/deflate压缩，然后尝试按字母顺序排列CSS选择器属性和HTML元素的属性及其值。|2564996|Read+this获取谷歌对上述方法的详细建议。|2564997|2564998|在一些带有HTML+helper的动态语言(如asp.net/C#)中，您可以将HTML控件的"ClientID“方法覆盖为随机字符串，并动态地将您的CSS选择器链接到您的HTML(嗯，呈现HTML的服务器端控件)。但这完全是另一个问题，很可能不是你想要的。这也会成为维护的噩梦。|2564999|2565000|entityMap|0|LINK|mutability|MUTABLE|url|http://html5boilerplate.com/|1|http://code.google.com/speed/page-speed/docs/payload.html^0|2|K|0|0|0|0|0|0|9|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|13|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|K|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

Take a look at <a href="http://html5boilerplate.com" rel="nofollow">html5boilerplate.com</a>; specifically the latest source-code on GitHub.

HTML5Boilerplate's build script can minify JavaScript, 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.

<hr>

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.

<a href="http://code.google.com/speed/page-speed/docs/payload.html" rel="nofollow">Read this</a> for Google's detailed recommendations on the above method.

<hr>

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.

<hr>

blocks|key|498024|text|有很多在线工具可以用来做css缩小化之类的事情。这是一个online+css+minifier！我找到了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|498025|至于重命名css类，我会尽量避免它，因为你会失去很多可读性从你的html。|498026|entityMap|0|LINK|mutability|MUTABLE|url|http://www.online-webdev-tools.com/online-css-minifier.html^0|S|J|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

There are many online tools you can use for things like css minification. Here is an <a href="http://www.online-webdev-tools.com/online-css-minifier.html" rel="nofollow">online css minifier</a>! I found.

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

blocks|key|498063|text|我已经开发了用于混淆CSS的工具。它的目标不是让样式表加载更快，而是让你的“可重用”工作不被窃取。它有几种方法如何让一个原始的CSS源代码变得糟糕(但它仍在开发中，将会使用更好的方法)。我推荐给HTML/CSS模板销售商，他们提供现场演示并担心被盗，也推荐给程序员-自由职业者，他们想要向(不信任的)客户展示他们的工作。你可以试试：http://cssobfuscator.com|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|498064|entityMap|0|LINK|mutability|MUTABLE|url|http://cssobfuscator.com/^0|4M|O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

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: <a href="http://cssobfuscator.com" rel="nofollow">http://cssobfuscator.com</a>

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

<pre><code>function testing()
{
 var testing;
 var testing2;
 alert(testing+testing2);
}
</code></pre>

into

<pre><code>function a(var a,b;alert(a+b);)
</code></pre>

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. 

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

Minifying and Obsfucating CSS similar to Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道有几个工具能够混淆JavaScript文件，例如通过将一个简单的函数转换为：function testing(){  var testing;  var testing2;  alert(testing+testing2);}转到function a(var a,b;alert(a+b);)我的问题是，像这样的东西是否存在用于CSS/HTML (或者是否有类似效果的工具)？特别是，一个缩小/

问类似于Javascript的CSS的缩小和对象处理
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问类似于Javascript的CSS的缩小和对象处理EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问类似于Javascript的CSS的缩小和对象处理
EN