用户定义的 CSS / 样式答案

【问题标题】：User defined CSS / Styles用户定义的 CSS / 样式
【发布时间】：2011-08-20 19:59:21
【问题描述】：

我们正在考虑为我们的应用程序用户提供覆盖默认站点 CSS 的功能。

目前他们可以选择网站主题，但最好允许他们更改背景颜色、字体颜色、字体等属性。

我在为每个站点提供可从管理区域编辑的“用户定义”样式表或提供某种 CSS 构建器之间左右为难。

第一个选项提供了最大的灵活性，但也可能是最有问题的，并且需要用户对 CSS 有一些基本的了解。

所以除了显而易见的，（哪个是最好的解决方案？）我还有几个问题：

用户定义的CSS：是否有基于 Web 的 CSS 编辑器可用？是否有可用的服务器端 (.net) CSS 验证器（用于验证用户输入的 css）

CSS 构建器：是否已经有基于 Web 的 CSS 构建器可用？根据用户提供的规则生成 CSS 的最佳方法是什么（我考虑过使用某种模板引擎来执行此操作（NVelocity、Razor 等）？

谢谢

解决方案

我已经添加了答案 below 以及我们所寻求的解决方案。

【问题讨论】：

如果您想为用户提供强大的功能，只需使用您知道不会搞砸的有限样式构建您自己的样式。如果他们确实搞砸了，如果你让搞砸成为可能，也可能包括某种重置。
感谢 robx - 我们就是这么做的。

标签： asp.net html css

【解决方案1】：

不过没用过，最近看了Brosho Design in the Browser jQuery Plugin

使用此插件，您可以为您的在您的浏览器中使用内置元素选择器和 CSS 编辑。生成CSS代码一键更改元素在您自己的样式表中使用它。

demo here

【讨论】：

谢谢。这对我的用户来说可能有点复杂，因为他们仍然需要编写 CSS。无论如何，这是一个很好的链接。

【解决方案2】：

我建议构建一个自定义 CSS 编辑器，因为它是限制用户能够编辑/自定义的元素和属性以及如何编辑/自定义的最简单方法。只要保持简单，你就会做得很好。

要验证 CSS，您可以使用 W3 CSS 验证器的 API，http://jigsaw.w3.org/css-validator/api.html

【讨论】：

【解决方案3】：

我已经构建了一个应用程序来实现这一点。由于有多个母版页和主题，因此涉及更多一些，并且用户可以附加自定义 url 以加载主题 - 例如：/someclienturl 将加载特定主题。

无论如何，这是我使用的架构。我希望我添加的一件事是高级用户能够将自定义样式添加到最终编写的样式表中。例如，基本上，主题部分将应用于选择器#header。 ThemeSectionCssStyle 保存用户为该选择器添加的自定义项。如果您还有任何问题，请告诉我。它最终成为一个相当复杂的子项目。我很想看看其他人想出了什么。

【讨论】：

是的，这对于我们的需求来说看起来确实很复杂。我认为我们可能只存储一些键值对（css 属性和值）并将它们应用于页面的 body 属性。我们将为此提供一个接口，以确保仅使用有效的 CSS 属性。

【解决方案4】：

我认为这里的关键因素是您是否希望您的用户“玩 codez”

如果你这样做了，那么this（@Caspar 发布）之类的东西可能有助于生成 css。如果您确实允许直接访问 css，那么W3 CSS Validator（由@Trikks 发布）绝对是必要的。

就我而言，我不想提供对 Css 的直接访问。环顾各种允许您更改简单样式属性（背景颜色、字体、颜色等）的站点，似乎他们刚刚为此创建了自己的界面。有很多 javascript 插件可以让这个过程变得非常流畅（颜色选择器等）。

一旦您将样式存储在某个地方，您就需要某种方式来渲染它们。

我找不到任何 .net Css 作家。我认为在Less 中可能是可行的，但解决方案非常简单，只需使用 asp.net mvc 内置的内容即可。

我创建了一个 Css 操作结果（@Darin Dimitrov 提供）：

public class CssResult : PartialViewResult {

    public override void ExecuteResult(ControllerContext context) {
        context.HttpContext.Response.ContentType = "text/css";
        base.ExecuteResult(context);
    }
}

然后在我的控制器中（一个简单的例子）：

    [HttpGet]
    public ActionResult Index()
    {
        var styles = new Dictionary<string, string>()
        {
            { "color", "red" },
            { "font-family", "Consolas, Courier, Serif" },
            { "font-size" , "12px" }
        };
        return this.Css(styles);
    }

然后是我的观点（views/css/index.cshtml）：

body {@foreach (var item in Model) {
        @string.Format("{0}: {1};", item.Key, item.Value)
    }
}

这实际上会渲染传入字典中的样式。当然，您可能希望创建一个特定的类来保存这些样式，以便您还可以指定 dom 元素名称/类/id。

最后我们可以调用Url.Action("index", "css")来渲染页面上的样式表。

【讨论】：