Прикручиваем определение поддержки формата APNG к Modernizr

Несмотря на то, что все говорят о возможностях HTML5, такой элементарный элемент дизайна сайта как прелоадер с прозрачностью до сих пор приходится делать с использование Animated GIF. Использование 8-битного анимированного GIF не даёт возможности реализовывать полупрозрачные переходы. В качестве современной альтернативы анимированному GIF можно было бы предположить два конкурирующих формата — MNG и APNG, но MNG не имеет и скорее всего уже никогда не получит нативной поддержки со стороны браузеров, а формат APNG мы уже можем использовать в Firefox и Opera ещё со второй половины 2008 года. К сожалению, Chrome, Safari и Internet Explorer, остались в стороне, для них по прежнему придется использовать угловатые картинки в старом формате GIF. Тем не менее, сегодня у нас есть такая замечательная штука как Modernizr — инструмент перехода к практике определения возможностей браузера, вместо использования порочной практики определения наименования и версии браузера.

Собственно сам APNG Modernizr Test

После нахождения небольшого кусочка javascript-кода определяющего поддержку APNG, мне как-то сразу захотелось прикрутить его к Modernizr, благо у последнего для этого есть специальное простое API:

/**
 * 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==";
})();

В зависимости от того поддерживает ли браузер APNG или нет, у тега html появится дополнительный класс apng или no-apng. Из CSS мы можем это использовать так:

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

Программами, не понимающими анимацию, APNG отображается как статичный PNG.

За эту информацию спасибо моему коллеге SeVit`у.