רקע
אפקטים של מסננים קיימים כבר זמן מה, אבל הם תוכננו לפעול ב-SVG. הם מצוינים להחלת אפקטים כמו עוצמת צבע, עיוות או טשטוש על תמונה לפני שמשלבים אותה ומעבדים אותה במסמך.
ובכן, כבר בשנת 2009, Mozilla אמרה ש-SVG לא מספיק! בסופו של דבר, הם הרחיבו את השימוש במסננים ואיפשרו אותם בתוכן HTML ב-Firefox 3.5. כדאי לעיין בהדגמה של Paul Irish על שימוש במסנני SVG ב-<video>. שוב, האפשרות הזו פועלת רק ב-Firefox, אבל היא עדיין הכי טובה.
היום
אנחנו עוברים אל סוף שנת 2011, ו-Adobe (ועוד חברות) עבדו קשה כדי להביא את הטכנולוגיה המדהימה הזו ל-CSS. הכוונה שלי היא במיוחד ל-CSS Filter Effects 1.0, ש-WebKit התחילה להטמיע.
הפעלת מסננים ישירות ב-CSS מאפשרת ליהנות מהם כמעט בכל רכיב DOM. תמונות, <video>, <canvas>, כל מה שתרצו.
עתיד
המפרט מגדיר גם שידרוגים של CSS, שבסופו של דבר יביאו את טכנולוגיית השדרוגים של OpenGL ל-CSS. זה מרגש מאוד! עם זאת, יש שיקולי אבטחה בכל פעם שפותחים את ה-GPU של מערכת. לכן, בשלב זה הופעלה ב-WebKit רק פונקציית סינון CSS.
תמיכה
Chrome 18.0.976.0 (כרגע גרסת Canary), Webkit nightly
בגרסאות ה-nightly של Webkit, אפשר להחיל מסננים על תוכן שמשופר באמצעות חומרה ( למשל img { -webkit-transform: translateZ(0); } ). ב-Chrome, מסננים על תוכן שמשופר באמצעות חומרה עדיין נמצאים בפיתוח (משתמשים בדגל --enable-accelerated-filters). למשל, <video>, שמואצת כברירת מחדל.