Изменить тему /CSS на основе пользователя

Ответ 1

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

<link rel="stylesheet" href="standard.css" />
<link rel="stylesheet" href="<%= customer_code %>/custom_style.css" />
...
<img scr="<%= customer_code %>/logo.png" />

Каждый пользовательский CSS будет иметь свой собственный URL-адрес, поэтому вы можете заставить их кэшировать их.

Это позволит вам сохранить для каждого запроса, который пользователи сделают:

• трафик из базы данных на прикладной уровень
• трафик с уровня приложения в браузер
• некоторые вычисления на уровне приложения

Я запомню, что пользователю необходимо заполнить веб-форму, в которой подробно описаны настройки, которые они хотят сделать.

Ответ 2

Сначала определите, какие ресурсы можно заменить, и можно ли добавлять ресурсы. Вам нужно будет хранить их где-нибудь; для небольших ресурсов, таких как логотипы, db, вероятно, прекрасен, в противном случае вам нужно беспокоиться о размере в db.

Затем вы можете определить, какую функциональность вы хотите настроить для пользователя: просто цвета или целые стили? Если это просто цвета, вы можете определить некоторые переменные в файле CSS и выполнить динамический файл с данными, загруженными из db. Файл CSS можно назвать styles.asp и содержать код, например:

.header_area {
  border: 1px solid <%=headerBorderColor%>;
  background-color:  <%=headerBGColor%>;
  foreground-color:  <%=headerFGColor%>;
}

(Синтаксис, который я использовал, - это синтаксис JSP, я не знаю ASP, но идея такая же.)

В качестве альтернативы, позвольте пользователю указать всю таблицу стилей, либо заменив ее по умолчанию, либо добавив ее. Затем сохраните весь лист в БД и подайте его с помощью собственного URL-адреса (не вставляйте его на страницу).

<link rel="stylesheet" href="default_styles.css">
<link rel="stylesheet" href="white_label_css.asp">

Убедитесь, что вы правильно настроили заголовки кеша и тип содержимого в файле css, если вы используете его с помощью страницы asp.

Если вас беспокоит, какой контент пользователь может поместить в файл white_label_css, вы можете ограничить его, создав собственный инструмент, который генерирует css и сохраняет его в db. Например, вместо того, чтобы позволить пользователю загружать любой файл и хранить его в db, пользователь должен будет заполнить веб-форму, в которой подробно описаны настройки, которые они хотят сделать. Таким образом, вы можете гарантировать, что разрешены только определенные правила/изменения css (но это может быть недостаточно гибким).

Ответ 3

Мне нравится идея использования динамического CSS с помощью обработчика ASP.Net...

<link rel="stylesheet" href="style.ashx" />

style.ashx

<!--WebHandler Language="C#" Class="StyleSheetHandler"-->

StyleSheetHandler.cs

public class StyleSheetHandler : IHttpHandler {
        public void ProcessRequest (HttpContext context)
        {   
            context.Response.ContentType = "text/css";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;

            string css = BuildCSSString(); //not showing this function

            context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600));
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Write( css );
        }

        public bool IsReusable
        {
            get { return true; }
        }

}

Функция BuildCSSString() построит css на основе значений, хранящихся в базе данных, и вернет их для переопределения базового стиля на главной странице.

Ответ 4

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

Логотип/аватар, который вы хотите, чтобы пользователь мог иметь, может быть сохранен в db или в виде файла на fs.

Ответ 5

Я думаю, что это зависит от того, насколько сообразительны ваши пользователи о CSS. Если они веб-разработчики или имеют такую ​​склонность, то писать их CSS, вероятно, хорошо. Если нет, вам придется либо генерировать его статически на основе их ввода, либо хранить его в базе данных. Или вы можете просто сохранить введенные значения и динамически генерировать CSS с помощью специального обработчика.

Подход пользовательского обработчика означает, что вы можете подставлять значения прямо в середине CSS без необходимости беспокоиться о важности или порядке, в котором объявляются элементы для обеспечения правильного переопределения.

Ответ 6

С php, например, вы можете создать динамический css, поэтому это в сочетании с информацией пользователя, хранящейся в db, наверняка будет достаточно.

Попробуйте здесь или здесь в качестве введения.

Ответ 7

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

Эти вновь созданные классы могут быть сжаты в одну строку строки и сохранены в виде varchar, которые затем будут связаны/скопированы inline при построении страницы. Я могу придумать следующие варианты

• Встроенный CSS
• Создайте раздел файла, в котором вы можете сбросить созданные файлы CSS и позволить браузерам ссылаться на это местоположение (создавая программную ссылку?)
• Используйте Ajax, извлеките CSS и измените DOM

Если макет изменится, мы будем в более толстом супе, я бы избегал этого, так как сложности, связанные с обработкой сценариев/событиями, слишком велики.

Ответ 8

Я бы избегал использования важного предложения и вместо этого просто обеспечивал их значения в теге <style> после импорта обычных таблиц стилей.

В противном случае, я бы сделал то же самое.