배경
필터 효과는 오래 전부터 있었지만 SVG에서 작동하도록 설계되었습니다. 합성되어 문서로 렌더링되기 전에 이미지에 색상 강도, 왜곡, 흐리게 처리와 같은 효과를 적용하는 데 매우 강력합니다.
2009년 Mozilla는 SVG가 충분하지 않다고 말했습니다. 결국 필터를 한 단계 더 발전시켜 Firefox 3.5에서 HTML 콘텐츠에 필터를 허용했습니다. 재생 중인 <video>에서 SVG 필터에 관한 Paul Irish의 시대를 초월한 데모를 확인하세요. Firefox에서만 작동하지만 여전히 유용합니다.
오늘
2011년 말, Adobe와 다른 업체들이 이 놀라운 기술을 CSS에 도입하기 위해 노력하고 있습니다. 구체적으로 WebKit에서 구현하기 시작한 CSS 필터 효과 1.0을 말합니다.
CSS에서 직접 필터를 사용 설정하면 거의 모든 DOM 요소에서 필터를 활용할 수 있습니다. 이미지, <video>, <canvas> 등 무엇이든 가능합니다.
향후 일정
또한 이 사양은 궁극적으로 OpenGL 셰이더 기술을 CSS로 가져올 CSS 셰이더를 정의합니다. 정말 기쁜 소식입니다. 하지만 시스템의 GPU를 열 때마다 보안 고려사항이 있습니다. 따라서 WebKit에는 현재 CSS 필터 함수만 구현되어 있습니다.
지원
Chrome 18.0.976.0 (현재 Canary), Webkit Nightly
Webkit Nightly에서는 필터를 하드웨어 가속 콘텐츠 ( 예: img { -webkit-transform: translateZ(0); })에 적용할 수 있습니다. Chrome에서는 가속 콘텐츠의 필터가 아직 개발 중입니다 (--enable-accelerated-filters 플래그 사용). 여기에는 기본적으로 가속되는 <video>가 포함됩니다.