Three CSS3 tips you need to know (turn)

1. Displaying HTML attribute values in CSS with attr ()

The attr () feature had already appeared in the CSS 2.1 standard, but it has only now become popular. It provides an ingenious way to use attributes on HTML tags in CSS, which in many cases can save you from the previous process of requiring JavaScript processing.

To use this feature, you need to use three elements: one : Before or : after CSS pseudo-class style, . Content property, and a attr () with the name of the HTML attribute you want to use an expression. For example, to display the value of the Data-prefix property on the header, you can write this:

{  content:   attr (data-prefix) "";}  Data-prefix= "Custom prefix" >this is a heading

Obviously, this example does not show how useful it is, but shows its basic usage. Let's try a more useful example, an excellent application ofattr () is to display the page link when the user prints the page. To achieve this, you can write:

{    a: After{content: ' (link to ' attr (href) ') ';  } }<a href= "http://example.com" >visit our home page</a>

Once you know this technique, you will be amazed at the convenience it can bring to your work in a lot of times!

tip: in the new CSS3 standard, the attr () feature is extended and can be used in a variety of CSS tags.

2. Use counter () to automatically add an ordinal number to the list

Another feature that has been supported in CSS 2.1 is counter (), which allows you to add serial numbers to page titles, chunks, and various other pages that appear continuously. With it, you don't have to limit yourself to using <ol> to achieve this effect, and you can more flexibly use a custom number sequence on the page.

The point is that it's really simple: the content attribute in the before pseudo-class joins counter ():

{   counter-reset: heading;    }  {    counter-increment: heading;     Content: "Heading #" counter (Heading)";"  

If you want to know more about this counter zeroing and self-increment method, please refer to Mozilla on this topic
Developer Network page. There's an excellent example of how to use nested counter.

3. Use Calc () to do arithmetic

Last but not least, let's say the calc () feature. This function allows you to perform simple arithmetic calculations, such as calculating the length and width of an element, eliminating the JavaScript code you write that is not easy to maintain. This function supports all simple basic arithmetic operations, including subtraction.

For example, you want to create an element that fills its parent element, but leaves a portion of the pixel wide for other uses:

. Parent{width:100%;Border:solid black 1px;position:relative;}. Child{position:Absolute; Left:100px;width:Calc (90%-100px);Background-color:#ff8;text-align:Center;}

Pretty, isn't it? For more detailed information, please refer to the CSS Calc specification.

Tips: IE9 supports Calc, and chrome doesn't seem to support

It is more and more clear that CSS has matured into some ways to replace JavaScript, greatly simplifying the work of web developers. If you don't start taking advantage of these features, that's just being silly.

[English Original: Three CSS features you need to know about]

Reprinted from: Http://www.oschina.net/news/38231/3-css-features-you-should-know