Three tips you need to know about CSS

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 can finally take advantage of more powerful and more flexible CSSTo 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 () with the name of the HTML attribute you want to use an expression. For example, to display the value of the Data-prefix property on the header, you can write this:

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 ofattr () 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= "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, theattr () feature is extended and can be used in a variety of CSS tags. attr () always returns a string in CSS2.1. attr () can return a number of different types in CSS3.

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.

Counter-reset Definition and usage

The Counter-reset property sets the value of a counter that has a selector occurrence. The default is 0.

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

Note: If you use "Display:none", you cannot reset the counter. If you use "Visibility:hidden", you can reset the counter.

NOTE: if specified! DOCTYPE, Internet Explorer 8 (and later versions) supports the Counter-reset property.

Counter-reset Possible values


  
 
 
   
 
    
 
     
value
 
     
Description
 
    
 
    
 
     
None
 
     
Default. The counter of the selector cannot be reset.
 
    
 
    
 
     
ID number
 
     
The ID defines the selector, ID, or class of the reset counter.
 number to set the value of the counter for which this selector appears. Can be positive, 0, or negative.
 
    
 
    
 
     
Inherit
 
     
Specifies that the value of the Counter-reset property should be inherited from the parent element.
 
    
 
   
 

  

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 want to know more about this counter zeroing and self-increment method, please refer to Mozilla on this topic
Developer Network page. 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. Calc is an abbreviation for the English word Calculate (calculation) and is a new feature of CSS3 that specifies the length of the element. 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.

When there are "+" and "-" in the expression, there must be a space before and after it, such as "Widht:calc (12%+5em)" is not a blank notation is wrong, there are "*" and "/" in the expression, there can be no space before and after it, but it is recommended to leave a space. The browser to calc () compatibility is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, the same need to be preceded by the browser manufacturer's identifier, but unfortunately, the mobile browser is mostly not supported, currently only " Firefox for Android 14.0 "support.

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;    }
Pretty, isn't it?

It is more and more clear that CSS has matured into some ways to replace JavaScript, greatly simplifying the work of web developers. If you don't start taking advantage of these features, that's just being silly.