I have been reading about css and js compression and minimizing. In particular that post Concatenate and minify JavaScript on the fly OR at build time – ASP.NET MVC Im developing a MVC ASP.NET application and using Combres for minimizing and compress files. I’m not too happy and now i’m evaluating MVCScriptManager as suggested by Scott in the post mentioned.
However i have a problem with my css files: In my site i allow the user to change the style of the page, i acomplish this task defining different stylesheets.
To change the style when user click a button, i enable the proper style using the “title” attribute of the link tag:
$('link[rel*=style][title]').each(function(i) {
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
And in the head section of my page what i have is:
<link rel="stylesheet" type="text/css" href="/Content/css/green.css" title="Green" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/Content/css/cyan.css" title="Cyan" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/Content/css/orange.css" title="Orange" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/Content/css/navy.css" title="Navy" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/Content/css/purple.css" title="Purple" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/Content/css/pink.css" title="Pink" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/Content/css/wine.css" title="Wine" media="screen" />
The problem is when i combine the stylesheets i cannot rely on the title and rel attributes to do the switch. Any help or advice would be appreciated!
Thank’s in advance!
well, really you should be loading the CSS files on demand.
So that if the user chooses pink, the pink.css
<link>would be inserted as the last element in<head>.