Можно ли редактировать CSS-файл на работающем сайте MVC?

Question

У меня есть сайт MVC, который окрашен в черный и белый цвета, за исключением определенных элементов дизайна, которые окрашены в один определенный цвет (скажем, синий).Я делаю все раскраски из CSS.

Что я хочу сделать, так это переключать этот цвет время от времени на другой.Проблема в том, что если я сделаю это переключение, скажем, из jquery, когда документ загружен, цвета в асинхронном загрузочном элементе не изменятся.

Возможно ли изменить сам файл CSS из MVC, или, возможно,это событие для асинхронных загруженных элементов?

Answer 1

А как насчет размещения различных элементов в разных файлах, а затем включения только того, который вам нужен?Например:

В файле default.css

#myDiv {
    color: blue;
}

Теперь у меня могут быть другие файлы.На главной странице вы можете загрузить red.css на основе любой бизнес-логики.Вот пример:

<link rel="stylesheet" type="text/css" href="/css/default.css" />
<% if (SomeCondition) { %>
    <link rel="stylesheet" type="text/css" href="/css/red.css" />
<% } %>

Answer 2

Как часто ваши цвета будут меняться?Если изменение происходит не очень часто, вы можете создать метод действия, который возвращает другую таблицу стилей в зависимости от текущего времени.

public ActionResult GetCss() {
    string stylesheet = GetStylesFromSomewhere();
    return Content(stylesheet, "text/css");
}

Answer 3

Я перечитал вопрос и решил, что должен дать совершенно другой ответ.

CSS в основном декларативный. Это большое удобство. Если вы объявляете что-то таким образом, вам не нужно заботиться о повторном применении CSS к новому элементу или повторной обработке DOM. Это происходит "в браузере". Обязательное переключение новых элементов в новое состояние каждый раз, когда что-то происходит (например, добавление нового элемента), не просто неудобно, но может привести к большому количеству ошибок. Так что нет никакого общего события для «асинхронных загруженных элементов», но вы не должны искать его.

CACHING

В любой веб-среде, имеющей постоянный CSS-файл, это, в основном, хорошая идея. Браузер кэширует CSS и может использовать его каждый раз, когда это необходимо. Если вы измените свой CSS, браузер не заметит. Конечно, нужно учитывать множество параметров, но в большинстве случаев это так.

Так что, если бы вы могли редактировать свой CSS-файл, это не будет иметь большого значения, поскольку вам нужно будет как-то сообщить браузеру, чтобы он заметил это изменение.

Существует методика, называемая очисткой кэша, которая в основном помещает параметр GET после css, например:

<link href="https://www.famous-cats.com/style/puna.css?v=3" rel="stylesheet" type="text/css" />

Браузер считает, что? V = 1 отличается от? V = 2, хотя вы только что ссылались на один и тот же файл. Так что он будет кешировать каждую версию с разными параметрами GET.

OK.

ИЗМЕНЕНИЕ ФАЙЛОВ

Но даже если вы измените файл: это хорошая идея, чтобы изменить сам файл css? Если 95% правил одинаковы каждый раз (все, что не относится к этому 1 цвету), вы можете разделить его в «основном» файле и изменить только части, относящиеся к цветам, которые могут быть в другом файл / встроенный html.

Еще одна вещь, связанная с изменением файлов, заключается в том, что если вы не планируете процедурно генерировать новые стили, вам просто нужно написать постоянные файлы и переключать их.

Dotless

Это порт lesscss для asp.net. Проверьте http://lesscss.org/ для его функций, это в основном sass с немного другим синтаксисом.

Хорошо, что вы можете использовать переменные и получать их значения из параметров url, поэтому, если вы связываете style.less? Color = fuschia, он просто устанавливает переменную с именем "color" в ваш любимый цвет.

Меньше - это аккуратный материал, который может значительно сократить время разработки.

РЕШЕНИЕ, которое Я РЕКОМЕНДУЮ

Просто сделайте раскраску в CSS, отличную от основной:

<link href="https://www.famous-cats.com/style/main.css" rel="stylesheet" type="text/css" />
<link href="https://www.famous-cats.com/style/color.less?color=00FF55" id="colorcss" rel="stylesheet" type="text/css" />

А если вам нужно изменить цвета, просто позвоните:

document.getElementById('colorcss').href = 'color.less?color=F35741';

(я дал тегу ссылки идентификатор).

И это работает.

Погрузитесь в меньшее немного больше и проверьте, как вы можете использовать цветовые переменные. Вы можете позволить администратору просто выбрать этот цвет.

Кроме того, встроенный CSS не работа дьявола, вы можете легко создать его в бритве. Если это всего лишь несколько правил, это никому не повредит. Поэтому, если вам не нравится меньшее, вы можете использовать встроенный css или сгенерировать css с помощью действия контроллера MVC (просто установите для mimetype значение text / css и используйте параметр url для изменения цвета / очистки кэша).

Надеюсь, это ответит на ваш вопрос.