用户生成自定义css

问题描述

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

解决方案

Awww，不要这样做！

方法1：静态样式表，文档标题中的动态值
$ b

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

 < link rel =stylesheethref =styles / static.csstype =text / css> 
<！ - 或者任何你命名的 - > 
  

会更改的所有定义，您可以将<$

   head  >< style type =text / css> 
 .classname {font-size：（fontsize）; }<  - 在这里插入动态值
 .classname {color：（color）; }<  - 在这里插入动态值
 .... 
< style> 
  

这样，大多数CSS保留在静态的可缓存文件中， t导致另一个HTTP请求。

方法2：动态样式表

如果您有很多动态更改值，将整个样式表放入脚本文件并输出，将占位符替换为数据库中的值。
这样做的缺点是，为了强制浏览器重新加载样式表更改，你必须使用版本方法 stylesheet.css？version = 400 这是非常复杂的事情，但有时可能比乱抛垃圾的头部分与CSS。

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

Hey, anyone have any idea what the best way to allow users to save custom css would be? Specifically, there are about 4 color values that I would like to allow a user to choose and these colors would be used to create a custom theme for the user. I'm thinking save values in the database and then using dom:loaded with prototype to set the custom style values but I'm wondering if theres a faster way? Like dynamically creating css files or something?

解决方案

Awww, don't do that! That won't work when JavaScript is turned off.

Approach 1: Static stylesheet, dynamic values in document head

For the sake of not having to work with a dynamically created style sheet, have a separate, static CSS file with all the definitions that won't change.

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

All the definitions that will change, you could put into the head of the HTML document, fetching the user-changeable values from a database.

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

that way, the majority of the CSS stays in static, cacheable files, while the dynamic part won't cause another HTTP request.

Approach 2: Dynamic stylesheet

If you have a lot of dynamically changing values, put the entire style sheet into a script file and output it, replacing placeholders with the values from the database.The downside to this is that to force the browser to reload the style sheet on changes, you'll have to work with a version approach stylesheet.css?version=400 which is pretty complex to do, but can sometimes be more desirable than littering the head section with CSS.

You decide which approach suits your situation better. I find myself choosing the first one most often.

这篇关于用户生成自定义css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！