Support for :placeholder-shown

[tkrotoff]

Autoprefixer does not currently "translate" :placeholder-shown

(I'm NOT talking about ::placeholder which is a different thing and already supported)

• https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown#Browser_compatibility
• https://caniuse.com/#feat=css-placeholder-shown
• https://dev.to/thesheebs/comment/aog1

Example 1:

input:placeholder-shown {
  border-color: silver;
}

/* IE >= 10 */
input:-ms-input-placeholder {
  border-color: silver;
}

/* Firefox 4 -> 50 included */
/* After performing some tests, this does not work */
input:-moz-placeholder {
  border-color: silver;
}

Example 2:

input:not(:placeholder-shown) {
  background-color: red;
}

/* IE >= 10 */
input:not(:-ms-input-placeholder) {
  background-color: red;
}

/* Firefox 4 -> 50 included */
/* After performing some tests, this does not work */
input:not(:-moz-placeholder) {
  background-color: red;
}

[Dan503]

:placeholder-shown is a different thing to ::placeholder though.

:placeholder-shown is a method for targeting an input only when the place holder text is visible.

::placeholder is a method for styling the actual placeholder text.

:-ms-input-placeholder and :-moz-placeholder are equivalent to ::placeholder not :placeholder-shown.

[tkrotoff]

:placeholder-shown is a different thing to ::placeholder though.

Sorry, I wanted to write "I'm NOT talking about ::placeholder". Just a typo.

:-ms-input-placeholder and :-moz-placeholder are equivalent to ::placeholder not :placeholder-shown.

No.

:placeholder-shown should also be translated to :-ms-input-placeholder for IE.

It's written here https://caniuse.com/#feat=css-placeholder-shown:

Partial support in Firefox refers to using the non-standard :-moz-placeholder name rather than :placeholder-shown.

Partial support in IE refers to using the non-standard :-ms-input-placeholder name rather than :placeholder-shown.

It's also written here https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown#Browser_compatibility:

[IE >= 10] Uses the non-standard name: :-ms-input-placeholder

[Firefox 4 - 51] Uses the non-standard name: :-moz-placeholder

That's how it was done at the time: :-ms-input-placeholder has 2 meanings - can be used for 2 different things - (I guess that's why we now have : vs ::) and it works fine as you can see here: https://codepen.io/tkrotoff/pen/JjYBaNR

@ai This issue should not be closed.

[ai]

“Partial support” is too hacky for Autoprefixer. It is not exact same meaning just with a prefix, but a different selector, which can be used to do the same work.

[Dan503]

Actually I'm going to side with @tkrotoff here.

His demo proves that it acts the same way so I was wrong about that.

“Partial support” is too hacky for Autoprefixer.

It is only partial support because it uses a non-standard prefix rather than the standardised :placeholder-shown value.

Partial support in x refers to using the non-standard y name rather than :placeholder-shown.

Isn't that the whole reason why Autoprefixer exists? To add prefixes for things that don't support the standard name but do support a non-standard prefix name?

[ai]

Am I right that :-moz-placeholder and :-ms-input-placeholder are prefixed versions of :placeholder, which just can be used to do similar with ::placeholder-shown stuff?

[Dan503]

Based on the demo @tkrotoff posted, :-moz-placeholder and :-ms-input-placeholder seem to be much closer to :placeholder-shown than ::placeholder.

They appear to apply styling to the input only when the placeholder is visible.

[ai]

Do they appear to the while input or to the placeholder text? Can I change border there?

[tkrotoff]

I've played with https://codepen.io/tkrotoff/pen/JjYBaNR IE 9, 10, 11 and Firefox 50 in a VM.

Conclusions:

IE 10 & IE 11 => OK

:-ms-input-placeholder works as a perfect replacement of :placeholder-shown: you can override the input background, border, width, height... :not(:-ms-input-placeholder) works too.

Firefox 50 => KO

Contrary to earlier belief and documentation :-moz-placeholder DOES NOT work as a replacement of :placeholder-shown :-/

[ai]

Released at 9.8.