Support for picture element?

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

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

I thought it best to finish what I started. :wink:
Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

Hi Albert,

That's my understanding. Little updates here and there.
Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch »

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?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch »

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
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand »

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