Script: not a type-ical tag

Problem

I was talking to Paul Irish today regarding some tweaks I was doing to html5boilerplate‘s code when I hit the usual kludge you see when dealing with JavaScript in .htaccess files or <VirtualHost> directives. Something to the effect of

# compress JavaScript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# [ ... snip ... ]
FilterProvider  COMPRESS  DEFLATE resp=Content-Type
                         /(text/|(application/(x-)?)javascript)/
# [ ... snip ... ]
# add expires to JavaScript
ExpiresByType application/javascript    "access plus 2 months"
ExpiresByType application/x-javascript  "access plus 2 months"
ExpiresByType text/javascript           "access plus 2 months"

And I wondered why we, as developers, stand for using JavaScript with up to 3 mime/content-types when it was clearly specified 5 years ago in RFC 4329 that we’d at least like to use only one?!

From that spec:

Use of the "text" top-level type for this kind of content is
known to be problematic.  This document thus defines
text/javascript and text/ecmascript but marks them as
"obsolete".  Use of experimental and unregistered media
types, as listed in part above, is discouraged. The media
types,

   * application/javascript
   * application/ecmascript

which are also defined in this document, are intended for
common use and should be used instead.

I know that this is an informational RFC, not a standards track one, but I wanted to see how close modern (and not so modern) browsers were doing at accomplishing this goal of allowing external script files with the Content-Type: application/javascript.

Test

So, I threw together a test page to check how server-side Content-Type HTTP headers and <script type="attributes"> affected their execution. Here’s how I set up the types with Apache on my web server:

AddType application/javascript      .aj
AddType application/x-javascript    .axj
AddType text/javascript             .tj
AddType zomg/totally-fake           .ztf

And then I created a file with each of those extensions with a unique message that would document.write itself to my test page if they were execute correctly. Here’s the basic gist of the test page:

<h1>With type="XXX/YYY":</h1>
<script type="XXX/YYY" src="write.aj"></script>
<script type="XXX/YYY" src="write.axj"></script>
<script type="XXX/YYY" src="write.tj"></script>
<script type="XXX/YYY" src="write.ztf"></script>

And I also added a test with <script> tags with no type attribute at all, as per past advice I remember hearing from Doug Crockford’s site.

Results

Here were my results in a nifty table format (X = it worked!):

Conclusion

So, given this data, I came to one very clear conclusion:
never use <script type=”zomg/totally-fake”> .

In addition to this epiphany, I plan only serving my JavaScript with one Content-Type – application/javascript as it had absolutely no impact on anything and is the right thing to do ^TM for the open web.

I’m also going to simply omit type="XXX/YYY" from my markup when I’m not validating my page as XHTML 1.0, as it saves bytes and works the same way (yup, even in HTML5). I do have a few sites that are valid XHTML 1.0, so it does matter in those cases, so in those cases I’ll use type="text/javascript" so I can continue passing and working in every browser possible.

Will you do the same?

Update:

I tested quite a few more combinations and wrote a follow-up article about a couple more things I found out here.