Supplying non-minified CSS/javascript on demand

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.

  • Owl Carousel 2 resize window bug
  • CI - Loading controller with Javascript button
  • Fill the browser window with random digits
  • CSS3 Circular Menu
  • How to add HTML input into sweet alert?
  • I'm unable to inject a style with an “!important” rule
  • 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?

  • Android browser bottom control bar overlays content
  • HTML sections 100% height of viewport
  • Scroll the page on drag with jQuery
  • How is the swoosh done on beautyoftheweb.com?
  • Split HTML table to fit viewport width
  • Canvas unable to find context when requestAnimationFrame is called - ES6
  • 2 Solutions collect form web for “Supplying non-minified CSS/javascript on demand”

    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.

    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.