One of the more exciting features for the web which I've been looking forward to some time now are CSS shaders. You might remember when 3D transforms were new and hot, CSS shaders will bring content transformations to a whole new level. The ability to perform any sort of transformations up-to single pixel precision allows developers to create and present content in ways that have not been possible before.
If you are familiar with shaders from WebGL, CSS shaders are almost identical with a few differences. As described by Vincent Hardy:
"WebGL operates within the bounds of the canvas for which it provides a context. By contrast, CSS shaders provide a way to apply arbitrary shaders to arbitrary Web content".
This very much applies to my implementation of CSS shaders through WebGL, but there are some more differences to WebGL and CSS shaders than that.
The other major difference is the fact that with the current proposal and implementation of CSS shaders, the fragment shader does not have access to the texture color at all. Instead, the modifications to the colors are to be done through blending using
css_BlendColor. With my implementation, those two variables can be used, but the fragment shaders can also read and write the color of the texture directly as it has full access to the texture.
The reason CSS shaders do not have access to the texture color is due to security issues and I gave my views on the current approach here.
As my implementation does have access to read the texture, it shouldn't come as a surprise that my implementation is not able to read cross-origin content (without proxy), distinguish
:visited links, display OS-specific forms, and a whole lot of CSS properties that html2canvas still doesn't support.
Most of these samples are by Adobe, slightly modified to include my CSS shader implementation to them.
Personally, I think CSS shaders are the biggest thing that CSS has ever had coming for it, so I certainly hope the support for it won't end with webkit browsers. However, as Microsoft currently has no intentions to implement WebGL into Internet Explorer, I certainly don't see them implementing CSS shaders (which really has more security issues than just WebGL). I'd like to also note that this implementation is just a prototype experiment and as such still consists of many bugs and I wouldn't recommend using it in any production environment.
If you would like to see how the native CSS shaders currently work in Chrome, you can either download the webkit prototype by Adobe or enable them with the command flag
The script uses the following libraries: