Use of attr (), Counter () and Calc () in CSS

The white-hot rivalry between browsers means that more and more people are now starting to use devices that support the latest and most advanced Web standards for the Internet, in a more interactive way. This means that we are finally able to use more powerful and flexible CSS to create a more concise, better maintained browser front-end code. Now let's take a look at some of the exciting CSS features that you may not know yet.

Display HTML attribute values in CSS with attr ()

The attr () feature has already appeared in the CSS 2.1 standard, but it is now popular. It provides an ingenious way to use the attributes on HTML tags in CSS, and in many cases it saves you the process of needing JavaScript processing in the past.

To use this feature, you need to use three elements: one: Before or: After CSS pseudo-class style,. Content property, and a attr () expression with the name of the HTML attribute you want to use. For example, want to show

The value of the Data-prefix attribute on the title, you can write this:

H3:before {

Content:attr (Data-prefix) "";

}

This is a heading

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

@media Print {

A:after {

Content: "(Link to" attr (href)) ";

}

}

Visit Our home page

Once you know the technique, you'll be amazed at how much time it can bring to your work!

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

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 easily add serial numbers to page titles, blocks, and other types of pages that appear consecutively. With it, you don't have to limit yourself to using

To achieve this effect, you can more flexibly use a custom number sequence on the page.

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

Body {

counter-reset:heading;

}

H4:before {

counter-increment:heading;

Content: "Heading #" counter (Heading) "."

}

If you would like to know more about this counter method, please refer to Mozilla on this topic

Developer Network page. There's an excellent example of how to use nested counter.

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 of the elements, and eliminates the ability to write JavaScript code 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 with its width, but it also leaves a portion of the pixel width 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 for the consortium.

We can see more and more clearly that CSS is ripe to replace JavaScript in some ways, greatly simplifying the work of web developers. If you don't start using these features, you're just being silly.