What's the expected behavior of an empty CSS declaration?

Question

For example:

.foo { font-family: ; font-size: ; }

I'm seeing different behaviors in IE9 and Chrome. IE9 seems to use this to zero out those attributes (although, this behavior isn't being consistent across different pages for me at the moment).

In Chrome, it seems to simply ignore it.

What is the true expected behavior? Is that even valid CSS?

Answer 1

That is invalid CSS.

Browsers are supposed to ignore declarations without values (and only each declaration, not the entire block or everything after an invalid declaration). From the spec (irrelevant code examples omitted):

• Malformed declarations. User agents must handle unexpected tokens encountered while parsing a declaration by reading until the end of the declaration, while observing the rules for matching pairs of (), [], {}, "", and '', and correctly handling escapes. For example, a malformed declaration may be missing a property, colon (:) or value. The following are all equivalent:

  p { color:green }
  p { color:green; color: } /* malformed declaration missing value */
  p { color:red;   color:; color:green } /* same with expected recovery */