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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console