Re: Styling HTML placeholder attribute

FWIW, I'm not necessarily advocating that placeholders should
be transition-able, I was merely pointing out a possible reason in favor of
pseudo-elements other that just opacity.

Lea, building off your example, here was the point I was trying to make
about the differences with transitions between pseudo classes vs elements.

Firefox version w/ pseudo-class (notice when you delete text the transition
is messed up)
http://dabblet.com/gist/4616098

Webkit version w/ pseudo-element (this is much nicer and more intuitive IMO)
http://dabblet.com/gist/4616106

And Sylvain, I agree 100% that mimicking the exact behavior of popular
jQuery plug-ins should not be a design goal. It was just an example.


On Wed, Jan 23, 2013 at 3:43 PM, Lea Verou <lea@w3.org> wrote:

> Ah, I see, if you set input:placeholder { transition: .2s color; } then
> you'd only get a transition only when the placeholder shows and not when it
> disappears, which is far more common. Is that it?
> If so,
> a) Is it that significant?
> b) It could be solved via a CSS animation, especially if we introduce
> something like color-opacity. That however will be problematic when the
> user changes the effect, they'd have to overwrite the animation too. :(
>
>
> Lea Verou
> W3C developer relations
> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou
>
>
>
>
>
>
> On Jan 24, 2013, at 01:35, Philip Walton wrote:
>
> Sorry if I wasn't clear. I was implying that the transition effect
> wouldn't be possible unless it were a pseudo-element.
>
> But I do take your point that a downside of allowing users to set
> transitions is it also allows them to set anything they want (including
> borders and backgrounds like in your example).
>
>
> On Wed, Jan 23, 2013 at 3:24 PM, Lea Verou <lea@w3.org> wrote:
>
>> AFAIK, that’s how most browsers implement placeholders today (UX-wise),
>> and it has nothing to do with whether they use pseudo-classes or
>> pseudo-elements.
>> Why can't that styling be done in CSS? It’s just a color change. Yes,
>> it's easier with opacity because it keeps the same color, but that only
>> holds true for today and it's not a placeholder-specific problem, as I
>> detailed in my previous email.
>>
>> Another thing: Using a pseudo-element has serious problems when padding
>> is involved [1]. Most inputs in real-life websites have padding > 0.
>> Setting a different background or border for the placeholder state is a
>> reasonable use case and shouldn't be this hard to do properly.
>>
>> IMO, using a pseudo-element & opacity for this looks like a hack trying
>> to circumvent a limitation of the language (setting the color alpha
>> individually) that should probably be addressed directly. I've read the
>> entire thread carefully and I didn't see any other argument for using a
>> pseudo-element besides that.
>>
>> [1]: http://dabblet.com/gist/4615583
>>
>> Lea Verou
>> W3C developer relations
>> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou
>>
>>
>>
>>
>>
>>
>> On Jan 24, 2013, at 00:47, Philip Walton wrote:
>>
>>
>> On Wed, Jan 23, 2013 at 2:24 PM, Lea Verou <lea@w3.org> wrote:
>>
>> 2) Is there any other use case for a pseudoelement apart from opacity? I
>>> can't see any, but my imagination might be limited. :)
>>
>>
>> Before most browsers supported placeholders, it was pretty common to see
>> jQuery plugins polyfill this behavior. A common effect was to have the
>> placeholder start at a gray color, fade out when you focused on the
>> element, and then disappear completely as soon as you typed a single
>> character.
>>
>> This would be impossible to achieve in pure CSS unless the placeholder
>> were a pseudo-element.
>>
>> Here's a demo plugin that's pretty similar to what I used to see a lot:
>> http://jsfiddle.net/6HQWv/
>>
>>
>>
>
>