CSS content Generation

Original address: http://www.zhangxinxu.com/wordpress/?p=739

First, crash of the introduction

zxx://here the effect of "crash" is to render an atmosphere.
The Content property was introduced as early as CSS2.1, and can be used: before and: After pseudo-element generation. This feature is currently supported by most browsers: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+). In addition, currently opera 9.5+ and Safari 4 have supported the content properties of all elements, not just: before and: after pseudo-elements.

In the CSS 3 Generated content work draft , the content attribute adds more features, such as the ability to insert and remove document content to create footnotes, epilogue, and paragraph comments. However, there is currently no browser support for content extension functionality.

This article will show you the basic use of content generation, and some of the specific techniques you can apply.

Second, there is a little reminder

Before I get to the point, I'm going to be a long-winded old woman, talking about unnecessary and innocuous reminders.

• Works only under modern browsers that are available in CSS.
• It is not used by the DOM, it is purely superficial. In special cases, the current screen reading does not support the generated content from an access point of view.

Third, most basic – Generate content

The content is used as follows:

H2:before {   content: "I am extra text! ";}

The effect of this paragraph style is to add the text "I am extra text" to the front of each H2 label.
You can simply click here: Content most basic use demo

The value of the content property, in addition to using literal values, can also use some of the label's property values, by attr (), as shown in the following code:

A.content:after {   content:attr (href);} <a class= "Content" href= "http://www.zhangxinxu.com/" > the href value of this tag is:</a>

The results are as follows (truncated from Firefox3.6):

The value of the href attribute of this tag is added to the last text value within the a tag.
You can click here: Tag attribute value to generate content contents demo

Note: do not add quotation marks when using attr () to get the Tag property name!

You can also use counters to generate dynamic numbers or to insert a picture using a URL (/path/to/file) path. For more information, please continue with the application example below.

Iv. using counters to create number contents

If you want to insert a series of incremental values, such as "Beauty 1, Beauty 2, Beauty 3, Beauty 4 ...", you can use the counter to insert incrementing ordinal values before each list item. The CSS code is as follows:

OL {   list-style-type:none;   Counter-reset:sectioncounter;}                      Ol Li:before {   content: "Beauty" counter (sectioncounter) ":";   Counter-increment:sectioncounter;}

The HTML code is as follows:

[HTML]View PlainCopy

2. <ol>
4.     <li> <img src= "http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg"   width= "all"  height= "  /> </li>  
6. <li><img src="Http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" Width= "height=" /></li>
8. </ol>

The results are as follows (Firefox3.6):

You can click here: Content generates incrementing sequence number demo

Description
1. OL tag applies counter-reset attribute, Li tag applies counter-increment attribute, the value is Sectioncounter, and the content property, and the counter counter can achieve the increment effect.
2. If you specify an element Display:none, the counter under content does not generate a recursive increment.
3. Of course, if the browser does not support this method, then there will be no numbers appear, you use Firebug or the like tools to view the real HTML will not see the resulting values, do not have doubts, content properties dynamically generated is purely decorative, false appearance.
4. If you are interested in CSS counters and want to learn more, see David Storey an excellent article:Automatic numbering with CSS Counters.

Insert the correct quotation marks for multilingual content

Different languages use different quote characters. For example, the quotation marks in English are "" , and Chinese quotation marks are “” . Use content to make different languages use some of the corresponding characters. For example, we need to add the quotation marks of their corresponding language to the following text, what should we do?

<p lang= "en" ><q>it ' s only work if somebody makes do it.</q></p><p lang= "no" ><q> Hvis du forteller meg NOK en vits, s? Skal jeg sl? deg til jorden.</q></p><p lang= "ch" ><q> Welcome to Shanghai, Welcome to visit the World Expo! </q></p>

We might as well try the following code:

/* Specify quotation marks for different languages */:lang (en) > Q {quotes: ' "'" ';}:lang (NO) > Q {quotes: "?" "?";}:lang (CH) > Q {quotes: "" "" ";} /* Insert quotation marks before and after the Q tag */q:before {content:open-quote;} Q:after  {content:close-quote;}

The results are as follows:

You can really click here: Content generation corresponding language character demo

This technique can be applied to a variety of elements, not just the Q tag, and Safari 3 and IE7 (and below) do not support this technology.

Replace text with a picture

For picture substitution techniques, you can see here: Several image replacement techniques, which provides several methods. What is shown here is a different method of replacing images with content.

You can see the following code:

Div.logo {   content:url (logo.png);}

The advantage of this image substitution technique is that the text content is actually replaced. Therefore, you do not need to set aspect to create space for the display of images, or to use text-indent or padding to hide the original text.

However, for the time being, there is still a lot to note:
1. You cannot repeat or tile a picture, or use an image sprite.
2. Currently only works under opera 9.5+ and Safari 4+ browsers, because these browsers support the content method for all elements, not just: after or: before.
The ALT attribute cannot be applied to the replaced picture, so some special users who use a screen reader may not understand the meaning of the picture you are replacing.

Seven, display the corresponding link icon

Refers to a different link type, after the link to display the corresponding link type icon, for example, the linked object is a picture, the display of the small icon of the picture, if the linked object is a video, the video small icon, if the link is a URL page link, the link is displayed small icon. You can see the following code:

CSS code:

P a[href $= ". pdf"]:after {    content:url (.. /image/icon_pdf.png);} P A[rel = "external"]:after {    content:url (. /image/icon_link.png);}

HTML code:

<p> You can view this PDF file: <a href= "/sample.pdf" >web the performance optimization of the site. Pdf</a>, or online view, <a href= "/http www.zhangxinxu.com/wordpress/"rel=" external "> click here </a>. </p>

The results are as follows:

You can really click here: CSS content display Link icon Demo

Viii. using attribute values as content contents

Using attribute values as content means that the Title,src,href,alt equivalents of the labels are displayed inside the label, which is a powerful feature. Since this technique is far from universal, so here's a brief introduction, you can see the following two pieces of style code:

A:after {   content: "(" attr (HREF) ")";}

Abbr:after {   content: "(" attr (title) ")";}

It is not difficult to understand and use here, the key is CSS3 's attr () method.

Forward looking: A powerful CSS3 attr () method.
CSS3 Values and Units extend the scope of the attr () expression, in addition to returning a string, you can also return a CSS colors, CSS integer, length, angle, time, Frequency and some other units.

By using the custom data property, you can achieve some very powerful effects, such as the rendering of simple chart graphics and the implementation of animation effects. For example, we can set the color value of Background-color based on the attribute value of the element, which will shine on the display of the online palette, and we can also specify the size of the element according to the attribute value, just as the length of each bar of the chart is defined. In short, the potential of attr () is staggering.

Nine, the last bit of nagging

I believe this article will help you understand the content properties. Just in China, in China, where IE6 is still prevalent, because IE6/7 's lack of support for content limits the popularity of this powerful feature, I believe it will usher in its spring in the coming years. With the gradual and in-depth understanding of CSS3, we will find that the potential and strength of CSS3 is beyond imagination. I can foresee that in the next few years, there will be similar to the Cambrian outbreak of CSS new technology emerges, at that time, it is really the front-end began to flourish in the era.

CSS content Generation