زمینه
افکت های فیلتر مدتی است که وجود داشته اند اما برای کار در SVG طراحی شده اند. آنها در اعمال افکت‌هایی مانند شدت رنگ، تاب برداشتن یا تار کردن روی یک تصویر قبل از ترکیب و رندر شدن در سند، فوق‌العاده قدرتمند هستند.
خوب، در سال 2009 موزیلا گفت SVG کافی نیست! آنها در نهایت فیلترها را یک قدم جلوتر بردند و به آنها اجازه دادند در محتوای HTML در فایرفاکس 3.5 استفاده کنند. نسخه نمایشی همیشگی پال آیریش از فیلترهای SVG را در <video> در حال پخش بررسی کنید. باز هم، فقط در فایرفاکس کار می کند اما هنوز زنبورها زانو می زنند.
امروز
فلش فوروارد تا پایان سال 2011 و Adobe (به علاوه دیگران) سخت در تلاش بوده اند تا این فناوری شگفت انگیز را به CSS بیاورند. به طور خاص، من به CSS Filter Effects 1.0 اشاره می کنم که WebKit شروع به پیاده سازی کرده است.
فعال کردن فیلترها به طور مستقیم در CSS به این معنی است که تقریباً هر عنصر DOM می تواند از آنها استفاده کند! تصاویر، <video> ، <canvas> ، شما آن را نام ببرید.
آینده
این مشخصات همچنین سایه بان های CSS را تعریف می کند که در نهایت فناوری سایه زن OpenGL را به CSS می آورد. این بسیار بسیار هیجان انگیز است! با این حال، هر زمان که GPU یک سیستم را باز می کنید، ملاحظات امنیتی وجود دارد. به همین دلیل، WebKit در حال حاضر فقط توابع فیلتر CSS را پیاده سازی کرده است.
حمایت کردن
Chrome 18.0.976.0 (در حال حاضر قناری)، Webkit شبانه
در شب‌های Webkit، فیلترها را می‌توان روی محتوای تسریع‌شده سخت‌افزاری اعمال کرد (به عنوان مثال img { -webkit-transform: translateZ(0); } ). در Chrome، فیلترهای روی محتوای شتاب‌دهی شده هنوز در حال انجام هستند (از پرچم --enable-accelerated-filters استفاده کنید). این شامل <video> است که به طور پیش فرض تسریع می شود.