6

这么久以来，我已经阅读并理解了以下有关 Web 开发的真理：

  1. HTML 用于内容
  2. CSS 用于演示
  3. JavaScript 用于行为。

这通常都很好，而且我发现当我严格遵循这些准则并使用外部.css和.js文件时，它使我的整个网站更易于管理。但是，我想我发现了一个打破这种思路的情况。

我有一个为我的网站之一构建的自定义论坛系统。除了此类系统的常用格式（链接、图像、粗斜体和下划线等）外，我还允许我的用户设置其文本的格式，包括颜色、字体系列和大小。所有这些都以格式代码的形式保存在论坛消息数据库中，然后在查看页面时转换为相应的 HTML。（有点低效，技术上我应该在保存之前翻译，但这样我可以在系统上实时工作。）

由于这个系统和其他类似系统的性质，我最终会在生成的 HTML 代码周围出现很多标签，我认为这些标签已被非正式地弃用，因为我应该使用 CSS 进行格式化。这违反了规则一和二，即 HTML 不应该包含格式信息，而是更喜欢将这些信息放在 CSS 文档中。

有没有办法在 CSS 中实现动态格式而不在标记中包含该信息？值得麻烦吗？或者，考虑到正确代码的隐含限制，我要限制我的用户可以做什么，以便遵循“正确”的方式来格式化我的代码？

4

9 回答 9

5

It's okay to use the style attribute for elements:

This is <span style="color: red;">red text</span>.

If users are limited to only some options, you can use classes:

This is <span class="red">red text</span>.

Be sure to use semantic HTML elements:

This is <strong>strong and <em class="blue">emphasized</em></strong>
text with a <a href="http://www.google.com" rel="external">link</a>.

Common semantic elements and their user-space terms:

  • <p> (paragraphs)
  • <strong> (bold)
  • <em> (italic)
  • <blockquote> (quotes)
  • <ul> and <ol> with <li> (lists)
  • More...?

Likely less common in forum posts, but still usable semantic elements:

  • <h1>, <h2>, etc. (headings; be sure to start at a value so your page makes sense)
  • <del>, and, to a lesser extent, <ins> (strikeout)
  • <sup> and <sub> (superscript and subscript, respectively)
  • <dl> with <dt> and <dd> (list of pairs)
  • <address> (contact information)
  • More...
于 2009-04-05T23:14:31.423 回答
4

This is a bit tricky. I would think about what you really want to allow visitors to do. Arbitrary colours and fonts? That seems rather useless. Emphasis, headings, links, and images? Well that you can handle easily enough by restricting to those tags / using a wikitext/forumtext markup that only provides these features.

于 2009-04-05T23:13:25.107 回答
1

您可以在提供给用户的 html 页面的头部动态构建内联样式表。放入页面头部并允许它定位用户可配置的那些元素。

或者，使用具有最常见调整功能的外部样式表的概念，但将有数百个样式表来解释每种可能的替代方案。如果你使用它，你需要一个用于特定字体大小、颜色等的外部样式表，并动态链接到标题中的那些。与任何外部样式表一样。虽然这几乎是难以忍受的复杂启用。

选项一可以正常工作。

举个例子：

<STYLE>
    h1,h2,h3,h4 {font-family: Helvetica, Calibri;}
    p    {font-size: 1.2em;    // Populate all this with values from the Db.
         font-weight: bold;
         }
    a    {text-decoration: underline;
         color: #f00;
         }
</STYLE>

另外，我突然想到，您可能可以创建一个每个用户的样式表来应用可配置方面。采用

<link href="/css/defaultstylesheet.css" type="text/css" rel="stylesheet" media="all" />
<link href="/css/user1245configured.css" type="text/css" rel="stylesheet" media="all" />
<!-- clearly the second is a stylesheet created for 'user 1245'. -->

The bonus of this approach is that it allows caching of the stylesheet by the browser. Though it might likely clutter up the css folder, unless you have specific user-paths to the user sheet? Wow, this could get complex... :)

于 2009-04-05T23:07:49.147 回答
1

This is an interesting situation because you can have an infinite number of different styles, depending on your users' tastes and their own personal styles.

There are a couple of things you can be doing to manage this situation efficiently. Probably the easiest would be to just use style overrides:

<p style="color: blue; font-size: 10pt;">Lorem Ipsum</p>

This is quick and easy. And remember, this is what style overrides are there for. But as you've said, this does not fit well with this content-presentation separation paradigm. To separate them a little more, you could build some CSS information on page load and then insert it into the <head> tag of your HTML. This still keeps the HTML and the CSS somewhat distinct, even though you're not technically sepating them.

Your other option would be to build the CSS and then output that to a file. This, however, would not be efficient (in my opinion). If you were to, on every page load, build a new CSS file that accounts for your users' unique preferences, this would sort of defeat the purpose. It's the same thing as the second option, using the <head> tag, you're just making it look separated. Even if you used techniques such as caching to try to limit how often you have to build a CSS file, will the ends really justify the means?

This is a completely subjective topic and you should, in the end, choose what you're most comfortable with.

于 2009-04-05T23:32:53.767 回答
0

I don't know which framework or even language you are using but e.g. Django uses a certain template language to sort of represent the HTML being output. I think a nice solution would be to simply use a different "template" depending on what the user has chosen. This way you wouldn't have to care about breaking the "rules" or having a bunch of basically unused tags floating around in the DOM.

Unless I completely misunderstood...!

于 2009-04-05T23:08:52.297 回答
0

The easiest way to manage this is probably to emit dynamic CSS when the pages are generated, based on the user's settings. Then everything is doing the job it is supposed to be doing and the server is doing the work of converting the user's settings into the appropriate CSS.

With the CSS doing this work, you can use appropriate attributes in the HTML (id and name and class and so on) and emit CSS that will cleanly format everything the way you want.

于 2009-04-05T23:19:18.887 回答
0

Consider the benefits versus the costs before you do anything. What is actually wrong with your code right now? Tag soup and combined content/presentation is to be avoided not because it makes a bad website, but because it is hard to maintain. If your HTML/CSS is being generated, who cares what the output is? If what you've got now works, then stick to it.

于 2009-04-05T23:22:30.407 回答
0

I assume you are allowing only a limited white list of safe options, and therefore parsing the the user's HTML already.

When rendering the HTML you could convert each style declaration to a class:

<span style="font-family: SansSerif; font-size: 18px;">Hello</span>

To:

<span class="SansSerif"><span class="size_18px">Hello</span></span>

Laborious to generate (and maintain) the list. However you needn't worry about a class for each combination, which is of course your main problem.

It also has the benefit of extra security as user's CSS is less likely to slip through your filter as it's all replaced, and this should also ensure all the CSS is valid.

于 2009-04-06T00:03:56.000 回答
-2

I've allowed my users to set the formatting of their text, including color, font family, and size. All of this is saved in by database of forum messages as formatting code, and then translated to the corresponding HTML when the page is viewed.

So, you've done formatting through HTML, and you know that formatting is supposed to be done through CSS, and you realise this is a problem, and you got as far as asking a 300-word SO question about it ... ?

You don't see the solution, even though you can formulate the question ... ?

Here, I'll give you a hint:

All of this is saved in by database of forum messages as formatting code, and then translated to the corresponding HTML CSS when the page is viewed.

Does that help?

Is this question a joke?

于 2009-04-06T00:06:11.393 回答