Using modernizer to detect webp support in browser

Question

not sure where I'm going wrong here, but it seems straight forward. I'm trying to detect webp support.

So I have gone to the modernizer site and checked the webp options then downloaded the script.

I have added the script using wordpress functions file, and confirmed it is loading on front end.

Then after the script loads I use the following code to detect if webp is supported:

/*
*   Check webp support
*/
if (Modernizr.webp) {
    alert('webp supported');
} else {
    alert('webp not supported');
}

Alas, I get no alert message.

There is no error messages in the dev tools console either.

Anyone know whats up.

Cheers

score 6 · Accepted Answer · answered Sep 05 '17 at 04:39

6

Modernizr.on('webp', function (result) {
  if (result) {
    // Has WebP support
  }
  else {
    // No WebP support
  }
});

answered Sep 05 '17 at 04:39

Vaibhav N Naik

`Modernizr.on is not a function` where did you get this syntax from? – Bamieh Sep 05 '17 at 04:41
1

http://www.stucox.com/blog/using-webp-with-modernizr/ It is in modernizr v3 – Vaibhav N Naik Sep 05 '17 at 05:21

score 0 · Answer 2 · answered Sep 05 '17 at 04:39

0

Its working just fine, here is a working snippet:

/*
  Check webp support
 */

if (Modernizr.webp) {
    console.log('webp supported');
} else {
    console.log('webp not supported');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

answered Sep 05 '17 at 04:39

Bamieh

Hi Ahmad, It must have been some kind of caching issue, cleared cache and It kind of works. but I know firefox doesn't support webp, yet this runs `console.log('webp supported');` – Web Dev Guy Sep 05 '17 at 04:45
i was reading about a bug that was fixed in version `3`, my snippet uses `2.8.3`. maybe thats the issue. firefox is planning to support webp check here: https://bugzilla.mozilla.org/show_bug.cgi?id=1294490 so maybe you have it turned on? check on that aswell. – Bamieh Sep 05 '17 at 04:52
Changed to `2.8.3` but it's still not working right. I have firefox version `55.0.3` – Web Dev Guy Sep 05 '17 at 05:01

2 Answers2