Несмотря на то, что все говорят о возможностях HTML5, такой элементарный элемент дизайна сайта как прелоадер с прозрачностью до сих пор приходится делать с использование Animated GIF. Использование 8-битного анимированного GIF не даёт возможности реализовывать полупрозрачные переходы. В качестве современной альтернативы анимированному GIF можно было бы предположить два конкурирующих формата — MNG и APNG, но MNG не имеет и скорее всего уже никогда не получит нативной поддержки со стороны браузеров, а формат APNG мы уже можем использовать в Firefox и Opera ещё со второй половины 2008 года. К сожалению, Chrome, Safari и Internet Explorer, остались в стороне, для них по прежнему придется использовать угловатые картинки в старом формате GIF. Тем не менее, сегодня у нас есть такая замечательная штука как Modernizr — инструмент перехода к практике определения возможностей браузера, вместо использования порочной практики определения наименования и версии браузера.
После нахождения небольшого кусочка javascript-кода определяющего поддержку APNG, мне как-то сразу захотелось прикрутить его к Modernizr, благо у последнего для этого есть специальное простое API:
В зависимости от того поддерживает ли браузер APNG или нет, у тега
Программами, не понимающими анимацию, APNG отображается как статичный PNG.
За эту информацию спасибо моему коллеге SeVit`у.
Собственно сам 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`у.