Search code examples
htmlcssz-indextabindex

How should User Agents deal with non-integer values for tabindex and z-index?


I have some code I'm supporting that has tabindex="1.1", tabindex="1.2", etc. I'm thinking about changing the values to be integers. Would this improve browser behaviour?

W3C says:

tabindex = number [CN]

This attribute specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32767. User agents should ignore leading zeros.

It doesn't say how non-integer values should be treated.

This reference says:

NUMBER

A number. Numbers must begin with a hyphen or digit and can include the decimal point.

So the markup is valid if you use a decimal point but does it make sense?

My question is should user agents honour the decimal point and the digits after it or just use the integer part? i.e. should the two values above be treated as the same or different? Why would you use those values in favour of tabindex="11", tabindex="12", etc.? The same goes for z-index.


Solution

  • As noted in David's answer, the current HTML/CSS specifications clearly require an integral value for these properties. Decimal values are not meant to be supported.

    should the two values above be treated as the same or different?

    In terms of should, I would have thought they would be treated as different values, and basically parsed as floating-point numbers. However a quick jsFiddle test shows otherwise, in Chrome at least.

    <input type="text" placeholder="start here" tabindex="1" />
    <input type="text" placeholder="tab 3" tabindex="1.3" />
    <input type="text" placeholder="tab 2" tabindex="1.2" />
    <input type="text" placeholder="tab 1" tabindex="1.1" />
    <hr />
    <input type="text" placeholder="start here" tabindex="10" />
    <input type="text" placeholder="tab 3" tabindex="13" />
    <input type="text" placeholder="tab 2" tabindex="12" />
    <input type="text" placeholder="tab 1" tabindex="11" />
    

    http://jsfiddle.net/NWKt4/2/

    Why would you use those values in favour of tabindex="11", tabindex="12", etc.?

    Based upon the results above, I'd suggest that you wouldn't/shouldn't use decimal values in favor of integral ones, since they don't appear to work as one might expect.

    My question is should user agents honour the decimal point and the digits after it or just use the integer part?

    That seems somewhat subjective. So my subjective answer is that yes, of course they should.

    In practice, however, it does not appear that mainstream browsers (Firefox does the same thing as Chrome, as does IE) honor the fractional component of the tabindex value. And the HTML/CSS spec says that this should be an integral value.

    Edit: and the same applies to z-index as well: http://jsfiddle.net/NWKt4/3/