By Manuel Matuzovic

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

I’m working on a project that has a list in reverse order. The list is created in descending order, and I want it to be both semantically and visually (let the list show the corresponding number, the larger the number is, the more up-to-date it is). Some research on the Internet has turned up some interesting solutions, some good, some not so good.

The end result looks something like this:

  1. C
  2. B
  3. A

Next, let’s look at some of the ways to do this.

In the HTMLreversedattribute

The simple, most straightforward solution is the reversed property in HTML.

<ol reversed>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>
Copy the code

The reversed property is a Boolean property that specifies that the lists should be in descending order (9, 8, 7…). , instead of ascending (1, 2, 3…) .

The reversed attribute is supported by most browsers except Internet Explorer, so if you only want the solution, this will do.

If you’re curious about other ways to do this, read on.

The value attribute in HTML

Another way is to use the value attribute:

<ol>
  <li value="3">C</li>
  <li value="2">B</li>
  <li value="1">A</li>
</ol>
Copy the code

This is more verbose, but gives us more control over the list. For example, we can also do this:

<ol>
  <li value="6">C</li>
  <li value="4">B</li>
  <li value="2">A</li>
</ol>
Copy the code

It’s best not to do this, as skipping numbers can confuse users.

CSS custom counter()

The third way is to use CSS’s counter calculator. To reverse the order of counters, we have two things to do: reset the counter to a non-zero value and increment the counter by negative numbers.

<ol>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>
Copy the code
ol { counter-reset: my-custom-counter 4; list-style: none; } ol li { counter-increment: my-custom-counter -1; } ol li::before { content: counter(my-custom-counter) ". "; color: #f23c50; The font - size: 2.5 rem; font-weight: bold; }Copy the code

If we don’t know the exact number of lists, we can move the counter-reset attribute to HTML:

<ol style="counter-reset: my-custom-counter {{ items.length + 1 }}">
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>
Copy the code
ol {
  list-style: none;
}

ol li {
  counter-increment: my-custom-counter -1;
}

ol li::before {
  content: counter(my-custom-counter) ". "
}
Copy the code

Some articles suggest using Flexbox or similar techniques to reverse the list order in CSS. We shouldn’t do this because it looks right, but the DOM order remains the same. Changing the order in CSS has no effect on DOM order.

<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
Copy the code
ol {
  display: flex;
  flex-direction: column-reverse;
}
Copy the code

The page looks like what we want, but if you press F12 to open debug mode and check the DOM order, you’ll see that the DOM order is ** “ABC” instead of “CBA” ** the sequential render list. Alternatively, if we copy and paste the list, the browser might copy it in its original order “ABC”.

Another very creative solution I found on StackOverflow. The result is similar to Flexbox’s solution, but with more disadvantages (for example, it interferes with scrolling).

<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
Copy the code
ol {
  transform: rotate(180deg);
}

ol > li {
  transform: rotate(-180deg);
}
Copy the code

Of course, this is probably done out of desperation, and we’d better not do it.

That’s all for this episode. Thanks for watching. We’ll see you next time.

Talented people’s [three] is the biggest power of wisdom to share, if there is any mistake or suggestion in this blog, welcome talented people to leave a comment, finally, thank you for watching.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dzone.com/articles/ht…

communication

This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.