W3C home > Mailing lists > Public > www-style@w3.org > April 2016

Re: [mediaqueries] Queries for image support

From: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
Date: Thu, 21 Apr 2016 10:32:55 +0100
Message-ID: <CAFDDJ7xet6c+b633At=jn37xO9jXX68TvTXJtVtmuMAnvb0Zgg@mail.gmail.com>
To: Florian Rivoal <florian@rivoal.net>
Cc: "www-style@w3.org list" <www-style@w3.org>
Interesting, idea.  Would be fun to generalize a :for(selector)
pseudo-class for styling form element labels.  Eg label:for(:required)

But doesn't address the too-common case where the image icon that failed to
load is a CSS background image or generated content image.

On 21 April 2016 at 10:03, Florian Rivoal <florian@rivoal.net> wrote:

>
> > On Apr 21, 2016, at 15:31, Amelia Bellamy-Royds <
> amelia.bellamy.royds@gmail.com> wrote:
> >
> > For this kind of use cases, especially the first one, I think a pseudo
> class that matches on images that fail to load would be easier to use than
> a media query.
> >
> > An element pseudoclass does have the benefit of applying to broken links
> as well as no-image settings.  Mozilla already has a prefixed pseudoclass
> for this case.  However, it puts constraints on which *other* elements you
> can effect with the selector (needs to be a direct sibling after the
> missing image in the DOM tree).  This limits the use for doing things like
> un-hiding text labels and captions.  Still better than nothing, of course.
>
> Right. Maybe we could make something along these lines to work, and it
> would solve the problem:
>
> <style>
>   label[for] { display: none; }
>   image:failed-to-load { display: none; }
>   label:for(image:failed-to-load) { display: block; }
> </style>
> <label for="foo">This is my nice image</label>
> <img src="....." alt="...." id="foo">
>
>
Received on Thursday, 21 April 2016 09:33:23 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:38 UTC