Let’s learn to use CSS counters

Time:2020-10-28

Author: Ahmad shaded
Translator: front end wit
Source: Sitepoint

Like it and watch it again. Get used to it

this paperGitHubhttps://github.com/qq44924588… On has included, more previous high praise article classification, also sorted out a lot of my documents, and tutorial materials. Welcome to star and perfect, you can refer to the examination site to review, I hope we have something together.

In my opinion, CSS counters are not fully utilized on the web, although they are very well supported (IE8 +)!. In this article, I’ll explain how to use CSS counters in projects, as well as some use cases.

What are CSS counters

Counter is a powerful tool provided by CSS3. It is a method that allows us to use CSS to automatically number elements. It is very convenient to count any element in the page and realize the function similar to the sequential table. However, compared with ordered list, CSS counter can count any element and realize personalized counting.

Properties related to CSS counters

CSS counters require three properties, namely:

  • counter-reset
  • counter-increment
  • counter()

counter-reset

counter-reset: property is used to define and initialize one or more CSS counters. It can use one or more identifiers as a value that specifies the name of the counter.

Usage syntax:Counter reset: [< identifier > < integer >?] + | none | inherit

Each counter name can be followed by an optional integer value that specifies the initial value of the counter.

be careful:

  1. keywordnoneinheritandinitialCannot be used as counter name; keywordnoneinheritIt can be used as a measurecounter-resetProperty. set upnoneThe counter will be set; setinheritWill inherit from the parent of the elementcounter-resetValue. Thecounter-resetThe default value of the property isnone
  2. The initial value of the counter is not the first digit / value when the counter is displayed. This means that if you want the counter to1To start displaying, you need to set thecounter-resetThe initial value in is set to zero.0Is the default initial value, so if omitted, it will be reset to zero by default;counter-resetNegative values are allowed. Therefore, if you want the counter to display from zero, you can set its initial value to-1

counter-increment

counter-incrementProperty is used to specify the increment value of one or more CSS counters. It takes one or more identifiers as values and specifies the name of the counter to increment.

Usage syntax:Counter increment: [< identifier > < integer >?] + | none | inherit

Each counter name (identifier) can be followed by an optional integer value that specifies how much the counter needs to be incremented each time the element we number occurs. The default increment is 1. Negative integers and zeros are allowed. If a negative integer is specified, the counter is decremented.

counter-incrementProperties must be andcounter-resetProperty.

Counter() function

counter()Functions must be andcontentProperty to display CSS counters. It takes the CSS counter name as a parameter and passes it as a value to thecontentProperty, andcontentProperty will be used:beforeThe pseudo element displays the counter as generated content.

counters()There are also two forms of functions:counters(name,string)andcounters(name,string,style)

nameThe parameter is also the name of the counter to display. have access tocounter-resetProperty to specify the name of the counter. andcounters()Function and Counter()The difference between functions (singular form) is that:counters()Function can be used to set nested counters.

Nested counters are used to provide automatic numbering for nested elements, such as nested lists. If you want to apply counters to nested lists, you can number the first level items, for example, 1, 2, 3, and so on. The second level list items will be numbered 1.1, 1.2, 1.3, etc. The third level projects will be 1.1.1, 1.1.2, 1.1.3, 1.2.1, 1.2.2, 1.2.3, etc.

stringParameter is used as a separator between numbers at different nesting levels. For example, in ‘1.1.2’, the dot (‘.’) is used to separate different level numbers. If we use the counters() function to specify the dot as a separator, it might look like this:

content:counters(counterName,".");

If you want nested counters to be separated by another character, for example, if you want them to display as “1-1-2”, you can use dashes instead of dots as string values:

 content:counters(counterName,"-");

andcounter()Function, the style parameter is used to define the style of the counter. By default, counters are formatted with decimal numbers. Specifically aboutstyleParameter settings can refer tocounter()FunctionalstyleParameter.

How to add a counter

1. Select a name for the counter

Suppose we have the following HTML:

<div class="content">
    <h2>Section</>
    <p><!-- Description --></p>

    <h2>Section</>
    <p><!-- Description --></p>

    <h2>Section</>
    <p><!-- Description --></p>
</div>

I want to give it to everyonetitleElement to add a number. To do this, I’ll define a counter on the parent element.

.content {
    counter-reset: section;
}

Everyone said that there was no project to write on the resume, so I found a project for you, and I also gave you a building tutorial.

2. Up counter

This step is very important for the work of the counter. stay<h2>Element, I’ll create onebeforePseudo element that will be used to display the value of the counter.

h2:before {
    counter-increment: section;
}

3. Distribution counter

The last step is to use thecounter()Function ascontentProperty. Now, add the following:

h2:before {
    counter-increment: section;
    content: counter(section);
}

Then, forbeforePseudo elements add some styles to make it look beautiful:

Let's learn to use CSS counters

Event source code: https://codepen.io/shadeed/pe…

CSS counter use cases

Dynamic chapter title

Based on the previous example, we can editbeforePseudo elements, as shown below

h2:before {
  counter-increment: section;
  content: "Section " counter(section);
  display: block;
  max-width: 80px;
  font-size: 14px;
  font-weight: normal;
  background-color: rgba(#0277bd, 0.2);
  border-radius: 20px;
  text-align: center;
  padding: 6px 8px;
  margin-bottom: 0.75rem;
}

Let's learn to use CSS counters

Event source code: https://codepen.io/shadeed/pe…

Nested counter

Suppose we have the following list:

<ul class="services">
    <li class="services__item">Design
      <ul>
        <li>Web</li>
        <li>Mobile</li>
        <li>Graphic</li>
      </ul>
    </li>
    <li class="services__item">Web Development</li>
    <li class="services__item">Mobile Development
      <ul>
        <li>iOS</li>
        <li>Android</li>
        <li>Windows Phone</li>
      </ul>
    </li>
</ul>

We want a level one display “1.”, secondary correspondence“1.1” 。 To do this, we should do the following:

/* Defining a counter for the main list items */
.services {
    counter-reset: services;
}

.services__item:before {
    counter-increment: services;
    content: counter(services) ".";
}

/* Defining a counter for the sub lists */
.services__item ul {
    counter-reset: sub-services;
}

.services__item li:before {
    counter-increment: sub-services;
    content: counter(services) "." counter(sub-services);
}

Let's learn to use CSS counters

Example source code: https://codepen.io/shadeed/pe…


Original text: https://ishadeorddeed.com/art…

It is impossible to know the possible bugs after code deployment in real time. In order to solve these bugs afterwards, we spent a lot of time on log debugging. By the way, we recommend a good bug monitoring tool fundebug.


communication

The article is updated every week. You can search “big move world” for the first time to read and urge the change (one or two articles earlier than the blog). This article is GitHub https://github.com/qq449245884/xiaozhi I have collected many documents and I have welcomed Star and perfect. You can review the test points and pay attention to the official account.welfareYou can see the benefits, you know.

Let's learn to use CSS counters