CSS 使用css复制html元素

using css to duplicate html elements

提问by Colin Pickard

I've been handing a design for a webpage which I'm trying to implement correctly. This design contains navigation elements which are partially or entirely duplicated all over the page - in particular, links to the main 3 categories for navigation are present on the page no less than 4 times.

我一直在为我正在尝试正确实施的网页设计一个设计。此设计包含在整个页面上部分或完全复制的导航元素 - 特别是，指向主要 3 个导航类别的链接在页面上出现不少于 4 次。

I'm no web design expert, but I don't like the idea of having the same content duplicated in the html. Can I use CSS so that my html contains a single list of navigation links in a sane format, but the standard browser view contains multiple partial duplicates?

我不是网页设计专家，但我不喜欢在 html 中复制相同内容的想法。我可以使用 CSS 以便我的 html 包含一个单一格式的导航链接列表，但标准浏览器视图包含多个部分重复项吗？

(Also, assuming this is possible, is it a good idea? or would I be better just getting used to the idea that my html is going to contain the same links 4 times?)

（另外，假设这是可能的，这是一个好主意吗？或者我会更好地习惯于我的 html 将包含 4 次相同的链接的想法？）

EDIT: Actually generating the nav links is not an issue; I was looking to clean up the output html

编辑：实际上生成导航链接不是问题；我正在寻找清理输出 html

采纳答案by ScottS

Sort of Possible, But Still Not Sure You Would Want To

有点可能，但仍然不确定你是否想要

And poses some serious challenges which varies depending on the context.

并提出了一些严重的挑战，这些挑战因上下文而异。

One problem is that your stated goal is to reduce html clutter and redundancy. However, to have a link, you still need to have an anchor element (<a></a>) as the root for the link.

一个问题是您声明的目标是减少 html 混乱和冗余。但是，要拥有链接，您仍然需要有一个锚元素 ( <a></a>) 作为链接的根。

Nevertheless, one wayyou could do something like that with today's browsers (now that pseudo-elements are more generally supported) is to divorce the text from the awhich leaves an emptyanchor in your code. So you still have the HTML ain the code, but eliminates any redundant text. How useful really is that? Not very is my thought. Especially if you are dealing at all with inlinelinks that are part of the text, because what you would do is then add text to those links via the pseudo-element, something like:

尽管如此，您可以使用当今的浏览器（现在更普遍地支持伪元素）执行类似操作的一种方法是将文本与在代码中a留下空锚的文本分开。所以你a的代码中仍然有 HTML ，但消除了任何多余的文本。这真的有多大用处？我的想法不是很多。特别是如果您正在处理属于 text 一部分的内联链接，因为您要做的是通过伪元素向这些链接添加文本，例如：

a[href='#oneUrl']:before {
    content: 'your anchor text';
}

Look at this fiddle example.

看看这个小提琴示例。

However, there is another way that reduces HTML further, but has some other severe limitations. You could have links in the text itself (let's say), which allows for relevant real content wording in those. However, each of those can have two (maxat present) pseudo-elements associated that could "extend" to be separate links in headers, footers, etc. Look at this fiddle example. Obviously, this requires you to be able to precisely locate those links (perhaps using position: fixedas the example has), which can be challenging. A big issue, however, is that search engines are not going to pick up those extra links or their text, and screen readers are not either, so your "main navigation" actually becomes invisibleto some extent. That would seem to be undesirable to me, but it does indeed limit your html redundancy.

然而，还有另一种方法可以进一步减少 HTML，但有一些其他严重的限制。您可以在文本本身中包含链接（假设），这允许在这些内容中使用相关的真实内容措辞。然而，每一个都可以有两个（目前最大）关联的伪元素，它们可以“扩展”为页眉、页脚等中的单独链接。看看这个小提琴示例。显然，这要求您能够精确定位这些链接（可能position: fixed像示例那样使用），这可能具有挑战性。然而，一个大问题是搜索引擎不会选择那些额外的链接或它们的文本，屏幕阅读器也不会，所以你的“主导航”实际上变得不可见在某种程度上。这对我来说似乎是不可取的，但它确实限制了您的 html 冗余。

回答by annakata

Short answer: no.

简短的回答：没有。

Long answer: not really,

长答案：不是真的，

There exists a couple of CSS selectors :beforeand :afterwhich can be used for this kind of purpose but their contents are limited and their implementation is not yet cross-browser safe.

有几个 CSS 选择器:before和:after可以用于这种目的，但它们的内容是有限的，它们的实现还不是跨浏览器安全的。

IMHO it is probably unwise to want to do this because the style (and indeed the content) might look the same now, but there's no guarantee it will later, furthermore this kind of content is contentand rightly belongs in the markup not in the styling. If you don't like the server-side include model (which is good) I would look to JS to help you replicate markup perhaps, and CSS to help you style consistently, but I think you're not necessarily heading down a fruitful path.

恕我直言，想要这样做可能是不明智的，因为样式（实际上是内容）现在可能看起来相同，但不能保证以后会一样，而且这种内容是内容并且正确地属于标记而不是样式. 如果您不喜欢服务器端包含模型（这很好），我可能会寻求 JS 来帮助您复制标记，而 CSS 可以帮助您保持一致的样式，但我认为您不一定会走上一条富有成效的道路.

回答by David Waters

Short answer no, in css you can't create content or display it multiple times. Usually this repeated content is taken care of via server side technologies (PHP, JSP, ASPX) etc. If your site is static content (no server side processing) then your best bet is just copy and past.

简短的回答不，在 css 中你不能创建内容或多次显示它。通常这种重复的内容是通过服务器端技术（PHP、JSP、ASPX）等处理的。如果您的站点是静态内容（没有服务器端处理），那么您最好的选择就是复制和过去。

It would be possible to do this with javascript but there would be a host of downsides, better to copy and paste.

使用 javascript 可以做到这一点，但会有很多缺点，最好复制和粘贴。

回答by David Waters

You could look into server-side includes, however as Germstorm has already said this would probably be best accomplished by a small PHP script.

您可以查看服务器端包含，但是正如 Germstorm 已经说过的那样，这可能最好通过一个小的 PHP 脚本来完成。

回答by Germstorm

IMHO it is not possible. My solution would be adding a small PHP or other engine that automatically renders the menu in the locations where those are needed. This way your code is DRY.

恕我直言，这是不可能的。我的解决方案是添加一个小的 PHP 或其他引擎，自动在需要的位置呈现菜单。这样你的代码就是DRY。

回答by Filip Dupanovi?

It won't be much of a problem if your repeating the code for the links in a single file only {your using it as a template and pushing in the content dynamically}.

如果您仅在单个文件中重复链接的代码{您将其用作模板并动态推送内容}，那不会有太大问题。

I won't make assumptions on which server-side technology your using, but you can quickly manage this with JavaScript. Write the HTML for the links, assign it to a JavaScript variable and just echo it where you need it.

我不会假设您使用哪种服务器端技术，但您可以使用 JavaScript 快速管理它。为链接编写 HTML，将它分配给一个 JavaScript 变量，然后在需要的地方回显它。

Also, if you happen to be using scriptalicious, your in luck! You can use Builderto dynamically create DOM elements.

另外，如果您碰巧使用了 scriptalicious，那么您很幸运！您可以使用生成器来动态地创建DOM元素。

回答by dagw

As others have said if you can use some server side code. If for whatever reason can't use server side code, your best bet is to write a small program which reads in your unique html pages and adds the repeated HTML. This is both quicker and easier than copying and pasting by hand, especially if you have lots of pages. If you add some html comment tags with special identifier strings to your page during processing you can also use these tags in the future to quickly find and replace all the common HTML if you ever change the structure of the page.

正如其他人所说，如果您可以使用一些服务器端代码。如果由于某种原因不能使用服务器端代码，最好的办法是编写一个小程序，它会读取您唯一的 html 页面并添加重复的 HTML。这比手动复制和粘贴更快、更容易，尤其是当您有很多页面时。如果您在处理过程中向页面添加了一些带有特殊标识符字符串的 html 注释标签，您将来也可以使用这些标签，以便在您更改页面结构时快速查找和替换所有常见的 HTML。

But pre-processing html pages like this is a right pain, so don't do it unless you cannot do it server side.

但是像这样预处理html页面是一种正确的痛苦，所以除非你不能在服务器端做，否则不要这样做。

回答by Fábio Batista

You say you want to clean up the output HTML. But for what reason? I'm assuming you either want reduce the HTML size and bandwidth footprint, or to keep the HTML pretty, like source code.

您说要清理输出 HTML。但出于什么原因？我假设您要么想要减少 HTML 大小和带宽占用，要么像源代码一样保持 HTML 漂亮。

Reduce the HTML size and bandwidth footprint

减少 HTML 大小和带宽占用

The best way to achieve this is to work with HTTP compression. Most HTTP servers can be configured to serve content this way. Check your server documentation.

实现这一目标的最佳方法是使用 HTTP 压缩。大多数 HTTP 服务器都可以配置为以这种方式提供内容。检查您的服务器文档。

Keep the HTML pretty

保持 HTML 漂亮

Maybe you want to turn your HTML into a template-engine. There are several options for this, like Mustache.jsand Underscore. However, you'll incur in a performance penalty, since there'll be an additional step for JS processing.

也许你想把你的 HTML 变成一个模板引擎。对此有多种选择，例如Mustache.js和Underscore。但是，您将招致性能损失，因为 JS 处理会有一个额外的步骤。

---

---

In any case, I think you're approaching the wrong problem. Just because HTML is [somewhat] readable, it doesn't mean it should be treated like source code. I've been through this, and nowadays I just consider HTML as an 'assembly code' for browsers. Using better template languages, like Slim, helps enforcing this POV.

无论如何，我认为您正在处理错误的问题。仅仅因为 HTML [有点] 可读，并不意味着它应该被视为源代码。我经历过这个，现在我只是将 HTML 视为浏览器的“汇编代码”。使用更好的模板语言，比如Slim，有助于加强这个 POV。

It doesn't mean you should treat your HTML like trash. It just means that it's output readability is not your problem as a programmer, you should worry about writing good and readable view templates, using reliable template engines. After all, you want the HTML to be the best possible for the browser to present quickly. And if it means code duplication and no whitespaces, so be it.

这并不意味着您应该将 HTML 视为垃圾。这只是意味着它的输出可读性不是您作为程序员的问题，您应该担心使用可靠的模板引擎编写良好且可读的视图模板。毕竟，您希望 HTML 尽可能最好地让浏览器快速呈现。如果这意味着代码重复并且没有空格，那就这样吧。

回答by Timo Huovinen

You could duplicate it by projecting content from an attribute as pseudo elements:

您可以通过将属性中的内容投影为伪元素来复制它：

.duplicate::before {
    content:attr(title);
    display:block;
}
.duplicate::after {
    content:attr(title);
    display:block;
}

<div class="duplicate" title="text to duplicate"></div>

回答by Nanoo

It's possible using ::beforeand ::after. However, it can only display text (not HTML elements). If it could display HTML elements, then there would be a major security risk...

可以使用::before和::after。但是，它只能显示文本（不能显示 HTML 元素）。如果它可以显示 HTML 元素，那么就会存在重大的安全风险......

I could possibly inject a <script>element inside the page, with malicious JavaScript for example.

我可能会<script>在页面内注入一个元素，例如恶意 JavaScript。

If CSS was capable of this, then CSS Userscript extensions such as Stylish could be dangerous.

如果 CSS 能够做到这一点，那么诸如 Stylish 之类的 CSS Userscript 扩展可能会很危险。