How to unload CSS dynamically (before loading new)

[bartvanderwal]

Is there anyway to unload a loaded CSS with this package?

This would allow dynamically changing the CSS, for instance based on user input.

I notice on a HTML control/component that I am dynamically loading uses this css loader plugin, that on requiring/loading other .css files later, the styles seems to become 'stacked'. By that I mean that earlier styles are not removed again, only the new .css is put on top of it.

See this screenshot for an explanation. It shows that the order in which .css'es are loaded is of importance, while in my case I want them to be mutually exclusive, i.e. unload old CSS first before loading new (I'm using bootstrap themes).

[bartvanderwal]

For now I managed to implement a workaround where I remove the link node with the dynamically loaded CSS based on the fact that I know it's URL:

$('link[href="' + oldBootstrapThemeCss + '"]').remove();

Perhaps a more robust solution can be found, if I have time I will try to see if I could extend the code.

Thought

I browsed the existing code and see that the CSS is always loaded in an ID with a unique ID using function _getUniqueId in the _createLink function.

By using the same ID on reload instead I think the old stylesheet wil be automatically unloaded.

For this I would propose an extension of the loader plugin syntax of css!path/css-file to css!path/css-file@element-query that allows specifying explicit DOM element behind the @ part. The css file is then given this ID. For instance a simple ID 'css@path/css-file@my-control-css`

The @element-query part is optional and if no @ is specified the current _getUniqueId would be used. Perhaps using the _getUniqueId could also be done if no element is found with that ID, although it would probably be better to throw a specific exception then.

Alternatively having an empty @ part, e.g. css@path/css-file.css@ would generate an ID with the same value as the provided css name (minus the .css file extension). E.g. :

<link href="path/css-file.css" id="css-file"

One reason for this extended @-syntax is that I would actually like to have a similar loader for HTML content (e.g. a html!.. builder). This could use the same syntax, to have a nice consistent way of loading anything dynamically. For HTML it is especially common to have to specify an ID (or other query) to denote the element to load the HTML into (e.g. AJAX call). For that it should probably be extended to allow other things then ID's as well.. :).

[pmorch]

In Removing or replacing a stylesheet (a <link>) with JavaScript/jQuery - Stack Overflow the question says:

although the element is removed, the styles are still applied to the current page in both Opera and Firefox).
Is there any other way?

The answer says:

To cater for ie you have to set the stylesheet to be disabled as it keeps the css styles in memory so removing the element will not work, it can also cause it to crash in some instances if I remember correctly.

Check out that answer.

So appart from the obvious cross-browser issues, you also need to consider at least this: There is a limit on how many style sheets you can have on a page. Will navigating back-and-forth repeatedly trigger this limit? Will removing one sheet and then adding a new one increase the sheet count? Then you've got a problem.

However, there is perhaps a better approach: twitter bootstrap - How to dynamically change themes after clicking a drop down menu of themes - Stack Overflow basically suggests:

$("#stylesheet").attr('href',themeurl);

See it in action.