ข้อมูลเบื้องต้น
เอฟเฟกต์ฟิลเตอร์มีมาระยะหนึ่งแล้ว แต่ออกแบบมาเพื่อใช้ใน SVG เครื่องมือเหล่านี้มีประสิทธิภาพอย่างยิ่งในการใช้เอฟเฟกต์ต่างๆ เช่น การปรับความเข้มของสี การบิดเบือน หรือการเบลอกับรูปภาพก่อนที่จะมีการคอมโพสและแสดงผลในเอกสาร
ย้อนกลับไปเมื่อปี 2009 Mozilla บอกว่า SVG นั้นไม่เพียงพอ ท้ายที่สุดแล้ว ทางบริษัทได้พัฒนาตัวกรองไปอีกขั้นและอนุญาตให้ใช้ตัวกรองในเนื้อหา HTML ใน Firefox 3.5 ดูตัวอย่างฟิลเตอร์ SVG ของ Paul Irish ที่ไม่เคยล้าสมัยใน <video> ที่เล่นอยู่ โปรดทราบว่าฟีเจอร์นี้ใช้ได้เฉพาะใน Firefox เท่านั้น แต่ยังคงยอดเยี่ยม
วันนี้
ในช่วงปลายปี 2011 Adobe (และบริษัทอื่นๆ) พยายามอย่างเต็มที่เพื่อนำเทคโนโลยีอันน่าทึ่งนี้มาสู่ CSS เราหมายถึงเอฟเฟกต์ฟิลเตอร์ CSS 1.0 ซึ่ง WebKit เริ่มใช้งานแล้ว
การเปิดใช้ตัวกรองใน CSS โดยตรงหมายความว่าองค์ประกอบ DOM เกือบทุกรายการสามารถใช้ตัวกรองได้ รูปภาพ, <video>, <canvas> อะไรก็ได้
อนาคต
ข้อกำหนดนี้ยังกำหนดเชดเดอร์ CSS ด้วย ซึ่งจะนำเทคโนโลยีเชดเดอร์ OpenGL มาใช้กับ CSS ในที่สุด ว้าว น่าตื่นเต้นมาก อย่างไรก็ตาม คุณควรคำนึงถึงความปลอดภัยทุกครั้งที่เปิด GPU ของระบบ ด้วยเหตุนี้ WebKit จึงมีการใช้ฟังก์ชันตัวกรอง CSS เท่านั้นในตอนนี้
การสนับสนุน
Chrome 18.0.976.0 (ปัจจุบันเป็น Canary), Webkit เวอร์ชันรายวัน
ใน Webkit เวอร์ชันสำหรับนักพัฒนาซอฟต์แวร์ คุณจะใช้ตัวกรองกับเนื้อหาที่เร่งด้วยฮาร์ดแวร์ได้ ( เช่น img { -webkit-transform: translateZ(0); }) ส่วนใน Chrome ตัวกรองในเนื้อหาที่เร่งยังอยู่ระหว่างการพัฒนา (ใช้ Flag --enable-accelerated-filters) ซึ่งรวมถึง <video> ที่เร่งความเร็วโดยค่าเริ่มต้น