An interesting solution: Without backend and JS, just use CSS to reverse the order of a list number. What would you do?

Author: Manuel Matuzovic
Translator: Frontend Xiaozhi
Source: matuzo

If you have dreams and dry goods, search on [Daily Move to the World] Follow the brushing wisdom who is still doing the dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

I am working on a project with a reversed list. The list creation time is sorted in descending order, here I want to reflect it both semantically and visually (let the list display the corresponding number, the larger the number means the latest). I did some research on the Internet and found some interesting solutions, some are good, some are not so good.

The final result is similar to the following:

3. C
4. B
5. A

Next, let's take a look at what are the ways to achieve it.

reversed attribute in HTML

The simple and most straightforward solution is the reversed attribute in HTML.

<ol reversed>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>

reversed attribute is a boolean attribute. The reversed attribute specifies that the list order is descending (9, 8, 7...) instead of ascending (1, 2, 3...).

reversed attribute is supported by most browsers except IE. If you only want a solution, this is enough.

If you are curious about other ways to implement it, please continue reading.

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>

Although this method is more verbose, we also have more control over the list. For example, we can also operate like this:

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

It’s best not to do this, because skipping numbers may confuse users.

CSS custom counter()

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

<ol>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>

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;
  font-size: 2.5rem;
  font-weight: bold;
}

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>

ol {
  list-style: none;
}

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

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

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

<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

ol {
  display: flex;
  flex-direction: column-reverse;
}

The page looks like the result we want, but you press F12 to turn on the debug mode and check the order of the DOM. You will find that the order of the DOM is "ABC" instead of "CBA" . Also, if we copy and paste the list, the browser may copy it in “ABC”

In addition, I found another very creative solution on StackOverflow. The result is similar to Flexbox's solution, but there are more disadvantages (for example, it interferes with scrolling).

<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

ol {
  transform: rotate(180deg);
}

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

Of course, it is estimated that there is no way to do it in despair, and we better not do it.

This is the end of this issue of sharing. Thank you for watching. We have seen it in the next issue of sharing.

Talents’ [Three Lian] is the biggest motivation for Xiaozhi to keep sharing. If there are any errors or suggestions in this blog, we welcome talents to leave a message. Finally, thank you for watching.

---

code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dzone.com/articles/html-5-reverse-ordered-lists

comminicate

There are dreams and dry goods. search 1610c899b8a50a [Great Move to the World] attention to the brushing wisdom who is still doing the dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.