CSS generated content technology

Introduction

The content property was introduced in CSS 2.1 to add generated content to the :before and :after pseudo-elements. All major browsers (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+) support this feature. Additionally, Opera 9.5+ supports content attributes on all elements, not just the :before and :after pseudo-elements.

In the CSS 3 Generated Content working draft, more functionality has been added to the content property - for example, content can be inserted and moved around the document to create footnotes, endnotes and section comments. But no browser has implemented the extended function content.

In this article, we’ll cover the basics of using generated content, and then break out the specific techniques for using them.

A few warnings

Before we dive into this topic, it’s worth pointing out that the generated content

will only work in modern browsers with CSS enabled

Not available through DOM. This is pure expression. Specifically, from an accessibility perspective, the generated content is not supported by current screen readers.

Generated content - basics

content is used like this:

h2:before {

content: "some text";

}

This will insert "some text" h2 before the start of every element on the page.

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

a:after {

content: attr(href)

}

This will insert the content of each element after the end of the a element href.

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

You can also use counter or use an inserted image to generate a dynamic numeric url (/path/to/file). Let's look at some examples.

Numbering content with counter

If you want to insert incremental values ​​in a repeated sequence of elements, such as question 1, question 2, question 3, you can use a counter to increment the counter value and then use content Display the count in the following way:

ol {

List Style Type: None;

Counter Reset: Segmented Counter

}

li: before {

Content: "Zhang" counter (stall);

anti-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 before going to the next element in the list. Chapter

Of course, the number will not be displayed in browsers that do not support this CSS feature. If this is confusing somewhere in your web page, see Chapter 10 for more details. It's a fine line between generating content that is purely decorative or an actual part of the content that should be written in actual HTML.

I've written a demo illustrating creating a counter with generated content. For more details on this topic, read David Storey's excellent article on using CSS counters for automatic numbering.

Insert correct quotes for multilingual content

Different languages ​​use different characters for quotes. The English quote would be written this way:

"Only someone makes you do it,

The Norwegian quote would be written this way:

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

Instead of using simple text with hardcoded quotes in HTML, you can use the q element

< q>It's only work if somebody makes you do it

And specify quotes for each language in your CSS

/* Specify quotes for two languages ​​*/

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

:lang(no) > q { quotes: "«" "»"}

/* Insert quotes before and after element content */

q:before { content: open-quote }

q:after { content: close-quote }

you This technique can be used with any element, not just q (although this is the most obvious and semantic use). Note that Safari 3 (and below) and IE 7 (and below) do not support the quotes attribute ##.

# Check out my quote plugin demo to see this in action

Replace text with image

There are several image replacement techniques you can use, each with their own. Pros and cons. This is another way to replace text with an image.

div.logo {

Content: URL(logo.png);

}

The advantage of using this technique for image replacement is that it truly replaces the text, so you don't have to resort to using height and width to create space for the image,

text-indent

or padding to hide the original text. .

However, there are some disadvantages:

You cannot repeat images, or use image sprites

It will only work in Opera 9.5+, Safari 4+, Chrome, it supports content attribute on all selectors of url as value, not just :before or :after

There is no way to use This is a way to include alternative text so screen readers won't be able to understand your content by replacing the image.

To learn more, check out my image replacement demo using content.

Show link icon

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

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 uses a CSS3 selector with substring matching - href $='.pdf' means href has the attribute .pdf at the end of the value.

Due to the regular expression, ^ and $ refer to the beginning and end of the string respectively. Using the CSS 3 substring matching attribute selectors, [attribute^=value] and [attribute$=value] allow you to match [attribute*=value] elements whose attribute content begins or ends with a specified value, while selecting any elements in that attribute Position element.

This is a demo showing PDF and external icons on links.

Using attribute values ​​as content

We have already mentioned that content: attr(val) allows you to display the value of an element's attribute on the screen. This can be used in many useful ways - here are a few examples.

Print URLs/Abbreviations in CSS

As mentioned in the article to print in separated lists, you can use generated content to enrich your page once they are printed. 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 the expansion of the abbr element. Just add the following to your print stylesheet:

abbr: after {

content: "("attr(title)")";

}

Check out my print URL and abbreviation extension demo for more information.

Looking ahead: attr() CSS3 Powerful

The CSS3 value and unit draft extends the range of attr() expressions - in addition to returning strings, it can also return values, such as unit types CSS color, CSS integer, length, angle, time, frequency, and other units.

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

Conclusion

I hope this article gave you a better understanding of the content attribute and what you can use it with. Given that IE 8 now also supports content, it's really clear to us that we can use this CSS feature in our production work. Just use it where appropriate and be mindful of the accessibility implications the resulting content still has.

The above is the detailed content of CSS generated content technology. For more information, please follow other related articles on the PHP Chinese website!