Question

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

Answer 1

然后使用dom：装载原型

Awww，不要那样做！当JavaScript关闭时，这将无效。

方法1：静态样式表，文档头中的动态值

为了不必使用动态创建的样式表，请使用单独的静态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这样做很复杂，但有时候比乱丢{更有可能使用CSS的{1}}部分。

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

Answer 2

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

Answer 3

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

示例：

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

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

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

Answer 4

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

我个人认为诸如“不用JavaScript就能做到”之类的答案不过是老派的学士学位……他们今天是否尝试过使用JavaScript？我不这么认为。。。至此，我并不是说您必须使用JavaScript。做到适合您需求的方式

祝你生日快乐

用户生成的自定义CSS

4 个答案: