We attach the definition of support format APNG to Modernizr

Despite the fact that everyone is talking about the possibilities of HTML5, such an elementary element of site design as a preloader with transparency still has to be done with the use of Animated GIF. Using 8-bit animated GIF makes it impossible to implement semi-transparent transitions. As a modern alternative to animated GIF, two competing formats could be assumed - MNG and APNG , but MNG does not and most likely will never receive native support from browsers, and we can already use the APNG format in the second half 2008 Unfortunately, Chrome, Safari and Internet Explorer were left out, for them still have to use angular images in the old GIF format. Nevertheless, today we have such a wonderful thing as Modernizr - a tool to move to the practice of determining browser capabilities, instead of using the vicious practice of determining the name and version of the browser .

Actually APNG Modernizr Test

After finding a small piece of javascript code defining APNG support, I somehow immediately wanted to tie it to Modernizr, since the latter has a special simple API for it :
')

/** * APNG Modernizr Test Workaround */ (function(){ var testImage = new Image(); var canvasContext = document.createElement('canvas').getContext('2d'); var isApngSupported = false; testImage.onload = function () { canvasContext.drawImage(testImage, 0, 0); isApngSupported = canvasContext.getImageData(0, 0, 1, 1).data[3] === 0; if (typeof isApngSupported !== "boolean") { var isApngSupported = false; } Modernizr.addTest('apng', function() { return isApngSupported; }); }; testImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg=="; })(); 

Depending on whether the browser supports APNG or not, an additional class apng or no-apng will appear on the html tag. From CSS, we can use it like this:

 .no-apng .preloader { background-image: url(some.gif); } .apng .preloader { background-image: url(some.png); } 

For programs that do not understand animation, APNG is displayed as a static PNG.

For this information, thanks to my colleague SeVit`s .