Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 302

Upcoming CSS features
One of my favorite things about the Open Web is that it is also a living web. As new
ideas arise and as new needs manifest themselves, it becomes a matter of time un-
til new features are introduced into a spec. A perfect example of this is CSS, where
recently there have been a few new features added to the spec. Best of all, most
browser vendors are quite proactive at bringing these new features to their browsers.
In this next section we will look at three new features of CSS, namely CSS shaders,
CSS columns, and CSS regions and exclusions. To give you an idea of how active
the development of these features is, we will discuss the first feature CSS shaders ,
which was recently renamed as CSS custom filters. Talk about a fast moving devel-
opment life cycle.
Programming in the bleeding edge
Although most of the content in this topic is somewhat new and state of the art, the
majority of the HTML5 features and APIs discussed so far are fairly stable. By that,
I mean that just about any major browser should be able to handle these features
without any problems. However, the following CSS features are literally fresh out of
the oven. To be more specific, all three of these features are still being baked, with
the recipe being worked on until it reaches a more stable level of refinement.
With that said, this section may require that you use the absolute most recent
browsers, using the latest possible version, and you may even be required to delve
into the settings section of your browser of choice so that any advanced flags are set
in order for these new and experimental features to work. All of the code examples for
the rest of this chapter were written for and tested in Google Chrome Canary (nightly
builds). As of this writing, after a fresh install of Google Chrome Canary, the following
flags had to be manually enabled:
• Enable experimental WebKit features
• Enable CSS shaders
You likely won't need to enable the WebGL flag, as this particular flag has been en-
abled by default for a while, but in case the flag is disabled, you can make it available
in the same manner. To view all the available flags that can be set on Google Chrome,