APNG形式のサポートの定義をModernizrに固定します

誰もがHTML5の機能について話しているという事実にもかかわらず、アニメーションGIFを使用して、透明性を備えたプリローダーとしてのWebサイトデザインの基本的な要素をまだ行う必要があります。 8ビットのアニメーションGIFを使用すると、半透明のトランジションを実装できなくなります。 アニメーションGIFの最新の代替として、2つの競合する形式-MNGとAPNGを想定できますが、MNGはブラウザーからネイティブサポートを受け取らず、ほとんどの場合、後半からFirefoxおよびOperaでAPNG形式を使用できます2008年。 残念ながら、Chrome、Safari、およびInternet Explorerは省略されており、古いGIF形式の角張った画像を使用する必要があります。 しかし、今日、 Modernizrのような素晴らしいものがあります。これは、ブラウザの名前とバージョンを決定するという悪質な慣行を使用する代わりに、ブラウザの機能を決定する慣行に移行するためのツールです 。

実際にAPNG Modernizr Test自体

APNGのサポートを定義するJavaScriptコードの小さな断片を見つけた後、私は何らかの理由ですぐにそれをModernizrに固定したいと思いました。

/** * 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 `yに感謝します。