Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fallback for CSS attributes without unit

Consider a scenario where CSS attribute is missing the unit (px, em, pt, %):

<body>
    <div 
        style=  "width:170;
                border:1 dotted PaleGreen;
                background-color:MistyRose">
        The quick brown
    </div>
</body>

Questions:

  1. Why would it fallback to px? Is pixel always a preferred unit? Is there any rule defined in W3C working draft or recommendation?
  2. Is there a rule which makes it mandatory for a UA to fallback to a preferred unit?
  3. Given the above example, which of the following is a correct behavior:
    • Internet Explorer: In Quirks mode (IE6,5,4..) width and border-width used to fallback to px. Since IE7 (till present, IE10RP) it ignores the whole rule if unit is missing. Therefore both rules were ignored.
    • Firefox 13: In the above example width fallback to px, but border-width was ignored.
    • Chrome 19, Opera 12, Safari 5.1.2: Both width and border-width fallback to px.

Note: On Microsoft-Connect, they said:

The issue you are reporting is by design. IE10 in standards mode ignores a width or height without a unit in compliance with the CSS standards. The unit is not optional.

like image 500
vulcan raven Avatar asked Jun 30 '12 14:06

vulcan raven


1 Answers

I don't see a doctype declaration in your HTML, so I can only assume your test page is being rendered in quirks mode.

  1. Why would it fallback to px? Is pixel always a preferred unit? Is there any rule defined in W3C working draft or recommendation?

    It will only fall back to px in quirks mode (and I believe only for certain properties). And yes, px is the preferred fallback unit. This harks back to the legacy HTML width and height attributes which accepted pixel lengths as unitless numbers.

  2. Is there a rule which makes it mandatory for a UA to fallback to a preferred unit?

    No, hence the inconsistent behavior you observe. In standards mode, though, a UA needs to ignore length values without units; the unit is not optional, as mentioned in Microsoft Connect which you quote.

    In CSS2.1, all non-zero length values must have units.

  3. Given the above example, which of the following is a correct behavior:

    • Internet Explorer: In Quirks mode (IE6,5,4..) width and border-width used to fallback to px. Since IE7 (till present, IE10RP) it ignores the whole rule if unit is missing. Therefore both rules were ignored.
    • Firefox 13: In the above example width fallback to px, but border-width was ignored.
    • Chrome 19, Opera 12, Safari 5.1.2: Both width and border-width fallback to px.

    Again, based on the assumption that your page is in quirks mode, I can only say that while the specifications make a mention of quirky behavior, the specific details of such quirky behavior aren't defined in the specifications (for both obvious and not-so-obvious reasons).

    I'm guessing Microsoft changed the quirks-mode behavior in IE7+ to reflect standards behavior for unitless values, as quirks mode exists in all browsers (except IE < 6) and is triggered with the same improper doctype or lack of a doctype. The behavior in standards mode has not changed, though, as far as I'm aware.

like image 71
BoltClock Avatar answered Nov 14 '22 08:11

BoltClock