使用自定义 css 样式来主题布局的最佳方法是什么？
假设我们有一个巨大的 CSS 文件，用于设置应用程序布局的样式。现在，我们想让用户更改布局的颜色以对其进行个性化。在设计和架构方面，进行这种定制的最佳方法是什么？我正在寻找一种非常容易实施且侵入性不大的解决方案。
如果不需要的话，我也不想在服务器上模板化整个 css 文件。如果可能的话，我想将其保留在我的 /css 文件中，而不依赖于任何服务器。
理想情况下，我只想覆盖默认样式，但我认为这是不可能的，因为它可能会删除现有样式。这意味着当我覆盖它们时我将拥有重复的样式信息......这也很糟糕。重复=不好。
我想我们可以假设有一些与其帐户相关的服务器对象具有各种颜色的多个属性，例如背景、菜单选项卡、链接颜色、悬停版本等。
public class Theme {
private String headerBackground = "#172636";
private String displayName = "#ffffff";
private String tabBackground = "#284767";
private String tabText = displayName;
private String hoverTabBackground = tabBackground;
private String hoverTabText = tabText;
private String selectedTabBackground = "#f5f5f5";
private String selectedTabText = "#172636";
private String tableHeaderBackground = headerBackground;
private String tableHeaderText = displayName;
private String tableSubHeaderBackground = tabBackground;
private String tableSubHeaderText = displayName;
private String hoverTableRowBackground = "#c0d2e4";
private String link = "#4e6c92";
我最好的猜测是只提供整个 css 文件并让我的 MVC框架将主题与 CSS 文本合并，然后将其提供出去。这是最好的方法吗？这会迫使浏览器永远不缓存它吗？
我的应用程序正在使用 Spring/Hibernate，但我很确定即使您不使用 Java/Spring，任何建议也可以使用这些技术。
感谢您的帮助。
Let's say we have a massive CSS file that is used to style the layout of an application. Now, we want to let users change the colours of the layout to personalize it. What is the best way to do this customization, like in terms of design and architecture? I'm looking for a solution that is pretty easy to implement and isn't very intrusive.
I also don't want to make the whole css file templated on the server if I don't have to. I'd like to keep it in my /css file if it's possible, without any server dependencies.
Ideally, I'd like to just override the styles in the default, but I don't think that's possible as it will probably erase the existing styles. Which means I'll have duplicate style information as I overwrite them... which is also bad. Duplication = bad.
I guess we can assume that there's some server object related their account that has several properties for various colours, like backgrounds, menu tabs, link colours, hovered versions, etc.
public class Theme {
private String headerBackground = "#172636";
private String displayName = "#ffffff";
private String tabBackground = "#284767";
private String tabText = displayName;
private String hoverTabBackground = tabBackground;
private String hoverTabText = tabText;
private String selectedTabBackground = "#f5f5f5";
private String selectedTabText = "#172636";
private String tableHeaderBackground = headerBackground;
private String tableHeaderText = displayName;
private String tableSubHeaderBackground = tabBackground;
private String tableSubHeaderText = displayName;
private String hoverTableRowBackground = "#c0d2e4";
private String link = "#4e6c92";
My best guess is to just serve the entire css file and have my MVC framework merge the Theme with the css text and than serve it out. Is this the best way? Will that force the browser to never cache it?
My application is using Spring/Hibernate, but I'm pretty sure any recommendations even if you don't use Java/Spring will be doable with these technologies.
Thanks for the help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
让访客/用户自定义他们的外观和内容感觉可能相当令人担忧。您需要将属性存储在其配置文件中以保持外观和外观。跨浏览器会话的感觉。
本质上，这意味着提供您按需渲染的自定义 CSS 文件。您可以将其缓存在他们的客户端上，并在他们更改 LAF 首选项时使用客户端 JS 重新加载此文件。
一种方法是像这样链接到他们的样式表：
您需要一个相当独立的应用程序侦听器，它只需加载他们的配置文件并（可能）使用字符串替换（或任何最好的方式）填充模板文件。您需要确保响应 mime-type 设置为“text/css”。浏览器将完成剩下的工作。
要强制浏览器重新加载 CSS 文件，只需在查询字符串中添加一些废话，例如版本号：
Letting visitors/users customise their look & feel can be rather fraught. You will need to store the properties in their profile to persist that look & feel across browser sessions.
In essence this means serving up their custom CSS file which you render on demand. You could cache this on their client and use client-side JS to re-load this file when/if they change their LAF preferences.
One way is to link to their stylesheet like this:
You'd need a fairly stand-alone application listener that simply loads their profile and (probably) populates a template file using string replacements (or whatever is best). You'll need to make sure the response mime-type is set to "text/css". The browser will do the rest.
To force the browser to re-load the CSS file, simply add some guff, such as a version number, to the querystring:
哦，不错。但对用户提供的字符串应用一些过滤非常重要，否则您的应用程序将面临一些严重的代码注入攻击！
Oh, nice take. But it's very important to apply some filtering to the strings that the user supplies, otherwise you are exposing your application to some serious code injection attacks!