IE กับ CSS3

พอดีมีโอกาสได้ลองออกแบบเว็บไซต์โดยใช้ CSS3 กลับพบปัญหาที่ไม่คาดคิดหลายประการ ซึ่งเป็นความบกพร่องโดยตรงของ IE โดยได้มีการทดสอบทั้ง IE7 IE8 และ IE9

ด้านบนเป็น IE ที่ใช้ CSS2.1 ครับ การทำงานของเว็บไซต์เป็นปกติดี เมื่อตรวจสอบอัตราการใช้ CPU พบว่ามีค่าแค่ 1-2% เท่านั้นครับ ซึ่งเป็นค่าที่ควรจะเป็น

สำหรับรูปด้านบนนี้ ผมใส่ CSS3 ให้กับเว็บ ผลปรากฏว่า อัตราการใช้ CPU ขึ้นไปถีง 51% ถ้าจะสังเกตความแตกต่าง จะพบว่าสิ่งที่ผมเพิ่มเติมเข้าไปคือ เงาฟุ้งๆ ของกรอบเท่านั้นนะครับ ด้วยคำสั่งด้านล่าง

box-shadow: 0 0 10px #C8C8C8;
คำสั่งด้านบนนี้มีผลกับ IE9 เท่านั้นนะครับ เนื่องจาก IE7 และ IE8 ไม่รองรับคำสั่งนี้ แต่จากการทดลองทำให้มีผลเหมือนกันโดยใช้ PIE.htc ผลก็เป็นเช่นเดียวกันครับ เนื่องจากการทำงานของ Javascipt ดังโค้ดด้านล่าง

box-shadow: 0 0 10px #C8C8C8;

behavior: url(pie.htc);

คำสั่งของ CSS3 อันอื่นๆก็มีผลเช่นเดียวกันบน IE นะครับ เช่น

 // สร้างกรอบโค้งด้วย CSS3

border-radius: 11px 11px 11px 11px;

// gradient

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#F9F9F9', endColorstr='#FFFFFF');

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#F9F9F9', endColorstr='#FFFFFF')";

ผมคาดว่าปัญหาต่างๆเหล่านี้ จะถูกแก้ไขใน IE9 เวอร์ชั่นสมบูรณ์นะครับ ไม่เช่นนั้น CSS3 อาจไม่เกิด เนื่องจากการใช้งานที่ค่อนข้างยุ่งยากของมัน

ปล. ณ วันที่ IE9 ออกมา ปัญหานี้ก็ได้รับการแก้ไขแล้วนะครับ