Minifying and Obsfucating CSS similar to Javascript

Question

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

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.

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

Surely when you minify something, you are throwing readability out the window dompletely! — Marcus Whybrow, Jan 04 '11 at 20:11
I agree - I'm just wondering if the benefits of obfuscation are worth the increases (if any) in performance. — Rion Williams, Jan 04 '11 at 20:12
I think the only benefit is that the file is smaller, so your saving bandwidth if you are pushing that out to thousands of user agents a day. — Marcus Whybrow, Jan 04 '11 at 20:14
What's the point in obfuscating CSS and HTML? The classes still have to match. All you lose is semantic, and it is still quite easy to "steal" whatever you want... come on... even with obfuscation, firebug and others are still able to show the CSS with point-and-click! — Couto, Jan 04 '11 at 20:47

score 11 · Accepted Answer · answered Jan 04 '11 at 20:13

11

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.

answered Jan 04 '11 at 20:13

Kevin Sylvestre

37,288
33
152
232

Thanks Kevin - I was just wondering if there were any tools out there to assist in performing a task like that (actually obfuscating a CSS file and then going through and changing the actual HTML accordingly) as I am sure some anal designers out there wouldn't want a chance at their work being "reused". – Rion Williams Jan 04 '11 at 20:16
19

any "Web Developer" who believes their work should be safe from reuse is unworthy of the title. – zzzzBov Jan 04 '11 at 20:21
+1 for your comment zzzzBov. :) – Rion Williams Jan 04 '11 at 20:37
@Rionmonster, @zzzzBov: but how would any web-design work *not* be reusable? There **has** to be a link between elements, class-names, `id` s and the CSS style rules. Given that link *has* to be there it doesn't matter how much you, or 'they,' obfuscate class-names. It might make it trickier, but certainly nothing like as tricky as JS, or PHP (among many others), obfuscation. – David Thomas Jan 04 '11 at 20:40
2

@zzzzBov, _should_ be or _will_ be? Copyright law _should_ protect a developer's work from reuse. _Will_ it? Probably not. Unless it has been explicitly stated that the css/javascript/html/images/websites have been licensed for reuse it is ILLEGAL to use any portion of that content without consent of the author. – David Murdoch Jan 04 '11 at 20:48
@David Thomas. I thought PHP developers just wrote their code to look obfuscated to begin with! :-p j/k – David Murdoch Jan 04 '11 at 20:49
@David Thomas, @David Murdoch: I was stating that any content available on the web **will not** and **should not** be safe from reuse. Copyright **should not** protect the content from *reuse*. Any belief otherwise shows an inherent misunderstanding of copyright and [fair use](http://en.wikipedia.org/wiki/Fair_use). – zzzzBov Jan 04 '11 at 20:56
@zzzzBov, I meant only to include you in the conversation, not trying to imply your position was in any way restrictive =) @David Murdoch, god only knows what PHP devs get up to, or why... =p – David Thomas Jan 04 '11 at 20:59
@zzzzBov: The following isn't really aimed toward you, you seem to known enough about copyright law yourself; but rather, it is for the passerby interested in the topic. – David Murdoch Jan 04 '11 at 21:22
Fair-Use isn't meant to allow professionals to rip one another off; fair-use is a balancing act. For instance, if I have an online shopping cart and you copy "myshoppingcart.css" over to your own shopping cart (along with the HTML, of course) I would argue that isn't fair-use. So, in most for-profit circumstances that are not of an "artistic relevance", reuse/copying of a web application's source (CSS,HTML,JavaScript,C#,php) will likely not fall under fair use (and will probably be within the domain of the DMCA). – David Murdoch Jan 04 '11 at 21:23
(@David)*2 wasn't sure if I was misunderstood, so I made sure to clarify. – zzzzBov Jan 04 '11 at 21:24
I believe this is not about stopping people from stealing your code, but about performance gain in big projects, it's a very significant improvement, as it affects css, html and js file sizes, and improves gzipping as well, even if you get 10kb out of your gzipped code, add that to millions of visits, it can even save you something on hosting as well, the best option for that would be google closure compiler https://code.google.com/p/closure-stylesheets/ – Gustavo Siqueira Jun 09 '15 at 09:56
This is not an answer. Basically you're only saying that obfuscating CSS and HTML is difficult and nothing else. @zzzzBov, what about [Google - printscreen](http://imgur.com/ULThut9)? Do you think they are idiots for obfuscating their code? – Victor Oct 28 '15 at 20:57
@Victor, [they're not obfuscating their code to prevent theft](http://stackoverflow.com/q/6561667/497418), they're minifying it for performance. – zzzzBov Oct 28 '15 at 21:28

score 9 · Answer 2 · answered Jul 06 '11 at 20:42

9

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

answered Jul 06 '11 at 20:42

zah

5,314
1
34
31

HTML Muncher is a great tool. However, the savings are never going to be huge if you are already using gzip. Original = 148k - **Minify+gzip = 17929 v. Munched+minify+gzip = 15905** - a saving of roughly 2k for a lot of work – CalM Dec 14 '13 at 00:58
account those 2kb for millions of pageviews, and it will make a difference :) – Gustavo Siqueira Jun 09 '15 at 10:04

score 2 · Answer 3 · answered Jan 04 '11 at 20:14

2

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.

answered Jan 04 '11 at 20:14

Hank Gay

70,339
36
160
222

Thanks Hank - I had taken a brief look at the YUI Compressor earlier - as I believe it "minifies CSS" as much as it can (removes all white-space). I just wanted to see if there were any similar to that of the JavaScript-style tools. (Oh and don't worry - this wasn't asked due to an issue, more of just curiosity) – Rion Williams Jan 04 '11 at 20:19
Hank - if you work on a large project (particularly in an enterprise environment) it's common to encounter a myriad of CSS files which require minification in order to reduce the performance impact on the site. I've seen a few large companies use YUI Compressor to handle CSS minification.Obfuscation, however... not so much. – calvinf Jan 04 '11 at 23:14
@calvinf I'm sure there are exceptions to the rule, but most sites really shouldn't need reams and reams of CSS. Even if you do need a *lot* of CSS, how many KBs do you need to start with that a CSS minifier makes a substantial impact? Wouldn't concatenating them all into one file, caching tweaks, and GZip compression all make a much bigger impact? – Hank Gay Jan 05 '11 at 00:45
I agree those tweaks are important, too. Minification is important because on some sites every kilobyte matters - gzip isn't as good as gzip + minification. – calvinf Jan 05 '11 at 17:51

score 1 · Answer 4 · edited Jan 04 '11 at 20:36

1

Take a look at this: 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...

edited Jan 04 '11 at 20:36

David Murdoch

87,823
39
148
191

answered Jan 04 '11 at 20:19

score 1 · Answer 5 · answered Jan 04 '11 at 21:12

If you use Ruby, here is a Ruby CSS Minifier 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%).

score 0 · Answer 6 · answered Jan 04 '11 at 21:04

Take a look at html5boilerplate.com; 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.

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.

Read this for Google's detailed recommendations on the above method.

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.

score -1 · Answer 7 · answered Apr 05 '14 at 08:46

-1

There are many online tools you can use for things like css minification. Here is an online css minifier! 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.

answered Apr 05 '14 at 08:46

t_warsop

1,170
2
24
38

score -2 · Answer 8 · answered Sep 19 '14 at 05:33

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

Hi, can I include this in my build process using gulp – Bhargav Feb 25 '20 at 12:32 — Bhargav, Feb 25 '20 at 12:32

Minifying and Obsfucating CSS similar to Javascript

8 Answers8

Linked