Three CSS tips you need to know

Three CSS Tips You Need to Know

The fierce competition between various browsers means that more and more people are now starting to use devices that support the latest and most advanced W3C web standards, in a more comprehensive way. Interactive way to access the Internet. This means we can finally take advantage of more powerful and flexible CSS to create cleaner, better-maintained browser front-end code. Now let's take a look at some exciting CSS features that you may not know about yet.

　Use attr() to display HTML attribute values ​​in CSS

　The attr() function has appeared as early as the CSS 2.1 standard, but it is only now becoming generally popular. It provides a clever way to use attributes on HTML tags in CSS, which in many cases can help you save the process that previously required JavaScript processing.

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

title, you can write it like this:

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

This is a heading

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

@media print { a:after { content: " (link to " attr(href) ") "; } } Visit our home page

　 Once you know this technique, you will be surprised at how convenient it can bring to your work many times!

Tip: In the new version of the CSS3 standard, the attr() function has been expanded and can be used in various CSS tags.

Use counter() to automatically add serial numbers to the list

Another function already supported in CSS 2.1 is counter(). Using it, you can easily add serial numbers to the page title, block and other consecutive elements. Add serial numbers to page content. With it, you don't have to be limited to using

to achieve this effect, you can use custom number sequences on the page 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 more about this counter zeroing and incrementing method, please refer to the Mozilla Developer Network page on this topic. There is an excellent example of how to use nested counters.

　Using calc() to do arithmetic

　Last, but not least, let’s talk about the calc() function. This function allows you to perform simple arithmetic calculations, such as calculating the length and width of an element, without having to write unmaintainable Javascript code. This function supports all simple basic arithmetic operations, including addition, subtraction, multiplication and division.

　For example, you want to create an element that is as wide as its parent element, but leaves some pixels 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 a more detailed introduction, please refer to the W3C CSS calc specification.

We can find more and more clearly that CSS has matured to the point where it can replace JavaScript in some methods, greatly simplifying the work of web developers. You'd be foolish not to start taking advantage of these features.

The above are the three CSS skills you need to know. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!