By Manuel Matuzovic


Translator: front end little wise


Source: matuzo

Have a dream, have dry goods, WeChat search [big move world] keep an eye on this washing dishes in the wee hours of the morning.

This paper making https://github.com/qq449245884/xiaozhi has included, has a complete line companies interview examination site, information, and my series of articles.

I’m working on a project that has a list in reverse order. The list is created in descending order, which I want to do both semantically and visually (make the list display the corresponding number, the larger the number is, the more recent). Some research has been done online and some interesting solutions have been found, some good, some not so good.

The final result looks something like this:

  1. C
  2. B
  3. A

Then, let’s look at some of the ways in which this can be done.

In the HTMLreversedattribute

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

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

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

The reversed property is supported in most browsers except IE, but this is fine if you just want the solution.

If you’re curious about what else can be done, 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>

This is more verbose, but we also have more control over the list. For example, we can do something like this:

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

It is best not to do this, as skipping numbers may confuse the user.

CSS custom counter()

The third way is to use the CSS counter calculator. To reverse the order of the counters, we have two things to do: reset the counter to a non-zero value and increment the counter by 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; The font - size: 2.5 rem; font-weight: bold; }

If we don’t know the exact number of lists, we can move the counter-reset property 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 list order 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 what we want, but if you press F12 to turn on debug mode and check the order of the DOM, you’ll notice that the order of the DOM is “ABC” instead of “CBA” in the order of the render list. Also, if we copy and paste the list, the browser might copy it in its original order, “ABC.”

I also found another very creative solution on StackOverflow. The result is similar to the Flexbox solution, but with more drawbacks (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 in desperation, will do so, we had better not do it.

This is the end of this period of sharing, thank you for watching, we have seen in the next period of sharing.

Talents of the [three] is small wisdom to share the biggest power, if there are any mistakes and suggestions in this blog, welcome talents to leave a message, finally, thank you for watching.

After the deployment of the code may exist bugs can not be known in real time, in order to solve these bugs afterwards, spent a lot of time to debug the log, here by the way to recommend a good BUG monitoring toolFundebug.

Original: https://dzone.com/articles/ht…

communication

Article continuously updated every week, you can search the first big move world 】 【 WeChat time reading, reply [welfare] how a front-end video, waiting for you, in this paper, making https://github.com/qq449245884/xiaozhi has included, welcome Star.