Intent to Implement And Ship: :placeholder-shown pseudo class

[Ramya]

Contact emails

ram...@samsung.com

Spec

[1] http://dev.w3.org/csswg/selectors4/#placeholder

Summary

The :placeholder-shown pseudo-class matches an input element that is showing placeholder text. This intent is about implementing and shipping :placeholder-shown pseudo class.

Motivation

Since it is a new supporting additional feature for input placeholder, breaking existing sites is unlikely.

Safari has already implemented this feature behind a flag. ( https://bugs.webkit.org/show_bug.cgi?id=118162)

Firefox having discussions on un-prefixing placeholder-shown pseudo class (https://bugzilla.mozilla.org/show_bug.cgi?id=1069012)

Compatibility Risk

Low

Ongoing technical constraints

None.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

OWP launch tracking bug

https://code.google.com/p/chromium/issues/detail?id=451120

Link to entry on the feature dashboard

https://www.chromestatus.com/features/6404760559157248

Requesting approval to ship?

Yes.

[Rick Byers]

How does this relate to our prefixed -webkit-input-placeholder selector?  Is this effectively just an unprefixing, or does the behavior need to change to match the current spec?

There hasn't been any traffic on the WebKit or Mozilla bugs for quite some time.  Can any CSSWG members chime in on whether this API seems ready to ship (eg. unlikely to change names again)?

Thanks,

   Rick

[Elliott Sprehn]

On Mon, Aug 10, 2015 at 10:59 AM, Rick Byers <rby...@chromium.org> wrote:

How does this relate to our prefixed -webkit-input-placeholder selector?  Is this effectively just an unprefixing, or does the behavior need to change to match the current spec?

They're different things, -webkit-input-placeholder is the pseudo element of the placeholder, it lets you style the placeholder itself. :placeholder-shown lets you style the <input> when the placeholder would be visible, for example changing the background color or border.

See discussion here: https://bugzilla.mozilla.org/show_bug.cgi?id=1069012

I think ::placeholder might currently be stalled, but shipping :placeholder-shown is still useful.

- E

[TAMURA, Kent]

The intention of the specification might be :placeholder-shown affects the placeholder style too.

input {

    color: red;

}

<input placeholder="Zip code">

It shows a red placeholder on IE and Firefox, and a gray placeholder on WebKit/Blink.  If :placeholder-shown suppose the IE/Firefox behavior, the implementation is not so simple in Blink.

Anyway, lgtm to ship it.

--

TAMURA Kent
Software Engineer, Google

[Tab Atkins]

On Mon, Aug 10, 2015 at 4:51 PM, TAMURA, Kent <tk...@chromium.org> wrote:
> The intention of the specification might be :placeholder-shown affects the
> placeholder style too.
>
> input {
> color: red;
> }
> <input placeholder="Zip code">
>
> It shows a red placeholder on IE and Firefox, and a gray placeholder on
> WebKit/Blink. If :placeholder-shown suppose the IE/Firefox behavior, the
> implementation is not so simple in Blink.

This is because of our different implementation details; in WK/Blink,
the placeholder text is actually in a ::placeholder pseudo-element
with some default styles (including text color), so it won't inherit
'color' from the input. FF/IE don't have this; they instead have a
:placeholder pseudo-class on the input (equivalent to the specced
:placeholder-shown).

So don't worry about the difference in behavior; it's not due to this feature.

~TJ

[Elliott Sprehn]

fwiw it shouldn't be too hard for us to implement this new pseudo class and then use that to apply the grey color instead.

- E 

[Rick Byers]

Ok, sounds reasonable to me (and I take Tab's comment as an endorsement that he doesn't have spec-stability concerns here).  LGTM2.

[Philip Jägenstedt]

LGTM3

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.