Question

I’ve been playing around a bit finding a way around the start attribute in ol elements.

As you may know, start has been declared deprecated in official standards like HTML 4.01 and XHTML 1.1, and the W3C hasn’t bothered to explain to us how we can get by without it. Yes, it was undeprecated with HTML5, but still, the question remains.

There’s Ordered Lists <OL>, Starting index with XHTML Strict? which explains nicely how to solve it. But only for numerical lists (with type=”1″). How about the other types?

I’ve created a jsFiddle, and my question is, can it be done? Can you remove the start attribute and replace it with CSS so that the result looks the same as the original? Or did the W3C just have a brain fart the day they deprecated it?

Answer 1

You can specify a second parameter to the counter() in the content CSS property (specification):

ol.roman18 {
    margin: 1em 0;
    counter-reset: item 17; /* The first list item will start at 18, XVIII */
}
ol.roman18 li {
    margin: 0 0 0 4em;
}
ol.roman18 li:before {
    content: counter(item, upper-roman) '.';
    counter-increment: item;
    /* Alignment */
    position: absolute;
    margin-left: -3.5em;
    text-align: right;
    width: 3em;
}

PS. item is not a required name, it’s just an identifier for the counter. If you wanted to, it can be replaced with ponies: http://jsfiddle.net/kRPDH/4/.

Demo: http://jsfiddle.net/kRPDH/6/