Support for picture element?

For technical support for all editions of CSS HTML Validator. Includes bug reports.
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Wed Dec 03, 2014 10:19 am

I was just reviewing my post and noticed what I had before was valid, just not what I wanted.

WebP:
min-width:1025px
min-width:1024px (should have been max-width)
max-width:800px
max-width:400px

Jpeg:
min-width:1025px
min-width:1024px (should have been max-width)
max-width:800px
max-width:400px

When implementing <picture> elements, you need to specify the preferred order (webP first in this example since they're more optimized images), then the media sizes for each image type need to be in decreasing order, based on the min-width/max-width.

The browser will use the first image it supports that meets the media query.

In this case, I guess there's nothing CSE could have found wrong with the media queries.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Wed Dec 03, 2014 4:27 pm

Hi Rick,

If the syntax is correct, CSE HTML Validator should allow it. If there are situations where the syntax is correct but CSE HTML Validator can easily detect that it's probably not what the author wants, then I can have CSE HTML Validator throw a warning about it. However, in this case it looks rather difficult to determine if the media attributes make sense or not or if it's what the developer really wanted.
RSteinwand wrote:Also wondering if you check for the image size in srcset (the 1200w in the first image)?
CSE HTML Validator should currently check the syntax, but does not check the actual image dimensions.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Jan 23, 2015 1:27 pm

Firefox v36 (currently beta) finally has support for the picture element.
You have to set both of these to true (simply double click each) in about:config:

dom.image.picture.enabled
dom.image.srcset.enabled

The easiest way is to type about:config in the URL, then in the search box, type: dom.image and press "enter".

Here's the test page I use: http://googlechrome.github.io/samples/picture-element/

Due to FF's screwy implementation, if you change the browser width, you have to reload the page for the image to change (lame!). Chrome will simply download the proper image if the browser size is changed.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Wed May 20, 2015 11:48 am

Firefox 38.01 supports the img srcset and picture by default now. This is the stable version, not the beta.

Previously you had to type "about:config" in the URL and search for "dom.image" and enable picture and srcset by double-clicking on each of them.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Wed May 20, 2015 3:20 pm

Hi Rick,

Thanks for the update!

The compatibility message for the "picture" element has been updated to:
As of May 2015, the "picture" element is considered an experimental HTML 5.1 element and is not currently supported in some of the major browsers. For example, Internet Explorer (including IE11) and Safari do not currently support this element. However, it is supported by default in Chrome 38+, Firefox 38+, and Opera 25+. Visit http://caniuse.com/#search=picture for more information. This message is displayed only once.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Wed May 20, 2015 3:24 pm

I thought it best to finish what I started. :wink:
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Wed Aug 19, 2015 8:38 am

Apparently there's going to be support for the picture element in Edge: https://dev.modern.ie/platform/status/pictureelement/

It's in development now. :shock:
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Sun Sep 20, 2015 9:08 pm

The picture element is now included in Microsoft Edge Insider Preview build 10547. You can track progress at https://dev.modern.ie/platform/status/pictureelement/
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Mon Sep 21, 2015 8:09 am

Thanks for the updates Rick. I assume Microsoft will be regularly updating the Edge browser like Firefox and Chrome are but unlike IE has been upgraded in the past.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Mon Sep 21, 2015 8:15 am

Hi Albert,

That's my understanding. Little updates here and there.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Jan 29, 2016 10:08 am

Hi Albert,

Is the <picture> element mature enough to update this warning? :D
As of May 2015, the "picture" element is considered an experimental HTML 5.1 element and is not currently supported in some of the major browsers. For example, Internet Explorer (including IE11) and Safari do not currently support this element. However, it is supported by default in Chrome 38+, Firefox 38+, and Opera 25+. Visit http://caniuse.com/#search=picture for more information. This message is displayed only once.
Thanks.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Fri Jan 29, 2016 1:49 pm

Hi Rick,

I've updated the warning to:
As of Jan 2016, the "picture" element is considered an experimental HTML 5.1 element and is not currently supported in some of the major browsers. For example, Internet Explorer (including IE11) and Safari (including Safari 9) do not currently support this element. However, it is supported by default in Chrome 38+, Edge 13+, Firefox 38+, and Opera 25+. Visit http://caniuse.com/#search=picture for more information. This message is displayed only once.
Mozilla still says the picture element is experimental:
https://developer.mozilla.org/en-US/doc ... nt/picture

And it looks like IE11 and Safari 9.0, which are current versions (according to http://caniuse.com/#search=picture) say it isn't supported.

So I think the warning message is still applicable. Do you agree?
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Jan 29, 2016 2:15 pm

I wasn't aware it was still experimental. It doesn't surprise me that IE 11 won't get it, since they hide the IE shortcut in Windows 10 and strong-arm everyone into updating to Win 10.

I like the updated message better, esp. since it has Edge in it.

It does degrade nicely in IE11 so no reason to not use it IMHO.

Do you have a date set to convert the message box to html to support colors and links? I think we discussed that within the last year.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3242
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Fri Jan 29, 2016 3:31 pm

I'm not sure how Mozilla makes an experimental determination but I wouldn't be surprised if they consider it experimental until it gets into a final & official recommendation (not a working draft or candidate recommendation), and it seems "picture" is in HTML 5.1 but HTML 5.1 is not final yet.

I could change the message to a non-warning message if you think that is a good idea and it's not worth warning about anymore.

Sorry, I do not have a date set to support a more advanced message box that highlights links. Do you find that this a significant issue in that it significantly detracts from the "enjoyment" of using CSE HTML Validator? Perhaps I should give it higher priority. :D
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 573
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Jan 29, 2016 5:00 pm

You can leave it as your updated version.

Regarding the advanced message box, I noticed you had a link in the message and of course you'd have to copy and paste it in a browser to use it, which is why I mentioned it.

You could bump it up one notch/unit. = )

Maybe you need a poll to determine how to prioritize new features. Maybe not everything on your list is a priority for the majority.
Rick

Post Reply