454

I am planning on using Google to download the jQuery lib for both UI and Core. My question is, do they allow me to download the CSS for it or should I have to host it myself?

Also if I use Google to load how should I load other plugins? Can I compress all plugins together or should it be its own separate file?

Shog9
  • 146,212
  • 34
  • 221
  • 231
coool
  • 7,725
  • 12
  • 50
  • 77

6 Answers6

576

The Google AJAX Libraries API, which includes jQuery UI (currently v1.10.3), also includes popular themes as per the jQuery UI blog:

Google Ajax Libraries API (CDN)

antony.trupe
  • 10,028
  • 10
  • 54
  • 81
cletus
  • 578,732
  • 155
  • 890
  • 933
  • 2
    Note that these CSS scripts are not currently compressed/minimised, meaning that you could offer reduced size versions (by about 26% according to Google's PageSpeed plugin for Firefox) from your own domain, which might be faster for your users if your connection is decent and they don't already have the file cached locally. – Drew Noakes Jan 30 '11 at 10:15
  • 120
    every time i want to find this CDN I type "jquery ui css google cdn" and this post is the most direct way to the list of them all.. I just want to thank you +1 – mazlix Jun 09 '11 at 04:36
  • 1
    @Drew: Or he might use Reducisaurus too. :) – Alix Axel Jul 18 '11 at 00:48
  • 1
    @Alix, thanks for [the link](http://code.google.com/p/reducisaurus/). Looks like a useful service. – Drew Noakes Jul 18 '11 at 10:44
  • 1
    You can also CUT OUT the minor version numbers from the URL to automatically grab the latest CSS/JS, always. Just leave the major version number in place. Example: http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css – miCRoSCoPiC_eaRthLinG Sep 15 '11 at 04:38
  • @miCRoSCoPiC_eaRthLinG you may want to avoid doing that, actually, since Google sets very short cache times on the non-fully-specified versions of libraries. It was only around an hour the last time I checked. – cdeszaq Oct 05 '12 at 15:44
  • 1
    You also wouldn't want to get the latest version without testing that it still works. For instance, the base theme is no longer included in the CDN build and the link in the answer is broken. You can also get the minified versions from Google's CDN. ie [smoothness](http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.min.css) – Sean Mar 26 '13 at 19:12
  • To get the minified CSS from Google CDN, just replace .css with .min.css – Marco Bettiolo May 22 '13 at 09:57
  • 1
    Note, to include the above links in your code, leave out the protocol, e.g. `` and that way it will always include the correct version depending on the protocol requested by the user. Same goes for including jQuery and jQuery UI JS files. – Mike Jul 03 '13 at 19:39
  • jQuery-ui is now at version 1.10.4. Just update the version in the above. Google's Hosted Libraries - Developer's Guide is a great resource for all of the Google-hosted library CDN names. https://developers.google.com/speed/libraries/devguide#jquery-ui – wolfstevent Mar 11 '14 at 12:01
  • The domain `ajax.googleapis.com` supports HTTPS...there's no harm in using HTTPS all the time as opposed to protocol relative URLs. Also, here's a how-to on adding sub-resource integrity to your script tags -> https://blog.cdemi.io/using-subresource-integrity-sri-with-public-cdns/ – myconode Nov 28 '16 at 19:47
63

jQuery now has a CDN access:

code.jquery.com/ui/[version]/themes/[theme name]/jquery-ui.css

And to make this a little more easy, Here you go:

Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
Dustin Woodard
  • 889
  • 9
  • 10
  • 4
    It supports https now (at least since the time of this post) – Ivan Akcheurov Jan 13 '14 at 09:02
  • How can you use the images associated with this CDN, there are missing locaaly and I don't want to download them. Is there a way to use the one stored in the CDN ? – Baptiste Pernet Aug 27 '15 at 22:26
  • @BaptistePernet: The CDN also provides all the associated images, and as the `url` statements are all relative to the `css` file location, the client will automatically grab the images from the CDN – MestreLion Feb 01 '16 at 03:18
29

Google is hosting jQueryUI css at this link https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css

If you look at this code directly, it is importing the css using @import which can be slow. You may want to factor the import into its parts to gain a slight performance benefit:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css

Community
  • 1
  • 1
6

As Obama says "Yes We Can". Here is the link to it. developers.google.com/#jquery

You need to use

Google

ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/jquery-ui.min.js
ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

jQuery CDN

code.jquery.com/ui/[VERSION NO]/jquery-ui.min.js
code.jquery.com/ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Microsoft

ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/jquery-ui.min.js
ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Find theme names here http://jqueryui.com/themeroller/ in gallery subtab

.

But i would not recommend you hosting from cdn for the following reasons

  1. Although your chance of hit rate is good in case of Google CDN compared to others but it's still abysmally low.(any cdn not just google).
  2. Loading via cdn you will have 3 requests one for jQuery.js, one for jQueryUI.js and one for your code. You might as will compress it on your local and load it as one single resource.

http://zoompf.com/blog/2010/01/should-you-use-javascript-library-cdns

aWebDeveloper
  • 31,131
  • 35
  • 150
  • 224
  • The article you linked is from 2010. Most of the data he mentioned is outdated. There is a much better hit rate now, a lot more websites are using Google CDN now than back in 2010. – Trader Apr 23 '15 at 12:00
  • Here are updated statistics: http://blog.cloudharmony.com/2015/02/cdn-marketshare-alexa-fortune-500.html The majority of websites seem to use CDNs now. More data: http://w3techs.com/technologies/details/cd-jquerycdn/all/all – Trader Apr 23 '15 at 18:22
5

You could use this one if you mean the jQuery UI css:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
notquiteamonad
  • 857
  • 1
  • 10
  • 25
5

I would think so. Why not? Wouldn't be much of a CDN w/o offering the CSS to support the script files

This link suggests that they are:

We find it particularly exciting that the jQuery UI CSS themes are now hosted on Google's Ajax Libraries CDN.

Scott Evernden
  • 35,319
  • 14
  • 75
  • 83
  • I tried adding loading it using google load statement...would not load the css....checked it. – coool May 04 '09 at 14:50
  • 6
    here's an example url that seems to work: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css – Scott Evernden May 04 '09 at 14:58