What is the Fallback Behavior for Unitless CSS Attributes?

Fallback Behavior for Unitless CSS Attributes

Introduction

When a CSS attribute lacks a unit (e.g., px, em, pt, %), browsers often exhibit distinct fallback behaviors. This article examines the rationale behind these behaviors and the relevant guidelines in W3C specifications.

Fallback to px Unit

In quirks mode, some browsers, such as Internet Explorer versions 6-5, may fallback unitless width and border attributes to px. Historically, this behavior stemmed from HTML attributes that accepted unitless pixel lengths.

Preferred Fallback Unit

While px is a common fallback unit, it is not universally preferred. W3C specifications do not mandate a specific fallback unit.

Mandatory Fallback

No W3C standard explicitly requires user agents (UAs) to fallback to a preferred unit. This lack of a clear mandate contributes to the inconsistencies observed in browser behavior.

Example Behavior

In standards mode, a UA should ignore length values without units. However, in quirks mode, browsers may exhibit varying behaviors, as demonstrated in the example:

• Internet Explorer: Ignores both width and border rules due to missing units.
• Firefox: Fallbacks width to px but ignores border.
• Chrome, Opera, Safari: Fallback both width and border to px.

Microsoft Connect Response

The statement from Microsoft Connect emphasizes that the absence of units is not optional in standards mode. Therefore, IE10 and later versions ignore rules with unitless lengths.

Conclusion

The fallback behavior for unitless CSS attributes is subject to browser-specific implementations and may vary depending on the rendering mode. While standards mode dictates the rejection of unitless lengths, quirks mode introduces inconsistencies. Developers should be aware of these behaviors to ensure cross-browser compatibility.

The above is the detailed content of What is the Fallback Behavior for Unitless CSS Attributes?. For more information, please follow other related articles on the PHP Chinese website!