ทำความเข้าใจผลของตัวกรอง CSS

บทนำ

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

อดีต ปัจจุบัน และอนาคตของเอฟเฟกต์ฟิลเตอร์

เอฟเฟกต์ฟิลเตอร์มีที่มาจากข้อกำหนดของกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) ซึ่งสร้างขึ้นเพื่อใช้เอฟเฟกต์รูปภาพแบบพิกเซลต่างๆ กับภาพวาดเวกเตอร์ เมื่อเวลาผ่านไป ผู้ให้บริการเบราว์เซอร์ได้เพิ่มความสามารถของ SVG ลงในเบราว์เซอร์ของตน ซึ่งทำให้เห็นประโยชน์ของฟิลเตอร์อย่างชัดเจน Robert O’Callahan จาก Mozilla ได้ไอเดียที่ยอดเยี่ยมในการใช้ฟิลเตอร์ SVG โดยใช้ CSS กับเนื้อหา HTML "ปกติ" Robert ได้สร้างต้นแบบเวอร์ชันแรกซึ่งแสดงให้เห็นว่าการใช้ฟิลเตอร์ร่วมกับการจัดสไตล์ CSS มีประสิทธิภาพเพียงใด กลุ่มทํางาน CSS และ SVG ใน W3C ตัดสินใจที่จะปรับการใช้ฟิลเตอร์สําหรับทั้ง HTML และ SVG ให้สอดคล้องกันผ่านการจัดสไตล์ CSS ด้วยเหตุนี้ พร็อพเพอร์ตี้ "filter" สําหรับ CSS จึงถือกำเนิดขึ้น ขณะนี้ ทีมเฉพาะกิจที่ทำงานเกี่ยวกับ CSS และ SVG กำลังทํางานอย่างหนักเพื่อให้ฟิลเตอร์มีประโยชน์ในทุกรูปแบบ ดูข้อกำหนดปัจจุบันสำหรับข้อมูลทั้งหมดนี้ได้ที่นี่

พร็อพเพอร์ตี้ CSS "filter" เวอร์ชันใหม่

บางครั้งนักพัฒนาเว็บอาจรู้สึกคุ้นเคยเมื่อเห็น "ฟิลเตอร์" ในสไตล์ CSS เนื่องจาก Internet Explorer เวอร์ชันเก่ามีพร็อพเพอร์ตี้ "filter" ที่แสดงผ่าน CSS เพื่อใช้ฟังก์ชันบางอย่างเฉพาะแพลตฟอร์ม เราได้เลิกใช้งานแล้วเพื่อสนับสนุนพร็อพเพอร์ตี้ "filter" มาตรฐานซึ่งตอนนี้เป็นส่วนหนึ่งของ CSS3 เมื่อเห็นคำว่า "กรอง" แบบปกติในหน้าเว็บเก่าบางหน้า คุณก็ไม่ต้องสับสนอีกต่อไป พร็อพเพอร์ตี้ "filter" ใหม่คือจุดที่การดำเนินการทั้งหมดเกิดขึ้น และ IE เวอร์ชันใหม่ใช้พร็อพเพอร์ตี้นี้เหมือนกับเบราว์เซอร์สมัยใหม่ทั้งหมด

วิธีการทำงานของตัวกรอง

แล้วตัวกรองทำหน้าที่อะไรกันแน่ วิธีคิดที่ง่ายที่สุดเกี่ยวกับฟิลเตอร์คือขั้นตอนหลังการประมวลผลที่ทําสิ่งมหัศจรรย์หลังจากจัดวางและวาดเนื้อหาทั้งหมดในหน้าเว็บแล้ว

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

ซึ่งหมายความว่าจะต้องใช้เวลาในการวาดหน้าเว็บที่มีฟิลเตอร์ แต่การใช้ฟิลเตอร์อย่างเหมาะสมจะส่งผลต่อความเร็วของเว็บไซต์เพียงเล็กน้อย

นอกจากนี้ คุณยังใช้ฟิลเตอร์ตามลำดับได้ไม่จำกัดจำนวนเพื่อจะได้เอฟเฟกต์ทุกประเภท เช่นเดียวกับการซ้อนฟิลเตอร์ไว้หน้าเลนส์กล้อง

ฟิลเตอร์ที่กําหนดโดยใช้ SVG และ CSS

เนื่องจากตัวกรองมาจาก SVG เดิม จึงมีวิธีต่างๆ ในการกําหนดและใช้งาน SVG เองมีองค์ประกอบ <filter> ที่รวมคําจํากัดความของเอฟเฟกต์ฟิลเตอร์ต่างๆ โดยใช้ไวยากรณ์ XML ชุดฟิลเตอร์ที่ CSS กำหนดจะใช้ประโยชน์จากโมเดลกราฟิกเดียวกัน แต่คําจํากัดความจะง่ายกว่ามากและใช้งานในสไตล์ชีตได้ง่าย

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

วิธีใช้ฟิลเตอร์ CSS

การใช้ตัวกรองจาก CSS สามารถทำได้โดยใช้คุณสมบัติ "ตัวกรอง" ที่ใช้กับองค์ประกอบใดๆ ที่มองเห็นได้บนหน้าเว็บของคุณ สำหรับตัวอย่างง่ายๆ นี้ คุณสามารถเขียนประมาณว่า

div { { % mixin filter: grayscale(100%); % } }

ซึ่งจะทำให้เนื้อหาภายในองค์ประกอบ <div> ทั้งหมดในหน้าเว็บเปลี่ยนเป็นสีเทา เหมาะสำหรับทำให้หน้าเว็บดูเหมือนภาพทีวีจากยุค 1940

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

div { { % mixin filter: grayscale(50%); % } }

หากต้องการใช้ฟิลเตอร์หลายรายการตามลำดับ เพียงวางฟิลเตอร์เหล่านั้นตามลำดับใน CSS ดังนี้

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

ตัวอย่างดังกล่าวจะเปลี่ยนสีเดิมทั้งหมดเป็นโทนสีเทาก่อน จากนั้นจึงใช้เอฟเฟกต์ซีเปีย และผลลัพธ์ที่ได้จะมีลักษณะดังนี้

คุณสามารถลองใช้ฟิลเตอร์ทีละรายการเพื่อสร้างเอฟเฟกต์ทุกประเภทได้ตามจินตนาการของคุณ

เอฟเฟกต์ฟิลเตอร์ที่ใช้ได้โดยใช้ CSS

ดังนั้นกลไกตัวกรอง SVG เดิมจึงมีประสิทธิภาพสูง แต่ก็อาจใช้งานยากด้วย ด้วยเหตุนี้ CSS จึงมีเอฟเฟกต์ฟิลเตอร์มาตรฐานมากมายที่ช่วยให้ใช้งานได้ง่าย

มาดูกันว่าแต่ละรายการทํางานอย่างไร

grayscale(amount)

การดำเนินการนี้จะแปลงสีในรูปภาพอินพุตเป็นเฉดสีเทา "จำนวน" ที่นําไปใช้จะควบคุมจํานวน Conversion สีเทาที่จะนําไปใช้ หากเป็น 100% ทุกอย่างจะเป็นสีเทา หากเป็น 0% สีจะไม่เปลี่ยนแปลง คุณใช้เลขทศนิยมที่นี่ได้หากต้องการใช้แทนเปอร์เซ็นต์ เช่น 0 จะทำงานเหมือนกับ 0% ส่วน 1.0 จะทำงานเหมือนกับ 100%

sepia(amount)

วิธีนี้จะให้สีที่ผ่านด้วยโทนสีซีเปียเหมือนในภาพเก่าๆ "จำนวน" ที่ใช้จะทำงานในลักษณะเดียวกับฟิลเตอร์ "โทนสีเทา" กล่าวคือ 100% จะทำให้สีทั้งหมดเป็นโทนซีเปียทั้งหมด และค่าที่น้อยลงจะทำให้เอฟเฟกต์มีผลในอัตราส่วนที่น้อยลง

saturate(amount)

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

hue-rotate(angle)

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

invert(amount)

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

opacity(amount)

หากต้องการให้เนื้อหาที่กรองดูโปร่งแสงบางส่วน ให้เลือกตัวเลือกนี้ ค่า "amount" จะกำหนดความทึบของเอาต์พุต ดังนั้นค่า 100% จะเป็นแบบทึบแสงทั้งหมดเพื่อให้เอาต์พุตเหมือนกับอินพุตทุกประการ เนื่องจากค่าลดลงต่ำกว่า 100% รูปภาพเอาต์พุตจะมีความทึบแสงน้อยลง (โปร่งใสมากขึ้น) และจะเห็นรูปภาพน้อยลง ซึ่งหมายความว่าหากองค์ประกอบซ้อนทับกับสิ่งอื่นในหน้า สิ่งที่อยู่ด้านล่างก็จะเริ่มปรากฏให้เห็น "จำนวน" 0% หมายความว่าวัตถุจะหายไปอย่างสมบูรณ์ แต่โปรดทราบว่าคุณยังคงให้เหตุการณ์ต่างๆ เช่น การคลิกเมาส์ เกิดขึ้นบนวัตถุที่โปร่งใสโดยสมบูรณ์ได้ ซึ่งจะมีประโยชน์หากคุณต้องการสร้างพื้นที่ที่คลิกได้โดยไม่ต้องแสดงอะไรเลย

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

ความสว่าง(จำนวนเงิน)

ซึ่งเหมือนกับการควบคุมความสว่างบนทีวี โดยจะปรับสีระหว่างสีดำสนิทและสีเดิมตามสัดส่วนของพารามิเตอร์ "amount" หากตั้งค่านี้เป็น 0% คุณจะเห็นแต่สีดำ แต่เมื่อค่าเพิ่มขึ้นจนถึง 100% คุณจะเห็นภาพต้นฉบับสว่างขึ้นเรื่อยๆ จนกว่าจะถึง 100% ซึ่งจะเหมือนกับรูปภาพที่ส่งเข้ามา แน่นอนว่าคุณสามารถดำเนินการต่อได้ ดังนั้นการตั้งค่าสัก 200% จะทำให้ภาพสว่างขึ้นเป็น 2 เท่าของต้นฉบับ ซึ่งเหมาะสำหรับการปรับภาพถ่ายในสภาวะแสงน้อยเหล่านั้น

contrast(amount)

การควบคุมเพิ่มเติมจากทีวี ซึ่งจะปรับความแตกต่างระหว่างส่วนที่มืดและสว่างที่สุดของรูปภาพอินพุต หากใช้ 0% ผลลัพธ์ที่ได้จะเป็นสีดำเหมือนกับ "ความสว่าง" จึงไม่น่าตื่นเต้นเท่าไหร่ แต่เมื่อเพิ่มค่าเป็น 100% ความแตกต่างของความมืดก็จะเปลี่ยนไปเรื่อยๆ จนกว่าคุณจะไปถึง 100% แล้วก็จะเป็นภาพต้นฉบับอีกครั้ง คุณปรับค่าให้มากกว่า 100% ได้ด้วย ซึ่งจะยิ่งเพิ่มความแตกต่างระหว่างสีอ่อนและสีเข้ม

blur(radius)

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

drop-shadow(shadow)

การได้สร้างสรรค์เนื้อหาให้ดูเหมือนอยู่กลางแจ้งท่ามกลางแสงอาทิตย์โดยมีเงาอยู่บนพื้นดินเป็นสิ่งที่ดีมากทีเดียว และแน่นอนว่านี่คือสิ่งที่ "เงาตกกระทบ" ทำ โดยจะถ่ายสแนปชอตของรูปภาพ ทำเป็นสีเดียว เบลอภาพ แล้วออฟเซ็ตผลลัพธ์เล็กน้อยเพื่อให้ดูเหมือนเงาของเนื้อหาต้นฉบับ พารามิเตอร์ "เงา" ที่ส่งมามีความซับซ้อนกว่าค่าเดี่ยวเล็กน้อย โดยเป็นชุดค่าที่คั่นด้วยเว้นวรรค และบางค่าไม่จำเป็นต้องระบุก็ได้ ค่า "shadow" จะควบคุมตําแหน่งการวางเงา ระดับความเบลอ สีของเงา ฯลฯ ดูรายละเอียดทั้งหมดเกี่ยวกับสิ่งที่ค่า "shadow" ทําได้ที่ข้อกําหนดของพื้นหลัง CSS3 ซึ่งจะกําหนด "box-shadow" อย่างละเอียด ตัวอย่างด้านล่างจะช่วยให้คุณเห็นภาพความเป็นไปได้ต่างๆ

การดำเนินการตัวกรองอีกอย่างหนึ่งที่คล้ายกับฟังก์ชัน CSS ที่มีอยู่ผ่านพร็อพเพอร์ตี้ "box-shadow" การใช้วิธีการกรองหมายความว่าบางเบราว์เซอร์อาจเร่งฮาร์ดแวร์ตามที่เราอธิบายไว้สำหรับการทำงาน "ความทึบแสง" ข้างต้น

URL ที่อ้างอิงฟิลเตอร์ SVG

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

ตัวอย่างเช่น มาร์กอัป SVG สำหรับฟิลเตอร์อาจเป็นดังนี้

<filter id="foo">...</filter>

จากนั้นจาก CSS คุณอาจทำสิ่งง่ายๆ ต่อไปนี้

div { { % mixin filter: url(#foo); % } }

เรียบร้อย! <div> ทั้งหมดในเอกสารจะอยู่ในรูปแบบที่มีคำจำกัดความตัวกรอง SVG

ที่กำหนดเอง (เร็วๆ นี้)

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

ข้อพิจารณาด้านประสิทธิภาพ

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

การทําความเข้าใจว่าตัวกรองทํางานอย่างไรและส่งผลต่อประสิทธิภาพอย่างไรนั้นสำคัญอย่างยิ่ง โดยเฉพาะอย่างยิ่งหากต้องการให้เว็บไซต์ทํางานได้ดีในอุปกรณ์เคลื่อนที่หากรองรับตัวกรอง CSS

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

เมื่อคุณใช้ blur ระบบจะผสมสีจากพิกเซลรอบๆ พิกเซลเอาต์พุตเพื่อสร้างผลลัพธ์เบลอ ดังนั้น สมมติว่าพารามิเตอร์ radius ของคุณคือ 2 ตัวกรองจะต้องดูที่ 2 พิกเซลในทุกทิศทางรอบพิกเซลเอาต์พุตแต่ละพิกเซลเพื่อสร้างสีผสม การดำเนินการนี้จะมีผลกับพิกเซลเอาต์พุตแต่ละพิกเซล ซึ่งหมายความว่าจะมีการคำนวณจำนวนมากที่ยิ่งทวีมากขึ้นเมื่อคุณเพิ่ม radius เนื่องจาก blur มองไปทุกทิศทาง การทำให้ "รัศมี" เพิ่มขึ้น 2 เท่าหมายความว่าคุณต้องดูพิกเซลมากขึ้น 4 เท่า ดังนั้นความเร็วจะช้าลง 4 เท่าทุกครั้งที่ radius เพิ่มขึ้น 2 เท่า ฟิลเตอร์ drop-shadow มี blur เป็นส่วนหนึ่งของเอฟเฟกต์ ดังนั้นจึงทํางานเหมือนกับ blur เมื่อคุณเปลี่ยนส่วน radius และ spread ของพารามิเตอร์ shadow

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

หากคุณใช้ฟิลเตอร์ตาม url ที่อ้างอิงฟิลเตอร์ SVG ฟิลเตอร์เหล่านี้อาจมีเอฟเฟกต์ฟิลเตอร์แบบใดก็ได้ ดังนั้นโปรดทราบว่าอาจทำงานช้าเช่นกัน ดังนั้นโปรดตรวจสอบว่าคุณทราบถึงสิ่งที่เอฟเฟกต์ฟิลเตอร์ทําและทดสอบในอุปกรณ์เคลื่อนที่เพื่อให้แน่ใจว่าประสิทธิภาพเป็นที่น่าพอใจ

ความพร้อมใช้งานในเบราว์เซอร์รุ่นใหม่

ปัจจุบันเอฟเฟกต์ CSS filter จำนวนหนึ่งพร้อมให้ใช้งานในเบราว์เซอร์ WebKit และ Mozilla เราคาดว่าจะได้เห็นฟีเจอร์เหล่านี้ใน Opera และ IE10 เร็วๆ นี้ เนื่องจากข้อกําหนดยังอยู่ระหว่างการพัฒนา ผู้ให้บริการเบราว์เซอร์บางรายจึงติดตั้งใช้งานโดยใช้คำนำหน้าของผู้ให้บริการ ดังนั้นใน WebKit คุณจะต้องใช้ -webkit-filter และใน Mozilla คุณจะต้องใช้ -moz-filter และคอยดูการใช้งานเบราว์เซอร์อื่นๆ ที่ปรากฏขึ้น

บางเบราว์เซอร์อาจไม่รองรับเอฟเฟกต์ฟิลเตอร์ทั้งหมดในทันที ดังนั้นระยะไมล์ที่ได้จึงแตกต่างกันไป ปัจจุบันเบราว์เซอร์ Mozilla รองรับเฉพาะฟังก์ชัน filter: url() ที่ไม่มีคำนำหน้าของผู้ให้บริการ เนื่องจากการใช้งานนั้นเกิดขึ้นก่อนฟังก์ชันเอฟเฟกต์อื่นๆ

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

แหล่งข้อมูลอื่นๆ ที่มีประโยชน์

แอปพลิเคชันภาพวาดนามธรรมแบบอินเทอร์แอกทีฟพร้อมฟิลเตอร์ที่ยอดเยี่ยม ซึ่งให้คุณทดลองและแชร์อาร์ตเวิร์กได้ อย่าลืมไปที่หน้าฟิลเตอร์แบบอินเทอร์แอกทีฟที่ยอดเยี่ยมของ Eric Bidelman บทแนะนำเกี่ยวกับฟิลเตอร์ที่ยอดเยี่ยมพร้อมตัวอย่าง ข้อกำหนดฉบับร่างอย่างเป็นทางการของ W3C Filter Effects 1.0 http://dev.w3.org/fxtf/filters/ ตัวอย่าง UI ที่สร้างขึ้นโดยใช้ฟิลเตอร์