用户生成的自定义 css

Posted 2023-02-24

【中文标题】用户生成的自定义 css

【英文标题】：User generated custom css

【发布时间】：2011-03-10 07:44:46

【问题描述】：

嘿，有人知道允许用户保存自定义 CSS 的最佳方式是什么吗？具体来说，我希望允许用户选择大约 4 种颜色值，这些颜色将用于为用户创建自定义主题。我正在考虑将值保存在数据库中，然后使用 dom:loaded 和原型来设置自定义样式值，但我想知道是否有更快的方法？比如动态创建css文件什么的？

【问题讨论】：

如您所提到的将值放在内联 javascript 中将是最干净和最简单的方法。否则，如果您不为每个页面加载创建 css 文件，您将不得不管理动态创建 css 文件并控制浏览器缓存。请参阅下面的答案：

【参考方案1】：

我认为最好的方法是将其保存到 Db，因为您不想让用户弄乱您的网站。至少如果某些页面是公开的。

而且我个人认为“不使用 JavaScript”之类的答案只不过是老派 BS……他们今天是否尝试过放弃 JavaScript？我不这么认为...通过本段，我并不是说您必须使用 JavaScript 来完成。以适合您需求的方式进行操作?

祝你有美好的一天

【参考方案2】：

然后使用 dom:loaded 原型

哎呀，不要那样做！当 JavaScript 关闭时，这将不起作用。

方法一：静态样式表，文档头部动态值

为了不必使用动态创建的样式表，请使用一个单独的静态 CSS 文件，其中包含所有不会更改的定义。

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

将更改的所有定义，您可以放入 html 文档的 head，从数据库中获取用户可更改的值。

<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 的部分。

您决定哪种方法更适合您的情况。我发现自己最常选择第一个。

【讨论】：

+1，这次不需要使用JS，甚至不需要额外的文件获取。

【参考方案3】：

创建自定义 css 文件会添加浏览器必须发出的另一个请求，因此您需要确保正确设置标题以缓存它。如果用户确实更改他们的设置，您需要做一些事情来确保浏览器立即停止兑现旧的 css 文件并加载新文件。一种方法是更改​​ css 文件的 url。

例子：

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

改为我会使用您的第一种方法并创建一个 JSON 数组，您将其注入到页面中，然后您使用您的 javascript 框架来加载并使用该数组来设置页面样式。

您还可以将颜色值存储在来自服务器的 cookie 中，并在客户端上使用和/或写入它们。

【参考方案4】：

我会将这 4 个值保存在数据库中，然后从这些值创建一个 css 文件。您需要确保并缓存为每个用户创建的 css 文件，这样您就不必在每个页面视图中动态创建它。