Thông tin khái quát
Hiệu ứng bộ lọc đã xuất hiện được một thời gian nhưng được thiết kế để hoạt động trong SVG. Các lớp này rất mạnh mẽ trong việc áp dụng các hiệu ứng như cường độ màu, làm cong hoặc làm mờ cho hình ảnh trước khi hình ảnh đó được kết hợp và kết xuất vào tài liệu.
Vâng, vào năm 2009, Mozilla đã nói rằng SVG là chưa đủ! Cuối cùng, họ đã tiến thêm một bước và cho phép bộ lọc trên nội dung HTML trong Firefox 3.5. Hãy xem bản minh hoạ không bao giờ lỗi thời của Paul Irish về các bộ lọc SVG trên <video> đang phát. Xin nhắc lại, tính năng này chỉ hoạt động trong Firefox nhưng vẫn rất hữu ích.
Hôm nay
Chuyển đến cuối năm 2011, Adobe (cùng với các công ty khác) đã nỗ lực để đưa công nghệ tuyệt vời này vào CSS. Cụ thể, tôi đang đề cập đến Hiệu ứng bộ lọc CSS 1.0 mà WebKit đã bắt đầu triển khai.
Việc bật bộ lọc trực tiếp trong CSS có nghĩa là hầu hết mọi phần tử DOM đều có thể tận dụng các bộ lọc đó! Hình ảnh, <video>, <canvas>, bạn cứ gọi tên.
Tương lai
Quy cách này cũng xác định shader CSS, cuối cùng sẽ đưa công nghệ chương trình đổ bóng OpenGL vào CSS. Thật sự rất thú vị! Tuy nhiên, bạn cần cân nhắc đến vấn đề bảo mật mỗi khi mở GPU của một hệ thống. Vì lý do này, WebKit hiện chỉ triển khai các hàm bộ lọc CSS.
Hỗ trợ
Chrome 18.0.976.0 (hiện là canary), Webkit hằng đêm
Trong bản phát hành hằng đêm của Webkit, bạn có thể áp dụng bộ lọc cho nội dung tăng tốc phần cứng ( ví dụ: img { -webkit-transform: translateZ(0); }). Trong Chrome, bộ lọc trên nội dung tăng tốc vẫn đang trong quá trình phát triển (sử dụng cờ --enable-accelerated-filters). Điều này bao gồm <video> được tăng tốc theo mặc định.