用户定义的CSS /样式

Question

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

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

我在为每个站点提供一个“用户定义”样式表之间徘徊，可以从管理区域编辑或提供某种类型的CSS构建器。

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

除了明显的（这是最好的解决方案？）之外，我还有一些问题：

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

Css Builder： 是否有基于Web的CSS构建器？ 根据用户提供的规则生成CSS的最佳方法是什么（我考虑使用某种模板引擎来实现这一点（NVelocity，Razor等）？

由于

解决方案

我已经为我们提供的解决方案添加了答案below。

Answer 1

然而从未使用过，最近我查看了 Brosho Design in the Browser jQuery Plugin

  

使用此插件，您可以设置样式   使用a在浏览器中标记   内置元素选择器和CSS   编辑。生成CSS代码   只需单击一下即可更改元素   在你自己的样式表中使用它。

<强> demo here

Answer 2

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

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

Answer 3

我已经构建了一个完全正确的应用程序。由于有多个母版页和主题，用户可以附加自定义网址来加载主题，因此它会更加复杂 - 例如：/ someclienturl会加载特定的主题。

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

Answer 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")。