Пользовательский пользовательский CSS

Question

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

Answer 1

и затем используя dom: загруженный с прототипом

Ооо, не делайте этого!Это не будет работать, если JavaScript отключен.

Подход 1: Статическая таблица стилей, динамические значения в заголовке документа

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

<link rel="stylesheet" href="styles/static.css" type="text/css"> 
<!-- Or whatever you name it -->

Все определения, которые будет изменяться,вы можете поместить в head HTML-документ, извлекая изменяемые пользователем значения из базы данных.

<style type="text/css">
.classname { font-size: (fontsize); }  <-- Insert dynamic value here
.classname { color: (color); }         <-- Insert dynamic value here   
....
<style>

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

Подход 2: Динамическая таблица стилей

Если у вас много динамически изменяемых значений, поместите всю таблицу стилей в файл сценария и выведите ее, заменив заполнители назначения из базы данных.Недостатком этого является то, что для того, чтобы заставить браузер перезагружать таблицу стилей при изменениях, вам придется работать с подходом версии stylesheet.css?version=400, который довольно сложен, но иногда может быть более желательным, чем мусор headраздел с CSS.

Вы сами решаете, какой подход лучше подходит для вашей ситуации.Чаще всего я выбираю первое.

Answer 2

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

Пример:

/usercustom.css?version=(last saved date hash)

Вместо Я бы использовал ваш первый подход и создал бы массив JSON, который вы вставляете на страницу, а затем выиспользуйте вашу инфраструктуру javascript для загрузки и использования массива для стилизации страницы.

Вы также можете сохранять значения цвета в файле cookie с сервера и использовать их или записывать в них на клиенте.

Answer 3

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

Answer 4

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

И я лично считаю, что ответы типа «делай это без JavaScript» - это не что иное, как старая школа BS ... Они пытались сегодня включить JavaScript?Я так не думаю ... И под этим абзацем я не имею в виду, что вы должны делать это с помощью JavaScript.Сделайте это так, как вам нужно ?

Желаю вам хорошего дня