What are the benefits of using the css `content` property?

Question

Is the css content property a violation of the content and separation rule because css does not create content for presentation?

What are the other benefits of using the css content property? I only saw this in clearfix hacks.

Answer 1

Does the css "content" property prevent the content and separation rule from breaking because css is not intended for presentation to generate content?

Good point. I would say what it does if it is used for evidence.

The quirksmode content page shows the limitations pretty well. At the moment, you can’t add any stylized content - it will work with too few browsers. You can add only character data.

The author of quirksmode presents an interesting view:

I feel that we should not use content ads at all. It adds content to the page, and CSS is for adding presentations to the page, not content. Therefore, I believe that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this to work.

I agree with this in general, but sometimes there may be times when you do not want to rely on JavaScript to do the job. Martin's example of a comma is a case where I find the use of content justified (although I personally would be better off if the commas were already sent from the server side - this is what I personally adhered to.)

Also, keep in mind that adding commas and quotation marks through the content property may not look good when your content is viewed from another place — for example, on a search results page.

I would say that use it only sparingly if you really need it.

Answer 2

One popular place this shows is in the default WordPress theme.

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

Answer 3

This is good for structured content. I wrote some test cases for the following CSS rules for printing W3C, and one that seemed cool to me could put a "chapter" and the like in certain elements, especially when paired with counters . The simplest example would be the following:

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

None of these print specifications and all presentation information. If you don’t want your chapters to be preceded by the word “Chapter,” output it from CSS. Controlling this in the style sheet means that your print version may have different chapter titles from your screen version, your mobile phone may be different, without having to know any viewing device inside your application logic.

Answer 4

It can be used in print style sheets to show URLs for links, for example:

 pa:after { content: " (" attr(href) ")"; } 

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

Answer 5

The common use that I see for him is: before and: after tags for formatting quotes with some kind of stylized quote field. This can be a quick and easy way to get stylized elements that otherwise you could create images from.

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

I think this is normal for him, because it really does not violate the rules of content and separation of styles. I feel that if this is part of the design of the page, not the content, it is probably suitable for the content:

Answer 6

CSS is presentation data. Any content related only to the presentation is great for a CSS file. For example, suppose I want to put « and » around <h1> tags; which is purely presentation. You can do this with the :before and :after selectors.

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

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

I would like to add a side note that I would consider using the content property to override existing content with extremely bad practice.

Answer 7

I use it to display the accesskey in the control panel menu

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

Answer 8

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

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

Answer 9

As zneak said , you can also replace images. I find it practical to replace “content images” (rather than “resource images” that must be executed using css images) with higher resolution options on the iPhone 4 and other devices that have more than one real pixel for each 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) { /* eg iphone 4 */ #people9 { content: url(//lorempixum.com/400/300/people/9/); } } 

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

https://gist.github.com/1206008

Answer 10

I just want to add to what has been said.

With cascading style sheets, you can apply styles to many types of documents.

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

Another use case is to use XML CSS documents. In this case, the document usually does not contain elements for the page structure (div, h1, etc.). Thus, in this case, using the content CSS property more often, you can better define the page and the relationship between elements and data.

For example, you can add a description paragraph in front of the table or add an email address after the person’s name. Note that on HTML pages, these page structure elements must be part of the HTML document itself, while they are usually omitted from the XML document and therefore can be added using the content CSS property.

Answer 11

One interesting use case will be the localization of the user interface.