开发者

Is it okay these days to use PNG with alpha-transparency in websites?

开发者 https://www.devze.com 2023-01-18 23:25 出处:网络
I remember from 3 years ago that it was an absolutely huge pain to use any nice PNG with alpha in websites, because of IE6 and other bad browsers.

I remember from 3 years ago that it was an absolutely huge pain to use any nice PNG with alpha in websites, because of IE6 and other bad browsers.

But how about now? How about if your target audience are iPhone, iPad and iPod Touch users? I believe these people aren't so stupid t开发者_Python百科o use old-aged bad browsers. They use the newest, best stuff they can, and they're tech-savvy and intelligent. Is this an valid assumption? So does this mean I can safely use PNG with alpha to create great websites for my apps without having to worry about uglyness?


Yes it's absolutely fine to use PNG's with Alpha Transparency. It actually always has been, you just had to fix IE6 with filters.

So go ahead and use them :)


When I have to use alpha-transparent PNGs, I like to handle older browsers with DD_belantedPNG.

Then you can set up an IE conditional to call the PNG fix on the specific elements you need.

    <!--[if IE 6]>
        <script type="text/javascript" src="/lib/js/DD_belatedPNG-min.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('#Logo a img');
        </script>
    <![endif]--> 

You probably want to avoid blanket PNG fixes that apply to all PNGs on the page.

Remember, if you don't need the alpha-transparency 8-bit PNGs will work everywhere.


There are several JS libraries that will add support for transparent PNGs in IE6. I use pngfix.js: http://jquery.andreaseberhard.de/pngFix/

There is also a standalone version of that plugin if you aren't using jQuery.


The only pain is IE6 but since that isnt rly supported anymore (or atleast, when u open IE you get a popup to move to edge) its not a problem.

If you rly rly wanted to support IE6 then you could use an npm package named dd_belatedpng: https://www.npmjs.com/package/dd_belatedpng

0

精彩评论

暂无评论...
验证码 换一张
取 消