cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="http://fillmurray.com/3000/2000" media="(min-width: 3000px)" />
  <source srcset="http://fillmurray.com/1920/1080 1x, http://fillmurray.com/3840/2160 2x" media="(min-width: 40em)" />
  <!--[if IE 9]></video><![endif]-->
  <img srcset="http://fillmurray.com/400/300"/>
</picture>
            
          
!
            
              // require Babel const/let transform

// require matchMedia Polyfill
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT license */
window.matchMedia || (window.matchMedia = function() {
    "use strict";

    // For browsers that support matchMedium api such as IE 9 and webkit
    var styleMedia = (window.styleMedia || window.media);

    // For those that don't support matchMedium
    if (!styleMedia) {
        var style       = document.createElement('style'),
            script      = document.getElementsByTagName('script')[0],
            info        = null;

        style.type  = 'text/css';
        style.id    = 'matchmediajs-test';

        if (!script) {
          document.head.appendChild(style);
        } else {
          script.parentNode.insertBefore(style, script);
        }

        // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
        info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;

        styleMedia = {
            matchMedium: function(media) {
                var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';

                // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
                if (style.styleSheet) {
                    style.styleSheet.cssText = text;
                } else {
                    style.textContent = text;
                }

                // Test if media query is true or false
                return info.width === '1px';
            }
        };
    }

    return function(media) {
        return {
            matches: styleMedia.matchMedium(media || 'all'),
            media: media || 'all'
        };
    };
}());

// require NodeList.forEach() polyfill
if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = function(callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}

// MICROPICTUREFILL
if (!window.HTMLPictureElement) {
  document.createElement("picture");

  const pictures = document.querySelectorAll("picture");

  function getBestCandidateFromSrcSet(srcSet) {
    // TODO: Make comma in URL tolerant?
    let srcCandidates = srcSet.split(", ");
    let bestCandidate;

    srcCandidates.forEach(function(srcCandidate) {

      // TODO: Make tolerant of space chars in URL?
      if (srcCandidate.split(" ").length > 1) {
        let dpr = window.devicePixelRatio ? window.devicePixelRatio : 1;
        // Strip out the "x"
        let imgPixelDensity = parseFloat(srcCandidate.split(" ")[1].replace("x", ""));
        if (imgPixelDensity <= dpr) {
          bestCandidate = srcCandidate.split(" ")[0];
        }
      } else {
        // Only one srcset
        bestCandidate = srcCandidate;
      }
    });

    return bestCandidate;
  }

  function evaluatePictures() {
    pictures.forEach(function(picture) {
      let sources = picture.querySelectorAll("source");
      let img = picture.querySelector("img");
      let newSrc;
      let matchMediaFound;


      // Loop through all the sources!
      sources.forEach(function(source) {        
        if (!matchMediaFound && window.matchMedia(source.media).matches ) {
          // Bail out on first match
          matchMediaFound = true;
          
          // Get best candidate for newSrc
          newSrc = getBestCandidateFromSrcSet(source.getAttribute("srcset"));
        
          // Backup src and srcset
          if( img.getAttribute('src') && !img.getAttribute('data-src') ) {
            img.setAttribute('data-src', img.getAttribute('src') )
          }

          if( img.getAttribute('srcset') && !img.getAttribute('data-srcset') ) {
            img.setAttribute('data-srcset', img.getAttribute('srcset') )
          }
        }
      });
      
      // Apply new src flow...
      
      if (!newSrc && img.getAttribute("data-srcset")) {
        // console.log('Reverting to original srcset');
        img.setAttribute("srcset", img.getAttribute("data-srcset"));
        img.removeAttribute("data-srcset");
      }

      if (!newSrc && img.getAttribute("srcset")) {
        // console.log("Parse src from srcset");
        newSrc = getBestCandidateFromSrcSet(img.getAttribute("srcset"));
      }
      
      if (!newSrc && img.getAttribute('data-src')) {
        // console.log("Using original src");
        newSrc = img.getAttribute('data-src');
      }
      
      if( newSrc != img.src ) {
        // console.log("Applying new src");
        img.src = newSrc;
      }
      
      return;
    });
  }

  evaluatePictures();
  window.addEventListener("resize", evaluatePictures, { passive: true });
}

            
          
!
999px
Loading ..................

Console