using css to duplicate html elements

Question

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

Answer 1

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.

Answer 2

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.