Three CSS tips you must know

The fierce competition between various browsers means that more and more people are now beginning to use 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 take advantage of more powerful and flexible CSS to create simpler and better-maintained browser front-end code. Now let's take a look at some exciting CSS features that you may not be aware of yet.

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

attr()The 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, .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 684271ed9684bde649abda8831d4d355title, you can write like this:

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

    <h3 data-prefix="Custom prefix">This is a heading</h3>

Obviously, this example does not display How useful it is, just 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 like this:

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

    <a href="example.com">Visit our home page</a>

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

Tips: In the new version of the CSS3 standard, the attr() function has been extended and can be used in various CSS tags. In CSS2.1 attr() always returns a string. In CSS3 attr() can return many different types.

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

Another function already supported in CSS 2.1 is counter(). Using it, you can conveniently Add serial numbers to page titles, blocks, and various other consecutive page content. With it, you don't have to be limited to using c34106e0b4e09414b63b2ea253ff83d6 to achieve this effect. You can use custom number sequences on the page more flexibly.

Counter-reset definition and usage

The counter-reset attribute sets the value of the counter for the number of occurrences of a certain selector. Default is 0.

Using this property, the counter can be set or reset to any value, either positive or negative. If number is not provided, it defaults to 0.

Note: If "display: none" is used, the counter cannot be reset. If you use "visibility: hidden" you can reset the counter.

Note: Internet Explorer 8 (and later) supports the counter-reset attribute if !DOCTYPE is specified.

counter-resetPossible values

Value	Description
none	default. The selector counter cannot be reset.
id number	id Defines the selector, id, or class that resets the counter. number Sets the value of the counter for the number of occurrences of this selector. Can be positive, zero, or negative.
inherit	Specifies that the value of the counter-reset attribute should be inherited from the parent element.

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. Calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. 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.

When there are "+" and "-" in the expression, there must be spaces before and after them. For example, "widht: calc(12%+5em)" is wrong to write without spaces; expression When there are "*" and "/", there can be no spaces before and after them, but it is recommended to leave spaces. The browser's compatibility with calc() is pretty good. It is well supported in IE9+, FF4.0+, Chrome19+, and Safari6+. It is also necessary to add the identifier of each browser manufacturer in front of it, but unfortunately, Most mobile browsers do not support it yet, and currently only "firefox for android 14.0" supports it.

Suppose you want to create an element whose width takes up the full width of its parent element, but leave 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;
    }

Beautiful, isn’t it? ?

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 is the detailed content of Three CSS tips you must know. For more information, please follow other related articles on the PHP Chinese website!