9

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?

Improve this question
4
  • Surely when you minify something, you are throwing readability out the window dompletely! Commented Jan 4, 2011 at 20:11
  • I agree - I'm just wondering if the benefits of obfuscation are worth the increases (if any) in performance. Commented Jan 4, 2011 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. Commented Jan 4, 2011 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! Commented Jan 4, 2011 at 20:47

8 Answers 8

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

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".
any "Web Developer" who believes their work should be safe from reuse is unworthy of the title.
+1 for your comment zzzzBov. :)
@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.
@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.
|
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.

Improve this answer

2 Comments

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
account those 2kb for millions of pageviews, and it will make a difference :)
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.

Improve this answer

4 Comments

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

Improve this answer

Comments

1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

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

Improve this answer

Comments

-2

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

Improve this answer

1 Comment

Hi, can I include this in my build process using gulp

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.