نمایش صحیح تصاویر شفاف PNG در اینترنت اکسپلورر نسخه 6

اکثر مرورگرهای مدرن امروزی از جمله فایرفاکس و سافاری تصاویر شفاف با فرمت PNG را بصورت صحیح و بدون مشکل رندر می کنند و نیازی به استفاده از روش های CSS Hacks ندارند، اما تا زمان ارایه Internet Explorer نسخه 7 مرورگرهای نسخه ی پایین تر IE بدرستی تصاویر Transparency PNG را که زمینه آن ها بصورت شفاف و به عبارتی بصورت شیشه ایی هستند را پشتیبانی نمی کنند. ممکن است بپرسید که آیا هنوز کسی از اینترنت اکسپلورر نسخه 6 یا پایین تر استفاده می کند؟ اگر نگاهی به آمار بازدیدکننده های وب سایت تان بیاندازید عده ایی هنوز هستند! بنظر می رسد طراحی Cross-Browser بودن سایت و سنجیدن جوانب مختلف یکی از مشخصه های کار حرفه ایی طراحان وب امروزی می باشد.

روش های مختلفی برای نمایش صحیح تصاویر شفاف PNG در اینترنت اکسپلورر نسخه 6 وجود دارند از جمله اسکریپت IE5.5+ PNG Alpha Fix1، اسکریپت SuperSleight و استفاده از روش توضیح داده شده در ntlworld2
از زمان انتشار اینترنت اکسپلورر 5.5 خصوصیتی ارایه شد بنام AlphaImageLoader که نوعی filter می باشد که می توان بصورت مستقیم در CSS یا جاوااسکریپت برای تگ های img تعریف کرد ( چه بصورت inline و چه بصورت background ).
یکی از مشکلات اساسی استفاده از این روش آنست که چون خصوصیت filter در CSS بوسیله کنسرسیوم جهانی وب W3C تعریف نشده است در نتیجه هنگام اعتبار سنجی ( Validation ) کد CSS نمی توان آنرا pass کرد و در نتیجه کد CSS معتبر شناخته نمی شود.

برای حل این مشکل می توان از اسکریپتی تحت عنوان Unit PNG Fix3 استفاده کرد، که از مشخصات بارز آن علاوه بر حل مشکل اعتبار سنجی کد CSS و نمایش صحیح تصویر شفاف PNG می توان به کم حجم بودن (کمتر از یک کیلوبایت)، اعمال به تگ img و خصوصیت background-image، فراخوانی آسان و سریع آن اشاره کرد.

برای اینکار اسکریپت را دانلود4 کرده و از حالت فشرده خارج کنید و با استفاده از دستورات شرطی زیر آنرا به قسمت head صفحه اضافه کنید:

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"/>
<![endif]-->

توضیح این که همراه اسکریپت فوق یک تصویر یک پیکسلی GIF ارایه شده که بایستی مسیر صحیح آنرا در خط اول کد فوق وارد کنید.

برای آگاهی بیشتر در مورد فرمت PNG می توانید نوشته "فورمت PNG پادشاه فورمت های تصویری در خلق صفحات وب" را مطالعه کنید.