Downloading jQuery UI CSS from Google's CDN

Question

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?

Answer 1

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)

• Uncompressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js

• Compressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

• Themes Uncompressed: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast,pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

• Themes Compressed: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast,pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Answer 2

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:

• base: http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
• black-tie: http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css
• blitzer: http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css
• cupertino: http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css
• dark-hive: http://code.jquery.com/ui/1.9.1/themes/dark-hive/jquery-ui.css
• dot-luv: http://code.jquery.com/ui/1.9.1/themes/dot-luv/jquery-ui.css
• eggplant: http://code.jquery.com/ui/1.9.1/themes/eggplant/jquery-ui.css
• excite-bike: http://code.jquery.com/ui/1.9.1/themes/excite-bike/jquery-ui.css
• flick: http://code.jquery.com/ui/1.9.1/themes/flick/jquery-ui.css
• hot-sneaks: http://code.jquery.com/ui/1.9.1/themes/hot-sneaks/jquery-ui.css
• humanity: http://code.jquery.com/ui/1.9.1/themes/humanity/jquery-ui.css
• le-frog: http://code.jquery.com/ui/1.9.1/themes/le-frog/jquery-ui.css
• mint-choc: http://code.jquery.com/ui/1.9.1/themes/mint-choc/jquery-ui.css
• overcast: http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css
• pepper-grinder: http://code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css
• redmond: http://code.jquery.com/ui/1.9.1/themes/redmond/jquery-ui.css
• smoothness: http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css
• south-street: http://code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css
• start: http://code.jquery.com/ui/1.9.1/themes/start/jquery-ui.css
• sunny: http://code.jquery.com/ui/1.9.1/themes/sunny/jquery-ui.css
• swanky-purse: http://code.jquery.com/ui/1.9.1/themes/swanky-purse/jquery-ui.css
• trontastic: http://code.jquery.com/ui/1.9.1/themes/trontastic/jquery-ui.css
• ui-darkness: http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css
• ui-lightness: http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css
• vader: http://code.jquery.com/ui/1.9.1/themes/vader/jquery-ui.css

Answer 3

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

Answer 4

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.

Answer 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" />

Answer 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