With all the hype surrounding the new APIs and the fancy parts of CSS3, I had almost forgotten about the new
reversed attribute that allows you to write a descending list of numbered items, as opposed to the default ascending list of numbered items.
You can get full details in the specification, but here I’ll summarize what it does and I’ll offer a solution for the fact that there is (from what I can see) no browser support for this attribute.
Summary of the “reversed” Attribute
As mentioned, using the new
reversed attribute, you can tell the browser that the numbering for the list items should display in descending order, instead of the default ascending.
At first, this confused me. I was under impression that this attribute would actually physically reverse the contents of the list. But that’s not the case. The items will still appear in the same order as they appear in the markup, but the numbers will begin with the highest. So if you have 10 list items, then the first list item will display with a number 10, and the second with a number 9, and so forth.
The syntax is simple, you just add the
reversed attribute to any
<ol> element. This attribute is a Boolean attribute, so it doesn’t take any value. If you’re using an XHTML doctype, you would need to do
reversed="reversed" to pass validation.
The code (as if you needed an example!) looks like this:
<ol reversed> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> <li>List item five</li> </ol>
The result in the browser would be:
The “start” Attribute
In addition to the
reversed attribute, HTML5 also reintroduces the
start attribute for ordered lists. I say reintroduces because this attribute was introduced in older versions of HTML but eventually became deprecated in HTML4.
Using this attribute, you can specify at what number you want the list to begin. The value must be an integer, otherwise it will just default to “1”. So, without reversed, if you specify a start of “100”, then each list item will be numbered starting with 100. The result would be as shown below:
If you reverse the list, and specify a
start value, then the list will begin with that specified value and will go backwards. Like this:
Because it’s an older attribute, the
start attribute has full support everywhere, so that’s good news.
Browser Support for “reversed”?
Browser support is as follows:
- Latest Chrome
- Latest Firefox
- Latest Opera (12.14; didn’t work in 12.20)
- Latest Safari (6.0.3) on Mac; doesn’t work on Safari PC (5.0.3)
So the only major omission is all versions of IE. With the polyfill option (see below), I think this is not too bad. And just as an FYI, there is an open bug report for
<ol reversed> on IE10 (you have to be logged in to Microsoft Connect view that bug).
Fixing it With “value” Attributes
Using this attribute, we can do this:
<ol> <li value=5>List item one</li> <li value=4>List item two</li> <li value=3>List item three</li> <li value=2>List item four</li> <li value=1>List item five</li> </ol>
But we all know that’s pretty lame — unless you’re doing something funky where you’re adding numbers that have no order or whatever.
But this gave me an idea.
A Polyfill for “reversed”
After starting to write this article, and then realizing there was no support, I decided to write a jQuery polyfill. It didn’t take too long, as it accomplishes a pretty simple task: It looks for the presence of the
reversed attribute on an ordered list; then it counts the number of list items in the list; then it adds the
value attribute to each list item, with the appropriate integer.
It also takes into consideration the
start attribute, so if that’s present, it will start the numbered list at that number and descend.
It would be nice if Modernizr detected support for this. I don’t see anything in their docs but I opened an issue to see if it can be added.
Feel free to offer suggestions for improvement or bug reports.