Three CSS tips you need to know

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

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 () expression with the name of the HTML property you want to use. For example, to display the value of the Data-prefix property 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:
@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 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.
Use counter () to automatically add an ordinal number to a 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 ():
body {    counter-reset:heading;    }    H4:before {    counter-increment:heading;    Content: "Heading #" counter (Heading) ";"     
If you would like to know more about this counter zeroing and self-increment method, please refer to the Mozilla Developer Network page on this topic. 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 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;    }
Three CSS tips you need to know