CSS content Generation Technology and Application

ArticleDirectory

• 1. Introduction
• 2. A little reminder
• III. Basic-generate content
• 4. Use counters to create numbers
• 5. Insert correct quotation marks for multilingual content
• 6. Replace text with images
• 7. display the corresponding link icon
• 8. Use attribute values as content
• 9. Last nagging

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 739

1. Introduction

Zxx: // here, the "Bang" function is to render an atmosphere.
The content attribute was introduced as early as css2.1. You can use: before and: After pseudo elements to generate content. This feature is currently supported by most browsers: (Firefox 1.5 +, Safari 3.5 +, IE 8 +, opera 9.2 +, chrome 0.2 + ). In addition, opera 9.5 + and Safari 4 currently support the content attributes of all elements, not just: before and: After pseudo elements.

InCSS 3 generated content work DraftThe content attribute adds more features, such as the ability to insert and remove documents to create a footer. Conclusion,

And paragraph comments. However, no browser supports content extension.

This article will show the basic usage of content generation and some special technologies that you can apply.

2. A little reminder

Before entering the topic, I want to be a long-winded old woman. I want to give you a friendly reminder.

• It only works in modern browsers where CSS is available.
• It cannot be used by Dom. It is just a pure representation. In special cases, from an access perspective, the current screen does not support reading the generated content.

III. Basic-generate content

Content is used as follows:

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

This style is used to add the text "I am extra text" before each H2 tag ".
You can click here: the most basic usage demo of content

In addition to text values, the value of the content attribute can also use the attribute values of tags. The method is ATTR (). See the following.Code:

 
A. Content: After {content: ATTR (href);} <a class = "content" href = "http://www.zhangxinxu.com/"> the value of href for this label is: </a>
 

The result is as follows (captured from firefox3.6 ):

Corresponding to the text value in tag a, the value of the href attribute of the tag is added at the end.
You can click here: Tag attribute value to generate content demo

Note:When you use ATTR () to obtain the tag attribute name, do not add quotation marks!

You can also use the counter to generate dynamic numbers or use the URL (/path/to/file) path to insert an image. For more information, see the following application instances.

4. Use counters to create numbers

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 an incremental sequence number 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:

 
<Ol>
<Li>  </LI>
<Li>  </LI>
</OL>
 

The result is as follows (under firefox3.6 ):

You can click here: content generates an incremental serial number demo

Note:
1. The ol tag applies the Counter-Reset attribute, and the Li tag applies the Counter-increment attribute. The values are sectioncounter, And the content attribute is used together,

And counter counters to achieve incremental results. 2. If you specify the display: None element, the counter under the content will not generate an incremental value. 3. of course, if the browser does not support this method, no numbers will appear. When you use firebug or other tools to view the real HTML, you will not see the generated values. Do not be confused, the content generated dynamically by the content attribute is purely decorative and false representation. 4. If you are interested in CSS counters and want to learn more, please refer to David storey's excellent article: automatic numbering with CSS counters.

5. Insert correct quotation marks for multilingual content

Different languages use different quotation marks. For example, the quotation mark is""And the Chinese quotation marks are"". Using content allows different languages to use corresponding characters. For example, we need to add the corresponding language quotation marks for the following text. What should we do?

 
<P lang = "en"> <q> it's only work if somebody makes you do it. </q> </P>
<P lang = "no"> <q> hvis du forteller Meg NOK en Vits, s 127skal jeg sl 1_deg til jorden. </q> </P>
<P lang = "ch"> <q> Welcome to Shanghai. Welcome to the World Expo! </Q> </P>
 

Let's try the following code:

/* Specify the 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 result is shown in:

You can click here: content generates the corresponding language character demo

This technology can be applied to various elements, not just Q tags. In addition, Safari 3 and IE7 (and below) do not support this technology.

6. Replace text with images

For image replacement technology, see several image replacement techniques, which provides several methods.

Here, we use another different image replacement method, which uses content.

You can refer to the following code:

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

The advantage of this image replacement technology is that the text content is indeed replaced. Therefore, you do not need to set the height and width to create space for the image display,

Or use text-indent or padding to hide the original text.

However, for the moment, there are still a lot of notes:
1. You cannot repeat or tile images, or use image Sprite.
2. Currently, it only works in the opera 9.5 + and Safari 4 + browsers, because these browsers support the content methods of all elements, not limited to: After or: before.
The ALT attribute cannot be applied to the replaced image. Therefore, some users who use the screen reader may not understand the meaning of the replaced image.

7. display the corresponding link icon

For different link types, icons of the corresponding link type are displayed after the link. For example, if the link object is an image, a small icon of the image is displayed,

If the link object is a video, a small video icon is displayed. If the link is a URL webpage link, a small icon of the link is displayed. You can refer to 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 site performance optimization </a>,
Or online view, <a href = "http://www.zhangxinxu.com/wordpress/" rel = "external"> click here </a>. </P>
 

The result is shown in:

Click here: CSS content display link icon DEMO

8. Use attribute values as content

When the attribute value is used as the content, the title, SRC, href, and ALT values of the tag are displayed inside the tag,

This is a powerful feature. As this technology is far from widely used, you can refer to the following two style codes for a brief introduction:

 
A: After {content: "(" ATTR (href )")";}
 

 
Abbr: After {content: "(" ATTR (title )")";}
 

It is not difficult to understand and use it here. The key is the ATTR () method of css3.

Prospective: Powerful css3 ATTR () method.
Css3 values and unitsThe draft extends the range of the ATTR () expression, except for the returned string,

You can also return CSS colors, CSS integer, length, angle, time, frequency, and other units.

By using custom data attributes, you can achieve some very powerful effects, such as rendering simple charts and graphs and implementing animation effects. For example, we can set the background-color value based on the attribute value of the element, which will shine in the online display palette. We can also specify the size and size of the element based on the attribute value,

Just like defining the length of each bar in a chart. In short, the potential of ATTR () is amazing.

9. Last nagging

I believe this article will help you understand the content attributes. In China, where IE6 is still popular, the lack of content in IE6/7 restricts the popularity of this powerful feature. However, I believe that in the next few years, it will usher in spring. With more and more in-depth understanding of css3, we will find that the potential and strength of css3 is beyond imagination. I can predict that there will be a new CSS technology similar to the explosion of Cambrian in the next few years. At that time, the front-end will begin to flourish.

References:
1. CSS generated content Techniques

If you find that the content in the article is inaccurate or that you need to communicate with others, you can comment on it or go here to ask questions.
Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 739