Login/Register
Downloading jQuery UI CSS from Google's CDN
Asked Answered
Solved jquerycssjquery-uicdngoogle-ajax-libraries
A

7

460

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?

Avivah answered 4/5, 2009 at 14:45 Comment(0)
M
580

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)

Moustache answered 4/5, 2009 at 14:45 Comment(11)
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. – Algarroba
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 – Antisemite
@Drew: Or he might use Reducisaurus too. :) – Gentianella
@Alix, thanks for the link. Looks like a useful service. – Algarroba
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: ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/… – Yelp
@Yelp 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. – Invulnerable
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 – Horacehoracio
To get the minified CSS from Google CDN, just replace .css with .min.css – Postliminy
Note, to include the above links in your code, leave out the protocol, e.g. <link rel="stylesheet" href="//ajax.googleapis.com/etc" /> 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. – Selestina
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. developers.google.com/speed/libraries/devguide#jquery-ui – Blockbusting
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 -> blog.cdemi.io/using-subresource-integrity-sri-with-public-cdns – Twenty
M
67

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:

Melitamelitopol answered 9/11, 2012 at 18:44 Comment(3)
It supports https now (at least since the time of this post) – Andreandrea
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 ? – Floccule
@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 – Basra
B
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

Buckden answered 11/3, 2012 at 0:38 Comment(0)
T
7

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

Terret answered 27/8, 2014 at 10:28 Comment(2)
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. – Vagus
Here are updated statistics: blog.cloudharmony.com/2015/02/… The majority of websites seem to use CDNs now. More data: w3techs.com/technologies/details/cd-jquerycdn/all/all – Vagus
G
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.

Gabionade answered 4/5, 2009 at 14:49 Comment(2)
I tried adding loading it using google load statement...would not load the css....checked it. – Avivah
here's an example url that seems to work: ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/… – Gabionade
B
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" />
Birchfield answered 25/5, 2013 at 17:24 Comment(0)
F
1

jQuery UI < 1.13 is considered a security vulnerability now by Google Page Speed Insights.

Use a security-fixed more current version instead. As of 2022 this would be 1.13.2

Ex:

Full HTML Tag Examples:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
Fight answered 29/10, 2022 at 18:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.