Re: [mediaqueries] Queries for image support

> On Apr 21, 2016, at 06:42, Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com> wrote:
> 
> Recently, while browsing the web with image downloads disabled to save data, I was struck by how broken some sites were, despite being coded to current best practices.  Screen reader-accessible text labels (for icon buttons) that were "visually hidden" with CSS were completely inaccessible to me.  If I turned off those styles in the inspector, the site became usable again.  
> 
> Wouldn't it be nice if a media query could restrict those style rules so that they aren't applied for users who don't receive the image icons?
> 
> Other use cases for changing styles based on whether or not images are supported:
> 
> - elegantly styling the alt text for <img>, instead of shoving it into the width and height reserved for the image
> - switching from a figure caption that is normally visible on hover/tap to one that is displayed by default in place of the image
> - changing colors/blending modes when background images won't be displayed
> 
> Given that some browsers / accessibility modes support content images but not background images, the media query could distinguish between support for images in different contexts:
>  • images: none
>  • images: content
>  • images: all (meaning content + stylesheet images)

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.


> A second aspect of image support that it would often be useful to test for in a stylesheet is which *types* of images are supported.  Currently, CSS has no way to test this support: a url() reference in a property value is valid even if the downloaded file type would be unrecognized.  Newer high-compression image formats cannot be safely used with fallbacks to older file types unless you use JS-based support tests.  In contrast, the HTML <picture> element has already demonstrated the implementability of this type of fallback switch.  
> 
> The <source> element for <picture> uses MIME type strings to distinguish image formats.  It's a little verbose, but it adds consistency and extensability:
>  • image-type: image/png
>  • image-type: image/svg+xml
>  • image-type: image/webp
> Maybe the "image/" could be made optional for brevity.

For this use case, it looks like using fallbacks in the <image> production would work as well, but maybe using media queries is still better.

 - Florian

Received on Thursday, 21 April 2016 04:40:48 UTC