beta2 FTW! ✌️

Author: fabianmichael

assets/css/imageset.css

@@ -55,7 +55,7 @@
   z-index: 2;
 }
 
-.imageset-js .imageset--ratio.imageset--lazyload .imageset__element {
+.js .imageset--ratio.imageset--lazyload .imageset__element {
   /* The actual image is kept behind the placeholder.
        Rather than fading in the image, the placeholder is
        faded out instead. This prevents the image layer to
@@ -67,16 +67,21 @@
   z-index: 1;
 }
 
-.imageset-js .imageset--alpha.imageset--lazyload .imageset__element {
+.js .imageset--alpha.imageset--lazyload .imageset__element {
   /* Images with transparency require a different fading
        technique, as the placeholder would shine through,
        after the final image was loaded. */
   opacity: 0;
   will-change: opacity;
-  transition: opacity 0.5s;
 }
 
-.imageset-js .imageset--alpha.imageset--lazyload.imageset--loaded .imageset__element {
+@media screen {
+  .js .imageset--alpha.imageset--lazyload .imageset__element {
+    transition: opacity 0.5s;
+  }
+}
+
+.js .imageset--alpha.imageset--lazyload.imageset--loaded .imageset__element {
   opacity: 1;
   will-change: auto;
 }
@@ -95,13 +100,12 @@
   contain: strict;
 }
 
-.imageset-js .imageset--lazyload .imageset__placeholder {
+.js .imageset--lazyload .imageset__placeholder {
   /* Placeholder will be placed on top of the actual
        image element. This will only be applied, when
        JavaScript is enabled. */
   /* Visibility of placeholder is changed to hidden after
        the transition. */
-  transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
   /* The actual placeholder is in front of the actual
        image, so we don’t have to fade in the image, which
        would lead to artifacts in WebKit- and Blink-based
@@ -117,16 +121,27 @@
   background-color: #efefef;
 }
 
+@media screen {
+  .js .imageset--lazyload .imageset__placeholder {
+    transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
+  }
+}
+
 .imageset--alpha .imageset__placeholder {
   visibility: hidden;
 }
 
-.imageset-js .imageset--alpha .imageset__placeholder {
+.js .imageset--alpha .imageset__placeholder {
   visibility: visible;
-  transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
 }
 
-.imageset-js .imageset--alpha:not(.imageset--placeholder--color) .imageset__placeholder {
+@media screen {
+  .js .imageset--alpha .imageset__placeholder {
+    transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
+  }
+}
+
+.js .imageset--alpha:not(.imageset--placeholder--color) .imageset__placeholder {
   background-color: transparent;
 }
 
@@ -147,7 +162,7 @@
   /* Opera 26+, Chrome */
 }
 
-.imageset-js .imageset--loaded .imageset__placeholder {
+.js .imageset--loaded .imageset__placeholder {
   /* After image is loaded, the placeholder will fade out
        and then change visibility to allow mouse interation
        with the loaded image in browsers, where the