views:

152

answers:

1

I have been reading about css and js compression and minimizing. In particular that post http://stackoverflow.com/questions/890561/concatenate-minify-js-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!

+1  A: 

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

unomi
Thank you! I didn't think about that. Now what i do is load the stylesheet when the page loads and then when the user changes the style i change dynamically the href attribute with the stylesheet requested! I want to vote for your answer but i can't since i don't have 15 points of reputation!
fabianadipolo
Well, you can still accept it as the answer :)
unomi
There you go, now you can vote as well :p
unomi
:D :D :D thank you!!!!
fabianadipolo