Re: Styling HTML placeholder attribute

Aha! Sylvain is right here. The only case where you *don't* get a transition is when you start typing so you transition from input:focus:placeholder to input:focus. But then you don't need a transition, because the text itself changes, so even if there was one, you wouldn’t see it!
This could be a problem with other effects (e.g. changing the background), but not with text color. And I've shown previously why background has more serious problems with the alternative approach. ;)

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou






On Jan 24, 2013, at 02:24, Sylvain Galineau wrote:

> Not sure what you expect from your Firefox example; once a control has focus it should lose its placeholder state as soon as the user types, right? So you’d be transitioning from input:placeholder to input:focus:placeholder until the latter stops matching and then you’re going to something else?
>  
> From: Philip Walton [mailto:philip@philipwalton.com] 
> Sent: Wednesday, January 23, 2013 4:14 PM
> To: Lea Verou
> Cc: Tab Atkins Jr.; Brad Kemper; Sylvain Galineau; Mounir Lamouri; www-style list
> Subject: 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/
>  
>  
>  
>