4

Minfying your stylesheets and script files improves your site's performance.

However, sometimes you might want to make the non-minified versions of the files available - perhaps to comply with the GPL or to implement the optional code-on-demand REST constraint.

Is there a standardised way of doing this? The only way I can think of is to use a naming convention:

http://example.com/css/styles.min.css - minified version

http://example.com/css/styles.css - non-minified version

The trouble with this approach is that it relies on an out-of-band convention. Is there any more rigorous way of implementing non-minified code-on-demand?

Improve this question

2 Answers 2

Reset to default
4

You could have some form of handler (e.g. a .NET handler) for .css files that serves up the minified version by default, but if a certain parameter was found in the querystring (e.g. debug=true) then serve up the non-minified version.

That way you can always reference the .css version, and if there is a minified version available, that can be used in preference.

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

5 Comments

And you could also have a web.config value that disables the "debug" option if necessary.
Put another way: in asp.net, the script files are often minified at runtime rather than upfront. that makes it easy to just bypass the minifier. Personally, I'm holding out for a visual studio extension for the .less T4 transforms that will do it at compile time.
Though you would still have to find a way to communicate the existence of the "debug" paramete.
@Joel, yes, it'd work either way. I have a sub directory with optimised versions (minified, minified and gzipped) that is created at build time. When a request for a .css file comes in, the handler catches it, sees if we're debugging. If not it checks the optimised directory for a suitable file. If it finds on it serves it up. If not, it serves up the original file.
And the debug param can be passed in example.com/css/styles.css?debug=true (The request gets handled by the handler, which can parse the querystring)
2

Suggestion: Use Hypermedia. Benefit: Your choice of URIs doesn't matter as much.

If providing sources in a visible fashion to your end-user, in the course of their normal use of your web application:

<a target="_blank" href="http://www.example.com/css/styles.css"
    rel="sourcecode" title="The non-minified CSS source.">
    Click here for CSS source code. </a>

<a target="_blank" href="http://www.example.com/scripts/buttons.js"
    rel="sourcecode" title="The non-minified JavaScript source.">
    Click here for JavaScript source code. </a>

If providing sources to developer users, outside course of their normal use of the web application, it might make sense to reference them in a non-visible section of the source:

<link rel="sourcecode" type="text/css"
    href="http://www.example.com/css/styles.css"
    title="The non-minified CSS source." />

<link rel="sourcecode" type="text/javascript"
    href="http://www.example.com/scripts/buttons.js"
    title="The non-minified JavaScript source." />

These links will only be available to developers who view the source of the HTML, or folks who have really tricked-out user-agents.

Along the same lines, you could put the non-minified CSS (but not JS) source as an alternate stylesheet.

Note: rel="sourcecode" isn't a standard (I just made it up), but I'm pretty sure it doesn't violate spec; and along with the title it helps to communicate the purpose of the link.

Improve this answer

4 Comments

Interesting. And if you were only interested in humans, you could put a link in a comment at the top of the minified file, which would be a kind of informal hypermedia.
The first seems really ugly in production code; the second example is spot-on awesome.
Yeah, I don't expect that the <a> links are really useful... As noted, that case would only be for a site or app where obtaining the source code was a normal user task. Highly uncommon.
This wouldn't help much with debugging the JavaScript in firebug, though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.