CSS Bleeding Edge Features

This post has been in the back of my mind for sometime. When I woke up this morning I felt a strong desire to help spread the gospels about some of the coolest CSS proposals around layout and effects. If you are the type of person who attends W3C CSS Working Group or maybe W3C CSS-SVG Effects Task Force meetings then you already know this stuff. Otherwise, you should probably keep reading because you might learn some new things.

So what am I talking about here? Pardon me sir, I should have said right at the beginning of this post: I am talking about CSS Regions, CSS Exclusions, CSS Pagination Templates, and CSS Shaders. All of these features were proposed by Adobe and we are working together with other members of web standard groups to make them a … web standard :).

Before getting into details and stuff, let me step back to give you the context in which these CSS proposals were born. Most of the time the feature proposals for new web standards come from web browser manufacturers, guys like Google, Apple, Mozilla, Opera, and so forth. And this is great because they are building browsers day in, day out.

However, there are other players out there who can give a valuable input despite the fact they don’t build a browser. And Adobe is one good example. Our clients create digital content using various combinations of Adobe tools and this content targets the web browser along with other mediums.

And when you talk to a client who comes from the publishing business, one of the things he’ll tell you is that it is extremely hard to create complex layouts using today’s web standards. Of course if you throw in some JavaScript libraries and/or lots of PNGs then you can actually recreate what is possible to do in print. But why not have support for complex layouts built-in directly at the browser level and exposed as a number of CSS properties? This would ensure that you can not only build the content faster (because you don’t have to jump through all kind of hoops) but you’d get consistent performance across devices (mobile and desktop).

Adobe’s solution to this very question (how can you create magazine quality layout for web?) is this trio of CSS proposals: Regions, Exclusions & Shapes, and Pagination Templates.

While making CSS proposals is important, having a prototype could be even more important. Adobe provided for three of them a prototype implementation for WebKit. In case you wonder why Adobe chose WebKit as the engine to build prototypes for, the response is simple: WebKit has been used for different products for a number of years already. This means that we have engineers who are familiar with the WebKit code base (some being WebKit committers/reviewers).

Current Status

Before talking about what each proposal does, I think that it is better to talk about today’s status (yes, I’m going to keep this section up to date). So, what is the spec status and what browsers implement the feature?

CSS Proposal Supported In Spec Status Authored By
CSS Regions Chrome newer than 15, Chrome for Android,
Internet Explorer 10
Editor’s Draft 2 Adobe, Microsoft
CSS Exclusions & Shapes No browser – only special WebKit builds Editor’s Draft 2 Adobe, Microsoft
CSS Pagination Templates No browser Editor’s Draft 3 Adobe
CSS Shaders No browser – only special WebKit builds Editor’s Draft Adobe, Apple, Opera

Note: If you’re wondering what an Editor’s Draft is, then here is a little explanation. The proposal life-cycle is pretty much like this:

  1. Working Draft (WD) (could be multiple iterations) – the new standard is published for review by the community for the first time (virtually anyone can provide feedback).
  2. Candidate Recommendation (CR) – at this point the important features are locked in although the design of these features can change.
  3. Proposed Recommendation (PR) – Once all the involved parties (users and implementers of the standard) provided feedback and the feedback is addressed, the spec moves to this stage, Proposed Recommendation.
  4. Finally it becomes a W3C Recommendation (REC) – the final stage of the technical specification. This is what the browsers should use to implement support for the given spec.
So where is Editor’s Draft in the list above? Well, Editor’s draft means Working Draft. Confusing? I know; if you want the whole menu, read here.

CSS Regions

CSS Regions allow you to create “named flows” of content which can then get laid out across multiple regions. In other words, you can reflow the content from an element to an arbitrary number of elements, which can be in different parts of document. The simple example is one that allows you to create a number of columns and as you change the columns’ number or dimensions, the content automatically flows within them.

 

If you have a Chrome browser on your desktop/mobile device or Internet Explorer 10 you should be able to see this example.

Probably the simplest example you can build (using the current syntax) is this:


<style>

#article {
flow-into: article_flow;
}

#region1, #region2, #region3 {
flow-from: article_flow;

</style>

<div id="article">Here comes the text you want to display in different regions</div>

<div id="region1"></div><!-- First region -->
<div id="region2"></div><!-- Second region -->
<div id="region3"></div><!-- Third region -->

The flow order (the order in which the regions are filled with the text) is determined according to the document order. The proposal specifies that you can use region styling. This allows you to style the content depending on the region it flows into.

CSS Pagination Templates

If you read the CSS Regions description and think a little bit about it chances are you discovered two issues. First, you have to define in the page a bunch of elements that initially are empty – these elements will be filled with the content to be flowed. Second, if the content is less or more than the regions capability to display the text, then you don’t have a clean way to deal with this.

This is where Adobe’s CSS Pagination Templates proposal comes in. It allows you to define templates to be used for displaying content using just CSS. And because you define a template, it doesn’t matter how much content you have. The browser will be capable of generating the number of elements you need to fully display the content. Now this is something sweet, isn’t it?

  • Spec home
  • No prototype available for now, BUT keep an eye on this page – I will have something awesome for you to play with :)

CSS Exclusions and Shapes

If you go back to the original problem Adobe wanted to solve (magazines quality layout for the web) then you likely realize that CSS Regions (and his little brother, CSS Pagination Templates) is just half of the problem. Consider these two layouts:

You don’t have to be a CSS ninja to understand that there is no way to create this design for the web using just text and CSS.

So how can you solve this problem? Probably the best friend (or girlfriend if you want) of CSS Regions is CSS Shapes and Exclusions. This proposal allows you to:

  • define arbitrary areas around which content can flow (exclusions)
  • control the geometric shape used for wrapping content (shapes). Suppose you want to render text in a DIV element as if the DIV would be actually a circle.
The current syntax for this feature is not too difficult to follow. This would be a simple example that allows you to exclude a rectangular region from a text flow:
<style>
#exclusion {
   position: absolute;
   wrap-flow: both;
   background: #dedede;
   width: 80px;
height: 70px;
}
</style>

<div>
   <div id="exclusion"></div>
Lorem ipsum dolor sit amet...
</div>

What about changing the box shape of an element to something different, like for example making the text appear as rendered inside of a circle?
To define this kind of wrapping you’d use the shape-inside CSS property. And you can use SVG shapes for defining the shape to be used for wrapping content; for example:
<style>
.in-a-circle {
    shape-inside: url(#circle_shape);
}
</style>

<svg...>
    <circle id="circle_shape" cx="50%" cy="50%" r="50%"/>
</svg>

<div class="in-a-circle">Content to be wrap...</div>

Another cool aspect of this spec is the ability to use images for defining the exclusion area. In this case the alpha channel is used to compute the shape.

CSS Shaders

This proposal brings cinematic effects to the web. If you are familiar with the Filter Effects spec then you know that you can use a number of predefined filters (or effects) on any DOM element: blur, drop-shadow, hue-rotate, saturate, invert, grayscale, opacity, gamma, and sepia.

Together with CSS transitions you can create some nice visual effects. However, what if you want to do something that is not covered by these built-in effects? The answer is the CSS Shaders proposal.

As with Filter Effects, you can apply a CSS Shader to any DOM element. This means that the source of a CSS Shader (texture) will be the DOM element rendered by the browser. Then you can apply a vertex shader and/or fragment shader to change the appearance.

A vertex shader is used to change the geometry of the pixels input. This is what you’d have to use in order to wrap the DOM element to sphere for example or any other 3D surface. Consider the two images below:

 

On the left-hand side you can see a list (<ul>) that displays some tweets. On the right-hand side the same list is wrapped in a 3D perspective by applying a vertex shader.

A fragment shader (also known as pixel shader) changes the color of the pixels. Here is simple example where the fragment shader applies a grayscale (the result is on the right) on the DIV element (on the left):

 

When you create CSS Shaders that apply both vertex and fragment shaders, behind the scene the source DOM element (the raster image of the element as rendered by the browser before applying the CSS Shader) is first processed by the vertex shader and its geometry is changed and then the fragment shader kicks in and changes the pixels’ appearance (color or alpha).

The Shaders are written using the OpenGL ES shading language, the same language used for WebGL shaders. I encourage you to look at the videos from this page where you can see a bunch of examples of CSS Shaders.

Conclusions

I hope that you are excited by these features. If you have input please make sure you watch the proposal specs and you give your feedback. And keep an eye on this page to see how the specs evolve. Another good resource is Adobe Web Platform Team blog.

3 thoughts on “CSS Bleeding Edge Features

  1. Pingback: Experimenting with CSS Exclusions | Ryan Stewart – Mountaineer Coding

  2. Pingback: Experimenting with CSS Exclusions | iPad Development

  3. Pingback: Experimenting with CSS Exclusions | Hire Flash Developers

Leave a Reply

Your email address will not be published. Required fields are marked *