Page MenuHomePhabricator

-webkit-input-placeholder css throws error in Firefox
Closed, DeclinedPublic

Description

Reported by Barkingfish:

Some version of Firefox is throwing the following error when using Vector:

Error: Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'. Ruleset ignored due to bad selector.

Source File: http://bits.wikimedia.org/skins-1.5/vector/main-ltr.css?283t
Line: 368

Selector from that line: "input::-webkit-input-placeholder"


Version: unspecified
Severity: minor

Details

Reference
bz25279

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:15 PM
bzimport set Reference to bz25279.

Do we care about css warnings? The browsers ignore invalid css in a very well defined way afaik, so I don't really see the issue as long as we don't assume all browsers will support the rule with the webkit propriety selector.

isn't it just the double : that it is tripping over ?

div#simpleSearch input::-webkit-input-placeholder {

Assigning to Adam, since he was r69482 committer.

(In reply to comment #3)

isn't it just the double : that it is tripping over ?

div#simpleSearch input::-webkit-input-placeholder {

Double :: is correct in this case I'm pretty sure. I believe double colon is for pseudo-elements (ex ::first-child), where single colon is for pseudo-selectors (ex :hover). (or maybe i have that reversed). Firefox will report a warning for any css it doesn't recognize. Most commonly you see IE hacks showing up there for things like zoom: 1.

As a side note, doesn't browser specific css go in its own file usually (IEfixes.css, etc).

You can hide webkit-only CSS from other browsers using:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

or, as suggested above, put it in a separate css file.

"The double colon replaced the single-colon selectors for pseudo-elements in CSS3 to make an explicit distinction between pseudo-classes and pseudo-elements. For backward compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So, :after is a pseudo-class and ::after is a pseudo-element."
http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

It seems this is recognized by Firefox just fine.

The problem is the vendor specific notation of the pseudo element. I think that Firefox does not yet understand this concept.

http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html
The CSS 2.1 spec says that "Keywords and property names, beginning with '-' or '_' are reserved for vendor-specific extensions." The problem is probably wether or not this was ever intended to also extend towards vendor specific pseudo elements. The later remark "Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not." seems to indicate that such is at least allowed.

Thus this is a bug in Firefox, which should generate a warning here, not an error. And as a matter of fact in Firefox/3.6.10 it actually is a warning.

I see no reason to fix this, vendor specific css (as opposed to vendor-specific hacks) is just fine with me personally. If we have crashing browsers because of this, then we might have to reconsider, but I vote WONTFIX.

Thus this is a bug in Firefox, which should generate a warning here, not an
error. And as a matter of fact in Firefox/3.6.10 it actually is a warning.

As far as I am aware, all css errors on firefox are considered 'warnings'.

I see no reason to fix this, vendor specific css (as opposed to vendor-specific
hacks) is just fine with me personally. If we have crashing browsers because of
this, then we might have to reconsider, but I vote WONTFIX.

+1

(In reply to comment #8)

Thus this is a bug in Firefox, which should generate a warning here, not an
error. And as a matter of fact in Firefox/3.6.10 it actually is a warning.

As far as I am aware, all css errors on firefox are considered 'warnings'.

Apparently not in the original report: "Error: Unknown pseudo-class or pseudo-element "

Closing as current versions of Firefox report this as a Warning.