Autoprefixer: Support for ::input-placeholder

[kossnocorp]

From "Change an input's HTML5 placeholder color with CSS":

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

I tried different variations (::input-placeholder, ::placeholder) but seems like it doesn't supports by _autoprefixer_.

Thanks.

[ai]

There is no Can I Use source :(. Is there any source, where we can get actual data about browsers versions and prefixes?

[enemycnt]

Shall you hardcode it for a while, maybe?

[ai]

@enemycnt it is possible, but anyway I need some page to understand where support was started and what we need right now.

[kossnocorp]

@ai I think it's reasonable to contact with people behind "Can I Use".

[kossnocorp]

And yeah, having support for this feature in any way will be good thing.

[ai]

Can I Use just has https://github.com/Fyrd/caniuse

Anyway I can hardcore browsers list, but I need some documentation from browsers to proof, that thay now need prefixes.

[enemycnt]

I think there is other way of solving this issue. You can implement experimental function like it was in compass.
It can be very helpful with new bleeding edge properties.

[ai]

In #51 just send pull request to Can I Use :)

[ai]

But laso we have a question: what is unprefixed variant we need to use?

[kizu]

People in csswg are talking only about placeholder, so it should be this one for the current ones. However, there is still an issue on what to use: pseudo-class or pseudo-element. So, I'd say, all of those should become the prefixed variants (and the unprefixed one should be removed from the result, 'cause it is not used anywhere): ':placeholder', '::placeholder', ':input-placeholder', '::input-placeholder' — any of those should be usable until csswg comes with a solution.

[ai]

Done 3c267887712c78cb42149a85f7e9a45065780370

Now I support only ::placeholder.

This issue will be open, until I don’t decide about another non-prefix form and I don’t send pull request.

[ai]

@kizu CSSWG doesn’t use ::input-placeholder and :input-placeholder as a variant in CSSWG. Also in another doc only ::placeholder is used.

[ai]

@kizu but not all user, known what is unprefixed form. But if we use all forms, we need some way to remove this old legacy code. Maybe warning in next major release and error on after-next?

[ai]

Pull request to Can I Use: https://github.com/Fyrd/caniuse/pull/272

[ai]

OK, I next release I will support only ::placeholder, but if some users will complain, I add anothers unprefixed versions.

[ai]

Released in 0.7

[thomaswelton]

but if some users will complain, I add anothers unprefixed versions.

@ai This isn't really a complaint. However it doesn't seem to work for something like this

.form-control::placeholder{}

Only these work

::placeholder{}
.form-group ::placeholder{}

[ai]

@thomaswelton Interactive dome shows that this code

.form-control::placeholder {
}

will be executed to

.form-control::-webkit-input-placeholder {
}
.form-control::-moz-placeholder {
}
.form-control:-ms-input-placeholder {
}
.form-control::placeholder {
}

[thomaswelton]

Ahh ok, tried the demo and can see that it does work.
The real bug then is this. Bootstrap uses a mixin that already browser prefixes the placeholder on .form-control

Outside of bootstrap I want to make some modifications. So the code that is being run through autoprefixer it this

.form-control::-moz-placeholder {
  color: #018856;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #018856;
}
.form-control::-webkit-input-placeholder {
  color: #018856;
}
.form-control::placeholder {
  font-weight: 500;
}

So it appears than because some prefixed placeholder styles are already present on the .form-control it is not parsing the section containing the font-weight.
I can replicate this bug in the interactive demo

[thomaswelton]

Weird. Was gonna comment my code to make it clearer. But is seems when I separate this with CSS comments it works as expected

This fails

.form-control::-moz-placeholder {
  color: #018856;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #018856;
}
.form-control::-webkit-input-placeholder {
  color: #018856;
}
.form-control::placeholder {
  font-weight: 500;
}

This works

/* Bootstrap styles */
.form-control::-moz-placeholder {
  color: #018856;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #018856;
}
.form-control::-webkit-input-placeholder {
  color: #018856;
}
/* My styles */
.form-control::placeholder {
  font-weight: 600;
}

[ai]

Yeap, but without /* My styles */ separator I can’t understand, when your styles ends and start Bootstrap styles :).

[ai]

I understand, that it is a bug, but tink that solution will be too difficult.

[thomaswelton]

Thought you might say that. It's weird that it works as expected with a comment separation though.

[ai]

@thomaswelton ouh, if you interesting I can explain much more deeper :D.

When Autoprefixer adds new prefix, it must check maybe selector is already prefixed. So, when you run Autoprefixer twice (for example, guys in text editor plugins like to run Autoprefixer on already autoprefixed sources) it will not double its prefixes.

So selector prefixer merge unprefixed selector and all prefixed nearby into one block. And then check is block already contains some prefixes.

Without comment, Autoprefixer combine your and Bootstrap styles into one block (because them was near and there is no unprefixed selector in Bootstrap to separate blocks).