CSS-Generated content technology

Introduced

The Content property is introduced in CSS 2.1 to add the generated contents to: Before and: after pseudo elements. This feature is supported in all major browsers (Firefox 1.5+,safari 3.5+,ie 8+,opera 9.2+,chrome 0.2+). In addition, opera 9.5+ supports all elements of a content property, not just: before and: after pseudo-elements.

In the working draft of CSS 3, the Content property has added more features-for example, you can insert and move content around the document to create footnotes, endnotes, and partial comments. However, there is no browser that implements the extended functionality content.

In this article, we'll cover the basics of using the generated content, and then analyze the specific techniques that can be used.

Several warnings

Before we dive into this topic, it's worth noting that the generated content

Only works in a modern browser with CSS enabled

Not available through the DOM. This is purely a form of expression. Specifically, from an accessibility perspective, the current screen reader does not support the generated content.

What's generated-the basics

The content is used in this way:

H2:before {

Content: "Some text";

}

This inserts "some text" H2 before the start of each element on the page.

Instead of entering the text value of the content property, you can also use the attribute value attr (), as follows:

A:after {

content:attr (HREF)

}

This inserts the contents of each element after the A-element href ends.

Note that you need to use the unquoted attribute name attr () when referencing it.

You can also use counter or use the Insert image to generate a dynamic digital URL (/path/to/file). Let's look at some examples.

Numbering content with counters

If you want to insert an increment value in a repeating sequence of elements, such as Issue 1, Issue 2, Issue 3, you can use the counter to increase the counter value, and then use the content to display the count as follows:

OL {

List style type: none;

Counter Reset: Segment counter

}

Li:before {

Content: "chapter" Counter (booth);

Inverse increment

}

In the first rule, use the Counter-reset property to reset the counter to 1. In the second rule, each Li element has a printed string, where x is the current value of the counter. The last attribute in the second rule-increases the value of the counter by 1, and then goes to the next element in the list. Chapter Xsectioncountercounter-incrementsectioncounterli

If you are inserting the contents of a counter, be aware that if the element is display:none specified, they will not increment.

Of course, the numbering is not displayed in browsers that do not support this CSS feature. This will confuse you, if you have a place in your webpage, see chapter Tenth for more details. This is a subtle difference between what is purely decorative or the actual part of the content, and it should be written in the actual HTML.

I have written a demo to illustrate the creation of counters with generated content. For more details on this topic, please read David Storey's excellent article about using CSS counters to automatically number.

Insert the correct quotation marks for multilingual content

Different languages use different characters for quotation marks. The English quotation will be written as:

"Only someone let you do it,

The Norwegian language is written in this way:

«hvis du forteller meg nok en vits,såskal jegslådeg til jorden»»

Instead of using simple text with hard-coded quotes in HTML, you can use the Q element

<p><q>it ' s only work if somebody makes your do it</q></p>

<p><q>hvis du forteller meg NOK en vits, såskal jeg slådeg til jorden.</q></p>

and specify the quotation marks that are appropriate for each language in your CSS

/* Specify quotes for the languages */

: lang (en) > Q {quotes: ' "'"}

: lang (NO) > Q {quotes: "«" "»"}

/* Insert quotes before and after <q> element content */

Q:before {Content:open-quote}

Q:after {Content:close-quote}

You can use this technique for any element, not just Q (although this is the most obvious and semantic use). Please note that Safari 3 (and below) and IE 7 (and below) do not support the quotes property.

Check out my Quote plugin demo to see this in action.

Replace text with an image

There are several picture substitution techniques that you can use, each with its own pros and cons. This is another way to replace text with an image content.

Div.logo {

Content: URL (logo.png);

}

The advantage of using this technique for image substitution is that it can actually replace text. Therefore, you do not have to resort to space to create an image using height and width, text-indent or padding hides the original text.

However, there are some drawbacks:

You cannot repeat an image, or use an image sprite

It will only work with opera 9.5+,safari 4+,chrome, which supports the content of the URL on all selectors as a property of value, not just: before or: After

There is no way to use this method to include alternate text, so screen readers will not be able to understand your content to replace the image.

To learn more, please use the content to view my image replacement demo.

Show Link icon

You can use the property selector of a content property to render an icon after a link based on the file format or external file format to which it belongs.

A[href $= '. pdf ']:after {

Content:url (icon-pdf.png);

}

A[rel= "external"]:after {/* You can also use A[href ^= "http"]:after */

Content:url (icon-external.png);

}

The first rule is used to match a substring to a CSS3 selection-href $= '. pdf ' means that the href has an attribute. pdf at the end of the value.

Because of regular expressions, ^ and $ refer to the beginning and end of a string, respectively. Using the CSS 3 substring to match the property selector, [Attribute^=value] and [Attribute$=value] allows you to match the property contents to specify the beginning or end of the value of the [Attribute*=value] element, while selecting the element at any location in the property.

This is a demonstration of displaying PDFs and external icons on a link.

Use attribute values as content

As we have already mentioned, Content:attr (Val) allows you to display the value of the element property on the screen. This can be used in a number of useful ways-here are a few examples.

Print URLs/abbreviations in CSS

As mentioned in the article to print in a separate list, you can use the generated content once they print out to enrich your page. For example, print the URL of the following link in the print CSS:

A:after {

Content: "(" attr (HREF) ")";

}

You can use the same method to print an extension of the abbr element. Simply add the following to your plot style table:

Abbr:after {

Content: "(" attr (title) ")";

}

Check out my print URL and abbreviated extensions demo for more information.

Looking to the Future: attr () CSS3 powerful

The CSS3 value and the unit draft Extension range attr () expression-in addition to the return string, it can also return values such as the element type of CSS color, CSS integer, length, angle, time, frequency, and other elements.

In addition to custom data properties, this can be really powerful rendering of simple charts, graphs and animations. For example, we can set the background color of an element based on the property value. This may be useful in applications that display color palettes on the web. We can also specify the size of the element based on the value set in the custom Data property-for example, the length of a bar in a bar chart can be set by the properties of the element that represents the bar. Unfortunately, this feature is low-priority and will not be completed soon.

Conclusion

Hopefully this article will give you a better understanding of the content property, and you can use that property. Since IE 8 now supports content, we really know that this CSS feature can be used in our production work. Just use it where appropriate, and notice that the resulting content still has an accessibility impact.