Updated: Comment #44
The W3C published a working draft of the picture element February 26, 2013. Work is ongoing to finalize the specification of the picture element.
Yoav Weiss built a partial implementation of the picture element for the Chromium browser. A number of browser developers are meeting in Paris September 10, 2013 to discuss srcset, picture and client hints to decide how to move forward. Hopefully this will help push towards browser implementations of the picture element.
Until that time, however, the picture element doesn't actually function in most browsers. So, because the picture element might still change, the recommended approach is to use a polyfill that uses span elements rather than directly placing picture and source elements into HTML. If sites use picture and source elements, then potential changes to the specification could break those sites. Span elements, being more generic, are a better option for something to polyfill.
If and when picture is standardized it should be a simple fix to switch picture and source elements back into core. Whether or not that breaks sites depends on how themers/front-end developers use CSS to target those span elements.
There are a couple potential options to polyfill picture when using span elements.
- Create our own custom version of picturefill.js to address a few issues specific to Drupal.
- Use the weblinc picture polyfill.
This project has some performance benefits, primarily because it can use a faster matchmedia polyfill called media-match.js. match-media.js is 100x faster matchMedia.js.
Right now, Drupal uses MatchMedia.js in core: it would be redundant to have two polyfills for matchMedia.
However, Weblinc removed their dependency on media-match.js (which is where many of the performance improvements are), allowing us to use the custom MatchMedia.js polyfill that is already in Drupal core. That custom polyfill needed some performance improvements with caching. MatchMedia.js has had some recent improvements to performance as well.
Previously the weblinc approach did not support srcset: the latest version now does. However it still does not support width and height attributes on source elements to prevent reflow.
What this boils down to is we have options here. We can use the Weblinc version with MatchMedia.js (hopefully with some more important performance improvements). Also, we still have time to switch out the matchmedia polyfill in drupal core to use media-match.js to take advantage of its performance improvements.
The current focus is on an adapted version of the span branch of picturefill.js.
There are a number of reasons to use our custom version of picturefill:
- JS performance improvements suggested by [nod_] as noted in #7 and patched in #10.
- Title was missing. To stay as close as possible to img, we added it, see https://github.com/ResponsiveImagesCG/picture-element/issues/51. (Please note that Marco Caceres noted that Title is listed as a global attribute, so he didn't feel that needed to be specifically added).
- Width and height attributes are added to source elements to avoid reflow. See https://github.com/ResponsiveImagesCG/picture-element/issues/50. The RICG has not yet implemented this change, which means that our code output might perform better, but also might not match the developing specification.
- Use of querySelectorAll, to improve speed. This is a Drupal decision, since we no longer support IE8
- domready to be inline with other Drupal 8 js. This is Drupal specific and not part of the polyfill
So there are a number of solid reasons why we would want to use this custom polyfill versus some of the other polyfills available from external sources.
The patch in #34 appears to be ready to go.
There are a couple of potential improvements that can be made down the road.
adds a feature that allows output of empty image sources for certain media queries. Primarily, this would allow removal of extraneous images on small screens as a performance improvement.
would improve the performance of matchmedia through caching and would thus improve the speed of this polyfill.
However neither of those changes should block this from moving forward.
As per the comment in #48, it does look like the picture element will eventually be finalized and implemented in browsers. Once picture and source are natively implemented in browsers, using those elements (rather than polyfill-based spans) will eventually provide faster performance. A polyfill would still be needed to support older browsers without picture/source support. However, it's questionable whether picture/source will be at that point by the time Drupal 8 is ready for release.
Essentially if we don't implement this patch and Drupal 8 sites output picture and source elements in the HTML output, then those sites could break if the definition of picture and source change.
If instead we switch to the span output, as this patch does, then we can still switch back to picture and source once they are finalized. If themes are targeting span elements, however, their CSS might need to be updated to instead target picture and source instead once that change is implemented, either prior to 8.0 or for a future feature release, such as 8.1.
User interface changes
Drupal 7 patch that allows output of empty image source using base 64 image data
Drupal 8 patch that would allow same feature. Patch currently fails testing.
Patch to improve the performance of matchmedia through caching. Patch needs review.
Original report by [attiks]
Depending on the progress of http://responsiveimages.org/ and the adaptation by browser builders, we might need to change the picture polyfill and replace it by a div/span based polyfill.
Possible candidates are now implemented in the Drupal 7 version of the picture module:
- an adapted version of https://github.com/Wilto/picturefill-proposal/tree/div-markup
- an alternative implementation from https://github.com/weblinc/picture, but this depends on an alternative implementation of matchmedia The good thing about this one is it performance, as can be seen at http://jsperf.com/matchmedia/11 and http://jsfiddle.net/wV9HZ/2/ but it will mean we need to change
|PASSED: [[SimpleTest]]: [MySQL] 57,854 pass(es). |
[ View ]
|PASSED: [[SimpleTest]]: [MySQL] 57,834 pass(es). |
[ View ]