Skip to content

Instantly share code, notes, and snippets.

@janhohner
janhohner / four-times-five.scss
Last active February 19, 2021 01:40
WebP support detection with @supports and @media
.tile {
background: url(tile.png);
/* Chrome 66+, Edge 79+, Opera 53+, Android Brower 80+ */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
@supports (background-image: -webkit-image-set(url('tile.webp') 1x)) {
background: -webkit-image-set(url('tile.webp') 1x);
}
}

Keybase proof

I hereby claim:

  • I am janhohner on github.
  • I am janhohner (https://keybase.io/janhohner) on keybase.
  • I have a public key whose fingerprint is CA0D 71B4 F562 19E2 CE99 534F E68D 4854 9003 A449

To claim this, I am signing this object: