a little bit of everything

ไฟล์ .png กับการทำเว็บสมัยนี้เป็นของคู่กัน ซึ่งคนที่รู้จักกับมันแล้วจะลืม .gif ไปเลย หลักๆคือความสามารถในการทำให้ส่วนใดๆของภาพโปร่งแสง(transparent) และพื้นหลังใสได้อย่างสนิทใจ

แต่ปัญหามันก็เกิดกับบราวเซอร์ที่รักเจ้าเก่าของเรา ไม่ใช่ใครที่ไหน ie6 นั่นเอง สำหรับคนทำเว็บแล้วก็อยากจะลืมๆเจ้าบราวเซอร์นี้มันไปซะ แต่พอเหลือบมาดูสถิติ browser ที่ใช้กันในบ้านเราแล้วก็ไม่สามารถจริงๆ (Truehits.net::2008-11 IE6 51.1%) ดังนั้นก็ต้องมาตามแก้กันไป

วิธีทำให้ไฟล์ png แสดงผลได้อย่างปกติสุขใน ie6 นั้นมีหลายวิธีแล้วแต่ความถนัด สำหรับวิธีที่จะพูดถึงนี้ส่วนตัวแล้วชอบเพราะว่าไม่ต้องดัดแปลงโค้ทมากนัก ก่อนอื่นก็มาดูการแสดงผลไฟล์ png ของ ie6 เทียบกับ ie7 กันก่อน

จะเห็นว่าใน ie6 นั้นส่วนพื้นหลังมันไม่ใสจริง แต่มีพื้นที่สีเทาๆมาทับ background(รูปไม้บรรทัด) ด้านข้างหมด คราวนี้มาดูวิธีแก้กัน

IE PNG FIX

โค้ทที่ใช้แก้นี้คือ iepngfix ต้นฉบับคือ Twin Helix: IE PNG Fix

วิธีใช้งานก็ง่ายๆ ไม่ปวดสมอง โดย

1. ดาวน์โหลดไฟล์ iepngfix.zip ได้ที่เว็บต้นฉบับเลย
2. แตกซิปแล้วนำไฟล์ iepngfix.htc กับ blank.gif ไปใว้ในโฟลเดอร์ที่ต้องการ
3. เพิ่ม style เข้าไปในไฟล์ html คือ

   โดยที่ url(“iepngfix.htc”) ใส่เป็น path เรียกไปหาไฟล์นี้ ทั้งหมดใส่ไว้ใน tag lte IE6 เพื่อบราวเซอร์อื่นๆ รวมทั้ง ie7+ จะได้ไม่ต้องสนใจมัน

จากนั้นรีเฟรชดูใหม่ใน ie6

หมายเหตุ: หากไฟล์ iepngfix.htc และ blank.gif ไม่ได้อยู่ที่เดียวกัน ให้เปิดไฟล์ iepngfix.htc ด้วย notepad และแก้ไข path ที่ IEPNGFix.blankImg = thisFolder + ‘blank.gif’; <–อาจแก้เป็น absolute path เช่น IEPNGFix.blankImg =’/images/blank.gif’;