CSS content property in Firefox

Comments
Bookmark and Share

Here’s something I discovered today: the CSS content property can’t be applied to arbitrary elements in Firefox.

Actually, what I probably should have been surprised to discover is that it can be applied to arbitrary elements in Konqueror. This is pretty useful in my case, namely for creating the “blog” text that appears with the blue/black background at the top-left corner of each post, but it doesn’t make a whole lot of sense in general. Normally the content of an HTML element is determined from the HTML page itself, and if the browser allows the content to also be set by the CSS, how do you resolve the conflict? If you use the content from the CSS, then you’re ignoring a chunk of the HTML source document, which doesn’t make sense, and if you use the content from the HTML, then you’re ignoring the CSS property, which means it might as well not be there. (As you might have guessed, Konqueror takes the former approach and Firefox takes the latter)

The obvious question now is, what’s the proper behavior? I checked out the CSS 2.1 standard and in section 12.2 I find this:

‘content’
Value:normal | none | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial:normal
Applies to::before and :after pseudo-elements
Inherited:no
Percentages:N/A
Media:all
Computed value:On elements, always computes to ‘normal’. On :before and :after, if ‘normal’ is specified, computes to ‘none’. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
“Applies to :before and :after pseudo-elements” is the key phrase, meaning that content can’t be specified on an arbitrary element in valid CSS. So what’s this about “On elements, always computes to ‘normal’“? Every property must exist on every element, according to section 1.4.2.3, even if it can’t be specified in a stylesheet for that element. So even though you can’t write

div.whatever  {content: "blah"}

in a stylesheet, the div still has a CSS content property with some value, whatever that may be.

Anyway, as much as I like Konqueror, I have to admit it’s wrong on this one. Actually, I’m not too surprised… my reasons for liking Konqueror have nothing to do with its accuracy in implementing standards. Despite the fact that it passed the Acid2 test before Firefox, I still consider FF the closest thing I have to a reference implementation of how a browser is supposed to behave.