Skip to content

Instantly share code, notes, and snippets.

@janhohner
Last active February 19, 2021 01:40
Show Gist options
  • Save janhohner/6ef5a08e16a9a6ad49ab9b9ae946b11e to your computer and use it in GitHub Desktop.
Save janhohner/6ef5a08e16a9a6ad49ab9b9ae946b11e to your computer and use it in GitHub Desktop.
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);
}
}
/* FF 66+ */
@supports (flex-basis: max-content) and (-moz-appearance: meterbar) {
background: url(tile.webp);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment