YUI Library Examples: Get Utility: Getting CSS Style Sheets

Using the Get Utility to Add/Remove CSS Stylesheets:

In this example, clicking on the YUI Buttons at the top of the News module adds or removes a CSS stylesheet. The stylesheets are added and purged on-demand by the YUI Get Utility. This technique allows you defer the loading of some of your CSS style rules until after the initial page load ideally, you defer their loading until they're needed...and if they're never needed, they never need to load. There are two performance wins here: Less CSS needs to load up front, which makes the page load more quickly, and there are fewer CSS rules in play which makes the page easier for the browser to render and manipulate. In practice, you'd never want to implement this technique in a situation as simple as the one described in this example it would be much more efficient, with simple rules, to include everything on the page in the initial load. But in a more complex application, the deferred loading of some CSS can be helpful. (Note: This example also illustrates the use of the Get Utility's purge method for removing CSS link nodes from the page. While purge causes an immediate repaint in some A-Grade browsers, others need to be prodded to repaint. While we've illustrated one way to do this here, the use of purge remove stylesheets on the fly is not a light technique. Use it with discretion.)

This example has the following dependencies:


1	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" />
2	<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
3	<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element.js"></script>
4	<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/button/button.js"></script>
5	<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/get/get.js"></script>
	view plain \| print \| ?

We start with a simple form on the page that will post to the Yahoo! News Search engine; if JavaScript is not enabled, the user will still be able to use the functionality of the News module. A placeholder is added for the YUI Buttons that we'll add via script. Those buttons do not need to be part of the page markup, because they aren't required for the core functionality of the page...they just control the CSS addition and removal, which in this case is cosmetic.


1	<div id="container">
2	<div id="buttonContainer">
3	<!--YUI Button instances, created from script, will go here.-->
4	</div>
5
6	<div class="module">
7	<div class="hd"><h2>In the News:</h2></div>
8	<div class="bd" id="results">
9	<!--News stories will be displayed here.-->
10	</div>
11	<div class="ft">
12	<div id="searchControls">
13	<!--Use a real form that works without JavaScript:-->
14	<form method="GET" action="http://search.yahooapis.com/NewsSearchService/V1/newsSearch" id="newsSearch">
15	<label for="searchString">Search Yahoo! News:</label> <input type="text" name="p" id="searchString" value="San Francisco" size="40">
16	<input type="submit" id="getNewsData" value="Search Yahoo! News">
17	</form>
18	</div>
19	</div>
20	</div>
21	</div>
	view plain \| print \| ?

With the markup in place, we can now create our YUI Buttons. We'll use Buttons of type checkbox; these can be clicked on or off to add/remove their corresponding CSS stylesheets. The name property of each Button will be used to identify the specific CSS stylesheet that the Button controls.


1	// YUI Buttons are attractive and effective for "call to action"
2	// tasks like the one here. We'll create buttons purely from
3	// JavaScript; there's no need for this style-change functionality
4	// to be "accessible"; in fact, it's purely cosmetic, so keeping
5	// these buttons out of the page's initial DOM is preferable. We'll
6	// use the "name" property of the button to determine what CSS to
7	// load when each button is clicked:
8	var borderButton = new Button({
9	id: "borderButton",
10	type: "checkbox",
11	name: "border",
12	label: "Border CSS",
13	container: "buttonContainer"
14	});
15	var backgroundButton = new Button({
16	id: "backgroundButton",
17	type: "checkbox",
18	name: "background",
19	label: "Background CSS",
20	container: "buttonContainer"
21	});
22	var textButton = new Button({
23	id: "textButton",
24	type: "checkbox",
25	name: "text",
26	label: "Text CSS",
27	container: "buttonContainer"
28	});
	view plain \| print \| ?

The Get Utility is invoked when a Button's checked state changes; this could happen via a click or by tabbing to a Button and pressing return or enter. When that happens, the Button's onCheckedChange event fires. At that point, we determine whether the new button state is checked (in which case we bring in the related CSS file) or unchecked (in which case we purge the related CSS file).


1	// Checkbox buttons are either checked or unchecked; when their state
2	// changes, their "onCheckedChange" event fires. We'll use that
3	// event to trigger the loading and unloading of CSS using the Get
4	// Utility.
5	var onCheckedChange = function() {
6	// Which button was actuated?
7	var name = this.get("name");
8	// The button's checked state has already been updated, so if
9	// true we load the necessary CSS:
10	if(this.get("checked")) {
11	// We'll use the 'data' parameter to pass through the name
12	// of the CSS file to our onSuccess handler. This allows
13	// us to have access to the purge method when we want
14	// to remove the CSS.
15	//
16	// In addition, we use the 'insertBefore' property to specify
17	// the id of a style block we want to insert the new nodes
18	// before. By doing this, we can assure that any style overrides
19	// for the dynamically loaded CSS will be applied in the correct
20	// order.
21	Get.css("../get/assets/" + name + ".css", {
22	data: name,
23	insertBefore: "styleoverrides",
24	onSuccess: onSuccess
25	});
26	} else {
27	// In onSuccess, we save a reference to the callback object
28	// in an associative array (tIds) indexed by the CSS name. That
29	// allows us here, when the CSS needs to be removed, to simply
30	// call the purge method corresponding to the item we want to
31	// remove. Purge clears all the link nodes that were created
32	// as part of the transaction (in this case, just a single
33	// link node).
34	tIds[this.get("name")].purge();
35	YAHOO.log("CSS was successfully purged; our object " +
36	"containing transaction ids now looks like " +
37	"this: " + YAHOO.lang.dump(tIds), "info", "example");
38
39	// Some A-Grade browsers won't repaint automatically when CSS link nodes
40	// are removed. You can nudge these browsers to repaint by adding
41	// a blank CSS stylesheet to the page:
42	Get.css("../get/assets/neutral.css");
43	}
44	};
45
46	// Now we can subscribe our onCheckedChange function to each
47	// of our three YUI Buttons' "checkedChange" event:
48	borderButton.on("checkedChange", onCheckedChange);
49	backgroundButton.on("checkedChange", onCheckedChange);
50	textButton.on("checkedChange", onCheckedChange);
	view plain \| print \| ?

// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires.  We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
    // Which button was actuated?
    var name = this.get("name");
    // The button's checked state has already been updated, so if
    // true we load the necessary CSS:
    if(this.get("checked")) {
        // We'll use the 'data' parameter to pass through the name
        // of the CSS file to our onSuccess handler.  This allows
        // us to have access to the purge method when we want
        // to remove the CSS.
        //
        // In addition, we use the 'insertBefore' property to specify
        // the id of a style block we want to insert the new nodes
        // before.  By doing this, we can assure that any style overrides
        // for the dynamically loaded CSS will be applied in the correct
        // order.
        Get.css("../get/assets/" + name + ".css", {
                data:         name,
                insertBefore: "styleoverrides",
                onSuccess:    onSuccess
        });
    } else {
        // In onSuccess, we save a reference to the callback object
        // in an associative array (tIds) indexed by the CSS name.  That 
        // allows us here, when the CSS needs to be removed, to simply
        // call the purge method corresponding to the item we want to 
        // remove.  Purge clears all the link nodes that were created
        // as part of the transaction (in this case, just a single 
        // link node).
        tIds[this.get("name")].purge();
        YAHOO.log("CSS was successfully purged; our object " +
                  "containing transaction ids now looks like " +
                  "this: " + YAHOO.lang.dump(tIds),  "info", "example");

// Some A-Grade browsers won't repaint automatically when CSS link nodes
        // are removed.  You can nudge these browsers to repaint by adding
        // a blank CSS stylesheet to the page:
        Get.css("../get/assets/neutral.css");
    }
};

// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);

In the codeblock above, we call the purge method to remove CSS files when Buttons are unchecked. The purge function is part of the callback object passed to the onSuccess or onFailure handler registered with the Get Utilty when the css method is called. In our onSuccess handler, we will save that callback object in an associative array so we can access purge as needed when a Button is unchecked:


1	// As noted above, in onSuccess we want to save the callback
2	// object in an associative array indexed by CSS file name so that
3	// we can purge the link nodes later if the CSS file needs to be
4	// removed.
5	var onSuccess = function(o) {
6	tIds[o.data] = o;
7	YAHOO.log("CSS was successfully returned; our object " +
8	"containing transaction ids now looks like " +
9	"this: " + YAHOO.lang.dump(tIds), "info", "example");
10	}
11
12	})();
	view plain \| print \| ?

The full JavaScript code for the CSS portion of this example is as follows:


1	//Encapsulating our code in a self-executing anonymous function
2	// is one way to create a namespace:
3	(function() {
4
5	// shortcuts and other variables:
6	var Button = YAHOO.widget.Button,
7	Event = YAHOO.util.Event,
8	Dom = YAHOO.util.Dom,
9	Get = YAHOO.util.Get,
10	elContainer = Dom.get("container"),
11	tIds = {};
12
13	// YUI Buttons are attractive and effective for "call to action"
14	// tasks like the one here. We'll create buttons purely from
15	// JavaScript; there's no need for this style-change functionality
16	// to be "accessible"; in fact, it's purely cosmetic, so keeping
17	// these buttons out of the page's initial DOM is preferable. We'll
18	// use the "name" property of the button to determine what CSS to
19	// load when each button is clicked:
20	var borderButton = new Button({
21	id: "borderButton",
22	type: "checkbox",
23	name: "border",
24	label: "Border CSS",
25	container: "buttonContainer"
26	});
27	var backgroundButton = new Button({
28	id: "backgroundButton",
29	type: "checkbox",
30	name: "background",
31	label: "Background CSS",
32	container: "buttonContainer"
33	});
34	var textButton = new Button({
35	id: "textButton",
36	type: "checkbox",
37	name: "text",
38	label: "Text CSS",
39	container: "buttonContainer"
40	});
41	// Making available outside the anonymous function so these can be
42	// introspected in FireBug if desired:
43	YAHOO.example.buttons = [borderButton, backgroundButton, textButton];
44
45	// Checkbox buttons are either checked or unchecked; when their state
46	// changes, their "onCheckedChange" event fires. We'll use that
47	// event to trigger the loading and unloading of CSS using the Get
48	// Utility.
49	var onCheckedChange = function() {
50	// Which button was actuated?
51	var name = this.get("name");
52	// The button's checked state has already been updated, so if
53	// true we load the necessary CSS:
54	if(this.get("checked")) {
55	// We'll use the 'data' parameter to pass through the name
56	// of the CSS file to our onSuccess handler. This allows
57	// us to have access to the purge method when we want
58	// to remove the CSS.
59	//
60	// In addition, we use the 'insertBefore' property to specify
61	// the id of a style block we want to insert the new nodes
62	// before. By doing this, we can assure that any style overrides
63	// for the dynamically loaded CSS will be applied in the correct
64	// order.
65	Get.css("../get/assets/" + name + ".css", {
66	data: name,
67	insertBefore: "styleoverrides",
68	onSuccess: onSuccess
69	});
70	} else {
71	// In onSuccess, we save a reference to the callback object
72	// in an associative array (tIds) indexed by the CSS name. That
73	// allows us here, when the CSS needs to be removed, to simply
74	// call the purge method corresponding to the item we want to
75	// remove. Purge clears all the link nodes that were created
76	// as part of the transaction (in this case, just a single
77	// link node).
78	tIds[this.get("name")].purge();
79	YAHOO.log("CSS was successfully purged; our object " +
80	"containing transaction ids now looks like " +
81	"this: " + YAHOO.lang.dump(tIds), "info", "example");
82	}
83	};
84
85	// Now we can subscribe our onCheckedChange function to each
86	// of our three YUI Buttons' "checkedChange" event:
87	borderButton.on("checkedChange", onCheckedChange);
88	backgroundButton.on("checkedChange", onCheckedChange);
89	textButton.on("checkedChange", onCheckedChange);
90
91	// As noted above, in onSuccess we want to save the callback
92	// object in an associative array indexed by CSS file name so that
93	// we can purge the link nodes later if the CSS file needs to be
94	// removed.
95	var onSuccess = function(o) {
96	tIds[o.data] = o;
97	YAHOO.log("CSS was successfully returned; our object " +
98	"containing transaction ids now looks like " +
99	"this: " + YAHOO.lang.dump(tIds), "info", "example");
100	}
101
102	})();
	view plain \| print \| ?

//Encapsulating our code in a self-executing anonymous function
// is one way to create a namespace:
(function() {

// shortcuts and other variables:
var Button = YAHOO.widget.Button,
    Event = YAHOO.util.Event,
    Dom = YAHOO.util.Dom,
    Get = YAHOO.util.Get,
    elContainer = Dom.get("container"),
    tIds = {};

// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here.  We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable.  We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
    id: "borderButton",
    type: "checkbox",
    name: "border",
    label: "Border CSS",
    container: "buttonContainer" 
});
var backgroundButton = new Button({
    id: "backgroundButton",
    type: "checkbox",
    name: "background",
    label: "Background CSS",
    container: "buttonContainer"
});
var textButton = new Button({
    id: "textButton",
    type: "checkbox",
    name: "text",
    label: "Text CSS",
    container: "buttonContainer"
});
// Making available outside the anonymous function so these can be
// introspected in FireBug if desired:
YAHOO.example.buttons = [borderButton, backgroundButton, textButton];

// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
    tIds[o.data] = o;
    YAHOO.log("CSS was successfully returned; our object " +
              "containing transaction ids now looks like " +
              "this: " + YAHOO.lang.dump(tIds), "info", "example");
}

})();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: Get Utility: Getting CSS Style Sheets

Using the Get Utility to Add/Remove CSS Stylesheets:

Configuration for This Example

YUI Logger Output:

Logger Console

Get Utility Examples:

More Get Utility Resources:

YUI Library Examples: Get Utility: Getting CSS Style Sheets

Get Utility: Getting CSS Style Sheets

In the News:

Retrieving news search results for for San Francisco:

Using the Get Utility to Add/Remove CSS Stylesheets:

Configuration for This Example

YUI Logger Output:

Logger Console

Get Utility Examples:

More Get Utility Resources: