What are good uses of the css `content` property?

Does the css content property break the rule of content and separation because css is for presentation not to generate content?

Wh开发者_开发百科at are other good uses of the css content property? I've seen it only in clearfix hacks.

Does css "content" property break the rule of content and separation because css is for presentation not to generation content?

Good point. I'd say it does if it's used for actual data.

The quirksmode page on content shows the limitations pretty well. You can't add any kind of styled content at the moment - it will work with too few browsers. You can add only character data.

The author of the quirksmode airs an interesting opinion:

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

I agree with this in general, but sometimes there may be cases where you don't want to rely on JavaScript to do the job. The comma example shown by Martin is a case where I find using content justified (although I personally would be feeling better if the commas would already be served coming from server side - it's what I personally would stick to.)

Also, keep in mind that adding commas and quotes through the content property may look bad when your content is viewed from elsewhere - for example in a search results page.

I'd say use it only sparingly, if you really need it.

One popular place that this shows up is in WordPress' default theme

.entry ul li:before, #sidebar ul ul li:before {
    content:"» ";
}

It could be used in print style sheets to show urls for links for example:

p a:after {
  content: " (" attr(href) ")";
}

Some link (http://www.somesite.com)

It's good for structured content. I wrote a number of test cases for the W3C's next print CSS rules and the one that seemed cool to me was being able to put "Chapter " and things like that into certain elements, especially when paired with counters. A simplistic example would be something like:

li.chapter:before {content: "Chapter" counter(chapter) ": ";}

None of that's print-specific and it's all presentation information. If you don't want your chapters to be preceded with the word "Chapter", take it out of the CSS. Controlling that in a stylesheet means your print version could have different chapter headings from your screen version your mobile could be different again, without having to have any knowledge of the viewer's device inside your application logic.

I'm using it to display accesskey in admin panel menu

.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }

CSS is presentational data. Any content that's only presentation-related is fine in a CSS file. For instance, suppose I want to put « and » around my <h1> tags; that's purely presentational. You could do it with the :before and :after selectors.

It should also be noted that content can also display images:

content: url('my/image.png');

I'd like to add, on a side note, that I'd consider the use of the content property to override already existing content an extremely bad practice.

A common use I see for it is with :before and :after tags to format quotations with some sort of stylized quote box. It can be a quick and easy way to get in stylized elements that you would otherwise have build images out of.

blockquote:before, blockquote:after {
    content: '"';
}

I think this is an okay use for it, because it doesn't really break rules of content and style separation. My feeling is that if it is part of the design of the page, rather than the content, it's probably okay for content:

One interesting use case, although maybe not recommended, is for placeholder text on contenteditables.

[contenteditable]:empty:after
{
    color: #aaa;
    content: 'Enter some text';
}

Like zneak said, it is also possible to replace images. I find it practical to replace "content images" (not "asset images", which should be done via css background images) with higher resolution variants on iPhone 4 and other devices that have more than one real pixel per virtual pixel.

E. g.:

<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
@media all and (-webkit-min-device-pixel-ratio: 2) {
  /* e. g. iphone 4 */
  #people9 { content: url(//lorempixum.com/400/300/people/9/); }
}

It works, at least, on iPhone 4 and Android Nexus S, but I consider it experimental and haven't tested it on other devices. Here is a complete example:

https://gist.github.com/1206008

I just want to add to what has already been said.

With Cascading Style Sheets you can apply styles to a lot of types of documents.

The common use case is to apply CSS to HTML pages. In this case, the general idea is to use the content property only for aesthetic purposes.

Another use case is instead to apply CSS to XML documents. In this case the document usually does not contain elements for page structure (div, h1, etc...). So, in this scenario, by using the content CSS property more frequently, you can better define the page and the relations between elements and data.

For example you could prepend a description paragraph before a table, or appending the email address after the name of a person. Note that in HTML pages these page-structure elements should be part of the HTML document itself while they are usually omitted in a XML document and so they can be added using the content CSS property.

One of interesting use cases would be localization of a User Interface.