Question

I just read that you are not allowed to mix values, ex: background-position: top 50%;

However, I am not sure whether the following lines are ambiguous:

background-position: 0 50%; //can the 0 be confused as 0px?
background-position: 0 50px; //can the 0 be confused as 0%?

My concern is that they might cohere in a forbidden way and cause unexpected bugs.

Do you think this can happen and what makes you think that?

Answer 1

You are allowed to combine keywords with percentage values or length values in CSS2.1 … but you weren’t in CSS2 (I mean, CSS 2.0). That should be the source of the confusion.

From W3C CSS2.0 on background-position

Value: [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
(…)
Values have the following meanings:
– <percentage> <percentage> blah
– <length> <length> blah
– top left and left top (and 2 dozens of keyword combinations) blah

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%.
If two values are given, the horizontal position comes first.
Combinations of length and percentage values are allowed, (e.g., ‘50% 2cm’).
Negative positions are allowed.
Keywords cannot be combined with percentage values or length values (all possible combinations are given above).

From W3C CSS2.1 on background-position

Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
(…)
If only one value is specified, the second value is assumed to be ‘center’.
If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position.
Negative <percentage> and <length> values are allowed.

Comparison

If you compare the possible Values in CSS2.0 and CSS2.1, it’s pretty clear you could combine (percentage and length) OR (keywords) and can now combine any of the three types of value with any of the three types (OT: and you’ve been allowed forever to only use 1 value, the second one then being 50%/center).

Bold text and lack of any other indication in CSS2.1 also implies that, when you’ve 2 values, you can have 0, 1 or 2 keywords thus that you can encounter, as a browser, the case where there’s exactly 1 keyword.

From what I recall, I never encountered any problem with IE6+, only with the W3C validator (jigsaw) when it validated against CSS2 by default or something like that.
The CSS validator seems happy with body { background-position : 40cm left; }

CSS2.1 has been a W3C Recommendation for nearly a year (7 june 2011) so that shouldn’t cause new confusion.