css - 用户生成的自定义 css

Question

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

Answer 1

and then using dom:loaded with prototype

哇哦，不要那样做!当 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 ，这做起来相当复杂，但是有时比在 head 部分乱扔 CSS 更可取。

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