Объединить и минимизировать CSS с атрибутами title и rel - PullRequest
2 голосов
/ 11 июня 2010

Я читал о сжатии и минимизации css и js.В частности, этот пост Объединяет и минимизирует JavaScript на лету ИЛИ во время сборки - ASP.NET MVC Я занимаюсь разработкой приложения MVC ASP.NET и использую Combres для минимизации и сжатия файлов.Я не слишком счастлив, и теперь я оцениваю MVCScriptManager, как предложено Скоттом в упомянутом посте.

Однако у меня есть проблема с моими CSS-файлами: на моем сайте я разрешаю пользователю изменять стиль страницы, я выполняю эту задачу, определяя различные таблицы стилей.

Чтобы изменить стиль, когда пользователь нажимает кнопку, я включаю правильный стиль, используя атрибут «title» тега ссылки:

$('link[rel*=style][title]').each(function(i) {
   this.disabled = true;
   if (this.getAttribute('title') == styleName) this.disabled = false;
});

И в разделе заголовка моей страницы, чтоу меня есть:

<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" />

Проблема в том, что когда я объединяю таблицы стилей, я не могу полагаться на атрибуты title и rel для переключения.Буду признателен за любую помощь или совет!

Спасибо заранее!

1 Ответ

3 голосов
/ 11 июня 2010

ну, действительно, вы должны загружать файлы CSS по требованию.

Чтобы пользователь выбрал розовый, pink.css <link> будет вставлен как последний элемент в <head>

...