...
Content Distribution Networks (CDNs)
Info | ||||||||
---|---|---|---|---|---|---|---|---|
Hold off on using CDN URLs until
|
Some popular CSS files are hosted on CDNs. To decrease load times (browser accesses a different domain) and potentially improve performance (a different application may have downloaded the CSS file from the CDN and have it in the browser's cache), a CDN can be used instead of obtaining the file from the Resource Server. The CDN must support HTTPS to access the library so user's don't get security warnings.
...
CDNs are recommended for the following CSS files. CSS fies referenced on CDNs should also be placed in the resource server so they are available when off-line in an emergency (see above).
- Font Awesome
Resources Preferred way to access resources from a CDN should use the resourceURL tag library to load them rather than accessing the CDNs directly. This allows the URL to be modified to a non-minified version when aggregation is disabled or running in off-line mode (though the resourceURL tag currently does not do this). E.g. access like:
...
is to put them in a skin.xml file and use the rs:aggregatedResources tag so you get the non-minified versions when desired.
Code Block | ||||
---|---|---|---|---|
| ||||
skin.xml:
<resources xmlns="http://www.jasig.org/uportal/web/skin" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.jasig.org/uportal/web/skin https://source.jasig.org/schemas/resource-server/skin-configuration/skin-configuration-v1.2.xsd">
<css included="plain">//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css</css>
<css included="aggregated">//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css</css>
</resources>
JSP file:
<rs:aggregatedResources path="skin.xml"/> |
The alternative is to load them from the CDNs directly as you would in any webapp.
Code Block | ||||
---|---|---|---|---|
| ||||
<link rel="stylesheet" href=" |
...
//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css |
...
" type="text/css"/> |
CSS Scoping
You'll notice in the first example above in CSS Loading that immediately after the CSS <link>
element is a div with a class name specific to the portlet web application. This div is used to scope all style rules created for the portlet.
...
Tip | ||
---|---|---|
| ||
On your local and dev instance, you can permanently disable JavaScript and CSS aggregation by adding to your .bash_profile: export JAVA_OPTS="$JAVA_OPTS -Dorg.jasig.resourceserver.utils.aggr.aggregated_theme=false” Also see UE Development Tips |
Info | ||||
---|---|---|---|---|
| ||||