My <head> is in the cloud

Not only is the theme’s CSS stylesheet there, but all 14 of the theme’s images are hosted in the correct relative location too. That means you can apply the entire theme to a page with a single CSS reference and no local files.

Even better, while JavaScript and CSS includes are unable to take full advantage of the increased parallelism a CDN offers, the theme’s images do. This makes loading the theme from Google’s CDN particularly effective.

Using it

Using this on your own pages couldn’t be easier. There are no files to download, no paths to worry about, and no configuration is required. Just a reference to jQuery, jQuery UI, and the ThemeRoller theme you want to use will is all you need.

For example, if you wanted to build a quick demo of the jQuery UI Tabs plugin, use these references in the head of your page:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

<!--Toavoid horizontal scrolling inthiscode listing.-->

<base href="http://ajax.googleapis.com/"/>

<!--Reference the theme'sstylesheet on the Google CDN-->

<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"

type="text/css"rel="Stylesheet"/>

<!--Reference jQuery andjQuery UI from the CDN.Remember

thattheorderofthesetwoelementsisimportant-->

<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<!--Initializethetabswhenthedocumentisready-->

<script type="text/javascript">

$(document).ready(function(){

// See the jQuery UI Tabs documentation for

// more information about how this works.

$('#tabs').tabs();

});

</script>

</head>

Note: You shouldn’t use the <base> tag like this in your pages. It affects all links on the page, not just those in the <head>. I’m just using it here to avoid horizontal scrolling (the bane of my existence when posting code here).

That HTML (without a single file or image hosted locally) results in this:

Don’t like the theme in my example? Don’t worry, because all 24 of the standard ThemeRoller presets are also hosted on the CDN. See the end of this post for a full listing.

Nothing’s perfect

There are a couple of potential issues when using these CDN hosted themes.

First, these themes aren’t minified. Minification shaves about 20% off the size of an average ThemeRoller theme’s CSS, which is definitely worthwhile. Hopefully, minified versions will be available at some point (assuming I didn’t miss ones that may already be hiding there somewhere). In the meantime, Google does properly gzip compress them though, which makes the difference less significant.

Second, if you normally customize ThemeRoller’s CSS or images manually, this probably isn’t for you. Lacking control over the base CSS style is something that you can work around, but isn’t worth the complexity and extra HTTP requests.

However, you can still reference the CDN’s images from custom CSS, by using absolute paths.

Conclusion

Overall, this seemingly small feature has been surprisingly useful in my day-to-day development. While it’s technically not very difficult to download and set up local ThemeRoller themes, there’s more friction to it than I care for. Boiling the entire process down to a single CSS reference removes all of that friction.

What do you think? Does this sound useful to you? Are you comfortable leaning on Google’s CDN for your entire jQuery UI theme? Would you use this in production?

Full Theme Listing

The URLs below reference jQuery UI v1.7.2 themes. If 1.7.2 isn’t the latest version at the time that you’re reading this, you should be able to replace 1.7.2 in the URL with the current version and find a current theme hosted on the CDN.

Click any of the thumbnails to view that theme on ThemeRoller.

Click any of the input fields to select the full URL to the theme’s CDN hosted CSS file, ready for copy/pasting into your page.

Share

Your turn. What do you think?

A blog isn't a blog without comments, but do try to stay on topic.
If you have a question unrelated to this post, you're better off posting it on
Stack Overflow instead of commenting here.
Tweet or email me a link to your question there and I'll try to help if I can.

I definitely may do that if it doesn’t seem to get traction or does poorly organically. I sometimes use these silly “viral” titles to catch attention for topics that you might not ever think to search for if you didn’t already know about them.

Because it reduces the chances that your user will get a 304 for jQuery when first hitting your site and removes the benefit of them also getting a 304 on the next site they visit using the Google CDN. Everyone’s better off if we just use one CDN for each library.

Also with the MS CDN, since it is on a microsoft.com domain all cookies will be sent with each request to the CDN. Not necessarily bad, but I would of preferred a separate domain like Google did with their CDN.

Unfortunately, there aren’t any custom bundles hosted on the CDN (as far as I know). Keep an eye out for the new jQuery plugins CDN though, which I believe is supposed to support custom combined bundles.

It is worth noting that the entire jQuery UI 1.7.2 package is only 45k when minified and gzipped. If you find yourself using even one or two more jQuery UI widgets, it would probably make sense to go ahead and reference the full version off the CDN.

That is true. I hope that they’ll not create another mirror for jQuery and jQuery UI. First thought I got after reading your previous comment is that there will be another hoster for jQuery too, not just plugins, but now after new reading I see that you didn’t say that.

Just throwing this out for discussion. I’ve been using code to access the Google hosted jQuery library for a while now. One of my favorite plugins to use with jQuery is the “Form” plugin. My question is, can I use similar code to access the file on github or google? For example I could use this code:

This works, I just want to know if it’s OK to use this technique or is it not “kosher” or frowned upon? It would be nice to leverage google (and/or github etc) to use their hosted libraries. Are these not cached when accessed this way? Pros and Cons…

I don’t know what github’s stance specifically, but it’s considered bad form unless explicitly condoned.

Most repositories aren’t optimized for serving end users anyway. For example, github doesn’t serve that with a far future expires header. Assuming you optimize for end user consumption, hosting it yourself would be better than using github’s copy, even if github is faster.

I have been using this feature for quite a while, and all of a sudden it broke when jqueryui released 1.7.2 themes for me. Of note is the fact that I tend to use the version-ing shorthand when using the google cdn. Instead of 1.7.2 in the url I use 1, which gets me the latest version of the major 1. So my link used to look like this:

One thing to keep in mind is that anything less specific than x.y.z will only send the file back with a +1 hour expires header. In other words, 1, 1.7, and 1.8 send the files back only to be cached for an hour, while 1.7.2 and 1.8.0 send them back with a +1 year expires header.

Because the expires header precludes even checking for a 304, it makes sense that they can’t put a long expires header on the less specific versions. Otherwise, you wouldn’t be able to predict which version your users would be seeing when a new version was released (until the expires duration had elapsed).

You can run a website with jQuery on an intranet with no internet connection – there’s nothing stopping you from hosting the jQuery files locally (you don’t have to use the CDN if you don’t have an internet connection)

Leave a Reply

Use <pre lang="x">code</pre> to include code blocks with syntax highlighting, where x is asp, csharp, html, javascript.
Even inside <pre> and <code> blocks, the open angle brackets in HTML and XML need to be encoded (i.e. convert any
< to &lt;).

Notify me of followup comments via e-mail. You can also subscribe without commenting.