เอฟเฟ็กต์ตัวกรอง CSS ที่ไปปรากฏใน WebKit

ที่มา

เอฟเฟกต์ฟิลเตอร์นั้นมีให้ใช้มาระยะหนึ่งแล้ว แต่ได้รับการออกแบบให้ทำงานใน SVG ได้ เทมเพลตนี้มีประสิทธิภาพสูงในการใช้เอฟเฟกต์ต่างๆ เช่น ความเข้มของสี การปรับให้ภาพบิดเบี้ยว หรือการเบลอรูปภาพ ก่อนการประกอบและแสดงผลในเอกสาร

เมื่อปี 2009 Mozilla บอกว่า SVG นั้นไม่เพียงพอ สุดท้ายพวกเขาได้ใช้ตัวกรองเพิ่มขึ้นอีก 1 ขั้นตอนและอนุญาตให้ใช้ในเนื้อหา HTML ใน Firefox 3.5 ดูการสาธิตฟิลเตอร์ SVG สไตล์คลาสสิกของพอล ไอริชใน <video> ที่เล่นอยู่ ขอย้ำอีกครั้งว่าใช้งานได้เฉพาะใน Firefox เท่านั้น แต่ยังแก้เข่าอยู่

วันนี้

Flash ไปข้างหน้าในช่วงสิ้นปี 2011 และ Adobe (รวมถึงบริษัทอื่นๆ) ก็ทำงานอย่างหนักเพื่อนำเทคโนโลยีที่น่าทึ่งนี้มาสู่ CSS กล่าวอย่างเจาะจงก็คือ เราหมายถึง CSSFilter Effects 1.0 ซึ่ง WebKit ได้เริ่มติดตั้งใช้งานแล้ว

การเปิดใช้ตัวกรองใน CSS โดยตรงหมายความว่าองค์ประกอบ DOM เกือบทั้งหมดสามารถใช้ประโยชน์จากองค์ประกอบเหล่านี้ได้ รูปภาพ, <video>, <canvas> คุณตั้งชื่อ

การสาธิตเอฟเฟกต์ฟิลเตอร์ CSS

โปรไฟล์

ข้อกำหนดดังกล่าวยังกำหนดตัวสร้างเงา CSS ซึ่งจะนำเทคโนโลยีตัวปรับแสงเงา OpenGL มาสู่ CSS ในที่สุด เป็นเรื่องที่น่าตื่นเต้นมาก อย่างไรก็ตาม จะมีข้อควรพิจารณาด้านความปลอดภัยทุกครั้งที่คุณเปิด GPU ของระบบ ด้วยเหตุนี้ WebKit จึงมีฟังก์ชันตัวกรอง CSS ที่ใช้อยู่ในปัจจุบันเท่านั้น

การสนับสนุน

Chrome 18.0.976.0 (ปัจจุบันคือ Canary) Webkit ทุกคืน

ใน Webkit Nightlies คุณสามารถใช้ตัวกรองกับเนื้อหาที่มีการเร่งฮาร์ดแวร์ ( เช่น img { -webkit-transform: translateZ(0); }) ใน Chrome ตัวกรองเนื้อหาแบบเร่งยังอยู่ระหว่างดำเนินการ (ใช้แฟล็ก --enable-accelerated-filters) ซึ่งรวมถึง <video> ซึ่งมีการเร่งโดยค่าเริ่มต้น