When Do CSS Attributes Fallback to Pixels (px) Without Units?

Fallback for CSS Attributes Without Units: A Case Study

CSS attributes often require units (e.g., px, em, %) to specify their values. However, in certain scenarios, these units may be omitted. This raises questions about the fallback mechanism and the behavior of user agents (UAs) in such situations.

Questions:

• Why do some attributes fallback to pixels (px) when units are omitted?
• Is px the preferred fallback unit in all W3C recommendations?
• Are UAs obligated to fallback to a preferred unit?
• What is the correct behavior in the following example, given the behavior of different browsers?

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

Answers:

1. px Fallback in Quirks Mode

In quirks mode, which is activated by the absence of a proper doctype, some browsers may fallback to px for certain attributes. This behavior stems from the legacy HTML width and height attributes, which accepted unitless numbers as pixel lengths.

2. Preferred Fallback Unit

Yes, px is the preferred fallback unit in the absence of a defined unit. This is based on the compatibility with legacy HTML behavior.

3. Fallback Obligation

No, there is no formal rule obligating UAs to fallback to a preferred unit. This leads to inconsistent behavior across browsers.

4. Browser Behavior Analysis

• Internet Explorer: In quirks mode, it falls back to px for width and border-width. In standards mode, it ignores unitless values.
• Firefox: In quirks mode, it falls back to px for width but ignores unitless values for border-width.
• Chrome, Opera, Safari: In quirks mode, it falls back to px for both width and border-width.

Note: In standards mode, all browsers are required to ignore length values without units.

The above is the detailed content of When Do CSS Attributes Fallback to Pixels (px) Without Units?. For more information, please follow other related articles on the PHP Chinese website!