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:

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.

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.

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).

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:

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

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.