using css to duplicate html elements

问题:

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.

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?

(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?)

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

回答1:

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.

Nevertheless, one way you could do something like that with today's browsers (now that pseudo-elements are more generally supported) is to divorce the text from the a which leaves an empty anchor in your code. So you still have the HTML a in 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 inline links 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[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 (max at 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: fixed as 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 invisible to some extent. That would seem to be undesirable to me, but it does indeed limit your html redundancy.

回答2:

Short answer: no.

Long answer: not really,

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

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 content and 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.

回答3:

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.

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

回答4:

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.

回答5:

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

回答6:

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.

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

回答7:

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.

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

回答8:

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.

Reduce the HTML size and bandwidth footprint

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.

Keep the HTML pretty

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

---

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.

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.

回答9:

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>

回答10:

I think you will use HTML includes and SSI or server side includes to incorporate same methods on same pages, this is the format for the which you will use. <!--#include virtual="path to file/include-file.html" -->, always include that file in every pages that is similar.. just go to this link..http://webdesign.about.com/od/ssi/a/aa052002a.htm