Growing competition between species means that the browser now more and more people start using those devices support the latest and most advanced W3C Web standards in a more interactive way to access the Internet. This means that we are finally able to take advantage of more powerful and flexible CSS to create a more concise and better safeguard the browser front-end code. Now let's look at some of you may not know of the exciting features of CSS.
1. Display HTML attribute value used in the CSS attr ()
attr () function has emerged as early as in the CSS 2.1 standard, but only now prevalent. It provides a smart way in CSS use HTML attributes on the label, and in many cases can help you save a past need Javascript course of treatment.
To use this feature, you need to use three elements: a: before or: after CSS pseudo-class style, .content property, and with a HTML attribute name you want to use the attr () expression. For example, you want to display
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
The value of data-prefix attribute on the title, you can write like this:
code show as below:
h3:before {
content: attr(data-prefix) " ";
}
This is a heading
Obviously, this example does not show how useful it just shows its basic usage. Let's try a more useful example, attr () is an excellent application is that when a user prints a page link to the page is displayed. To achieve this, you can write:
code show as below:
@media print {
a:after {
content: " (link to " attr(href) ") ";
}
}
Visit">http://example.com">Visit our home page
Once you know this technique, you will be surprised at how easy it can give you a lot of time working to bring!
Tip: In the new version of the CSS3 standard, attr () function is extended, can be used in a variety of CSS tags.
2. Use the counter () sequence number in the list is automatically added
The other in the CSS 2.1 has supported the function of counter (), use it, you can easily add the page number in the title page content, blocks and other various successive occurrences. With it, you do not have to be limited to use only
To achieve this effect, you can be more flexible use of custom sequence of numbers on a page.
The key is that it is really very simple: in: before pseudo-classes in the content attribute to counter ():
code show as below:
body {
counter-reset: heading;
}
h4:before {
counter-increment: heading;
content: "Heading #" counter(heading) ".";
}
If you want to know more about this counter to zero and increase self-knowledge method, refer to the Mozilla Developer Network page on the subject. There are an excellent example of how to use nested counter.
3. Use the calc () do the math
Last but not least, let us say calc () function. This function allows you to perform simple arithmetic calculations such as length and width of the element, eliminating the need Javascript code you write is not easy to maintain. This function supports all simple basic arithmetic operations, including addition and subtraction, multiplication and division.
Let's say you want to create an element so that it fills the width of its parent element, but also to set aside part of pixels wide do other use:
code show as below:
.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, is not it? A more detailed description please refer to the W3C CSS calc specification.
We can find more and more clear, CSS has matured in some ways to replace javascript, greatly simplifies the work of web developers. If you do not start to use these features, it can only be said to be being silly.
