CSS Shaders

by Kathi Vosevich, Ph.D.

Docid: 00021303

Publication Date: 1202

Report Type: TUTORIAL

Preview

Adobe, working with Apple and Opera, submitted the Cascading
Style Sheets (CSS) Shaders draft proposal to the World Wide Web Consortium (W3C) FX
Taskforce in October 2011. The
proposed CSS Shaders standard would add tools to the CSS specification
so that Web developers can add rich cinematic filter effects, such as waves,
ripples, blurs, wobbles, warps, or swipes, to Web pages without the
need for plugins. Although controversy
is already rife about potential security risks that could open Web
users’ sensitive data to attack, if the technology does not get abused,
then CSS Shaders might not be such a shady proposition for a rich Web
content experience.

Executive Summary

[return to top of this report]

Cascading
Style Sheets (CSS) Shaders is a draft proposal that Adobe, working with
Apple and Opera, submitted to the World Wide Web Consortium (W3C) FX
Taskforce in October 2011.

Related Faulkner Reports

Web
Design Programs & Tools Tutorial

The
proposed CSS Shaders standard would add tools to the CSS specification
so that Web developers can add rich cinematic filter effects to HTML. CSS
Shaders, then, would bring intense cinematic effects, such as waves,
ripples, blurs, wobbles, warps, or swipes, to Web pages without the
need for plugins like Flash. Adobe
boasts that it has always been about enabling content developers to
produce the richest, most expressive content possible, and CSS Shaders
would help achieve that goal. Adobe is so committed to this goal that
it is essentially using (cannibalizing?) its own Flash technology to
make HTML5 (competition to Flash, originally proposed by Opera) more
competitive with Flash! However, at the same time, any opportunity to
enhance Web content also enhances Adobe’s opportunity to sell the tools that enable this richer, more expressive content. Not a bad strategy.

As long as the technology does not get abused, then CSS Shaders should not be a “shady” proposition.

Description

[return to top of this report]

Cascading
Style Sheets (CSS) Shaders is a draft proposal that Adobe, working with
Apple and Opera, submitted to the World Wide Web Consortium (W3C) FX
Taskforce in October 2011. The W3C is an international community where member
organizations, a full-time staff, and the public work together to
develop Web standards. According to the
W3C, CSS
is a simple mechanism for adding style (such as fonts, colors, and
spacing) to Web
documents. In Adobe’s words, Shaders are often used in 3D graphics;
they are usually small programs that process the vertices of 3D
geometry (vertex shaders) and the color of pixels (fragment shaders) to produce a particular effect. CSS
Shaders use both types of shaders. The proposed CSS Shaders standard
would add tools to the CSS specification so that Web developers can add
rich cinematic filter effects to HTML. CSS
Shaders, then, would bring intense cinematic effects, such as waves,
ripples, blurs, wobbles, warps, or swipes, to Web pages without the
need for plugins like Flash.

In
its introduction to CSS Shaders, Adobe tries to simplify the
explanation of how these shaders work into three easy steps. First, CSS
Shaders turn an HTML or SVG element into a vertex mesh. Second, that
mesh is then processed by a vertex shader which makes distortions
in 3D space possible. Third, the mesh is rendered (or rasterized) into
pixels which the fragment shader colors.¹Authors can control the mesh’s granularity, as well as specify parameters that control the shaders.

Shaders
are written in the OpenGL ES shading language – the same used for WebGL
shaders. However, WebGL only works on HTML5 and supports only certain
shaders. CSS Shaders would work on any HTML. In other words, as the
proposed standard points out: “WebGL operates within the bounds of the canvas for which it provides a context
for full 3D features. By contrast, CSS shaders provide a way to apply arbitrary
vertex and fragment shaders to arbitrary Web content.”²

Adobe suggests that the following terminology is useful in understanding and using CSS Shaders:

Vertex. A coordinate on the geometry processed by the shaders.
Texture.
A raster or offscreen image. (CSS shaders turn an element’s rendering
into a texture used and processed by the vertex and fragment shaders.)
Attributes. Per-vertex parameters, passed to the vertex shader.
Uniform. Global parameters that have the same value for all vertices and pixels.
Projection Matrix. A matrix converting coordinates from the normalized vertex coordinate range back to the actual viewport coordinate system.³

Current View

[return to top of this report]

Currently, the CSS Shaders proposal is still a draft in its early days. The document proposes a model and a CSS syntax. Adobe
boasts that it has always been about enabling content developers to
produce the richest, most expressive content possible, and CSS Shaders
would help achieve that goal. Adobe is so committed to this goal that
it is essentially using (cannibalizing?) its own Flash technology to
make HTML5 (competition to Flash, originally proposed by Opera) more
competitive with Flash! However, at the same time, any opportunity to
enhance Web content also enhances Adobe’s opportunity to sell the tools that enable this richer, more expressive content. Not a bad strategy.

Adobe
wants to start contributing this CSS Shaders code to the WebKit as soon
as the W3C accepts the proposal. The sooner the proposal is accepted,
the sooner Web developers can start using the new set of filter
effects. The results are quite simply cool – and the programming appears
to be enjoyable as well without the need to use plugins, which would
make for an even better user experience. CSS Shaders appear to be
win-win for developers and users alike at the moment – that is, if the
draft can become a standard.

Outlook

[return to top of this report]

Although
it is still a draft, controversy is already rife about potential
security risks that could open Web users’ sensitive data to attack.
Even the proposed standard admits security considerations. For example,
possible denial of service attacks are a concern, since scripts have no
access to the shader output. WebGL experiences the same issues, so
efforts to address WebGL would need to apply to CSS Shaders as well.
Another concern is a timing attack in which the content pixel values
are computed without having actual API access to these values. While
this type of attack seems difficult because the means to measure the
time taken by a cross-domain shader are limited, it is not impossible,
as several bloggers have pointed out. However, does not the standard
have to be approved and the technology in place before it gets hacked?
Proactive considerations are wise moves to future-proof the technology.

Recommendations

[return to top of this report]

If
the CSS Shaders draft gets approved, the technology will improve the
Web experience – and Adobe’s bottom line. Currently, Web effects work on
elements. CSS Shaders would help create effects for parts of the
element. CSS Shaders can even add custom filters and create arbitrary
effects. Would not an unfolding map be a richer user experience than a
static element? Or would not a magnifying lens over part of a map help
highlight an area more effectively? Or a blur clarifying into a perfect
picture be more visually intriguing? These effects are possible with
CSS Shaders. Unfortunately, at the moment, Microsoft Internet Explorer
10 (IE10) does not support filter effects on CSS Shaders. If the draft
gets approved, then that should quickly change.

Achieving cinematic
effects without a plugin, enabling competition in order to grow
revenue – Adobe has a great strategy and should be accelerated through
the W3C. As long as the technology does not get abused, then CSS
Shaders should not be a “shady” proposition. In fact, they can help
Adobe stay on the cutting edge of cool – something Adobe’s partner in
the CSS Shaders draft, Apple, knows very well how to capitalize upon.

References

¹ Steps are taken from “Introducing CSS Shaders.” Available online at http://www.adobe.com/devnet/html5/article/css-shaders.html.

² “CSS Shaders Draft.” Available online at https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html.

³ Terminology list and definitions are taken from “Introducing CSS Shaders.” Available online at http://www.adobe.com/devnet/html5/article/css-shaders.html.

Web Links

[return to top of this report]

Adobe: http://www.adobe.com/
Apple: http://www.apple.com/
CSS Shaders Draft: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
OpenGL ES Shading Language: http://www.khronos.org/files/opengles_shading_language.pdf
Opera: http://www.opera.com/
WebGL Specification: http://www.khronos.org/registry/webgl/specs/1.0/

About the Author

[return to top of this report]

Kathi Vosevich, Ph.D., Senior Telecom Analyst for
Faulkner Information Services, is President and CEO of The Dufallu Group, a consulting company that
provides professional research/writing and strategic marketing services. Formerly, she was the senior manager of strategic
communications for Sprint Global Standards, where she was responsible for
messaging related to the networks. Previous to that, she was on the Office
Update team at Microsoft and Head of Documentation at Titan Client/Server
Technologies.

[return to top of this report]