:: Kunagorn Sirikup :: C# Developer

27/9/56

การแสดงผล CSS3 บน Internet Explorer ด้วย PIE

ในปัจจุบันมีเทคโนโลยีมากมายที่ช่วยให้เราสามารถออกแบบเวบไซต์ได้สะดวกและรวดเร็วมากขึ้น CSS (cascade style sheet) ก็เป็นอีกทางเลือกหนึ่งที่ช่วยเพิ่มความสวยงามให้กับเวบไซต์ รวมถึงสามารถแก้ไขหรือปรับปรุงหน้าเพจได้ง่าย เพราะรูปแบบการแสดงผลมาจากคำสั่ง Style Sheet ชุดเดียวกัน

ปัจจุบันได้มีการพัฒนา CSS3 เพื่อให้มีความสามารถเพิ่มขึ้นจาก CSS2 โดยเพิ่มฟีเจอร์ต่างๆขึ้น เช่น Border-Radius ,  Multiple Backgrounds เป็นต้น (สามารถดูเพิ่มเติมได้ที่ http://www.css3.info/preview ) อย่างไรก็ดี CSS3  ก็มีข้อเสียตรงที่ ไม่สามารถรองรับได้ทุกเว็บบราวเซอร์ โดยเฉพาะ Internet Explorer ดังนั้น  จึงได้มีการพัฒนา PIE (Progressive Internet Explorer) เพื่อเป็น Extensions ที่ช่วยให้ Internet Explorer ตั้งแต่รุ่น 6.x - 8.x สามารถแสดงผลหน้าเว็บที่ใช้ CSS3 ได้

ขั้นตอนการใช้ PIE 

1. ดาวน์โหลดไฟล์ PIE.htc (สามารถดาวน์โหลดได้จาก http://css3pie.com )


















2. นำไฟล์ PIE.htc มาใส่ไว้ใน Solution ของเว็บไซต์ โดยเก็บไว้ใน Directory เดียวกันกับ StyleSheet ดังนี้
















3. ใน StyleSheet ที่มีการใช้ Properties ของ CSS3 ให้เขียน Properties behavior ลงไป ตัวอย่าง  behavior: url(PIE.htc); โดยระบุ Path ที่เข้าถึง PIE.htc ให้ถูกต้อง ดังนี้



















4. ในตัวอย่างนี้จะเกิดช่องสี่เหลี่ยมที่มีขอบโค้งมลและมีเงา ซึ่งเป็นคุณสมบัติของ CSS3 ซึ่งไม่สามารถแสดงบน IE8 ได้  แต่เมื่อเรากำหนด Properties behavior ของ PIE ลงไปก็สามารถแสดงผลได้ปกติ โดยไม่ต้องแก้ไข CSS