Three CSS skills you need to know, three CSS skills

Three CSS skills you need to know, three CSS skills

The fierce competition among various browsers means that more and more people are now using devices that support the latest and most advanced W3C Web standards to access the Internet in a more interactive way. This means that we can finally use the larger and more flexible CSS to create browser front-end code that is simpler and better maintained. Now let's take a look at some exciting CSS functions that you may not know.

Display HTML property values with attr () in CSS

The attr () feature has already appeared as early as the CSS 2.1 standard, but it is only now popular. It provides a clever way to use HTML tag attributes in CSS. In many cases, it can help you save the previous Javascript processing process.

To use this function, you need to use three elements: One: before or: after CSS pseudo-class style ,. content attribute, and an attr () expression with the HTML attribute name you want to use. For example, to display the value of the data-prefix attribute on the

h3:before {    content: attr(data-prefix) " ";    }    

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 of attr () is to display the Page Link when the user prints the page. To achieve this, you can write as follows:
@media print {    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 surprised at the convenience it can bring to your work in many cases!
Tip: In the new CSS3 standard, the attr () function is extended and can be used in various CSS tags.
Use counter () to automatically add serial numbers to the list
Another feature that has been supported in CSS 2.1 is counter (). With this feature, you can easily add serial numbers to the page title, block, and other continuously appearing page content. With it, you don't have to limit the use of <ol> to achieve this effect. You can use custom digital sequences on pages more flexibly.
The key is that it is really simple: Add counter () to the content attribute in the: before pseudo class ():
body {    counter-reset: heading;    }    h4:before {    counter-increment: heading;    content: "Heading #" counter(heading) ".";     }
If you want to know