Re: Proposal for image placeholder

On Sat, Jan 18, 2014 at 6:16 AM, Andrew Fedoniouk <news@terrainformatica.com>
wrote:
>
> I've found that there is a need for two state flags (a.k.a.
pseudo-classes)
> in practice:
>   :busy - element (e.g. img, object, frame, etc.) is loading its data -
has
>              pending data delivery requests
>   :incomplete - data delivery request has failed, e.g. no image on that
URL.
>
> Having these we can define the following:
>
> img:busy { background-image: url(that-spinning-thing.gif); }
> img:incomplete:not(:busy) : { background-image:
url(no-image-placeholder.gif); }


"placeholder" sounds me more likely than "busy", since :placeholder already
known feature used for form elements. Just on this case - add "placeholder"
support also for images.

I think property has better maintainability than pseudo-element. Think
about .foo:nth-of-type(2):before:placeholder:hover and .foo:nth-of-type(2):
placeholder:before:hover. It could have too big complexibility and too much
bugs.

In case if we decide to use strict property set for "placeholder" like
"background"
style set, then it is more likely to apply it as a property.
If decided to cover all CSS spec customization for image "placeholder",
then apply it as a pseudo-element, but I would not suggest that.

I prefer to apply only "background" style sets for "placeholder" and use it
as a CSS property. Make it simple.


Maybe offer also HTML attribute (for <img>, <svg>) and apply it as
placeholder-image?
Andrew mentioned ":incomplete" has also use case. I would call it as
"placeholder-failed" property.


Binyamin