Adobe

decor

Web Platform Team Blog

Making the web awesome

How to Make a Chocolate Peanut Butter Cup

Note: CSS Shapes syntax has changed. For the latest information, see CSS Shapes Module Level 1.

Sometimes when you add two foods together, you get something exceptionally delicious. And sometimes when you add two CSS features together, you get something exceptionally useful. CSS Exclusions and Shapes will be one of those exceptionally useful combinations, particularly with new layout systems being designed like CSS Grid Layout.

But while recipes can start from the point of collecting ingredients, Web Standards work often needs to define how to make the ingredients themselves. CSS Exclusions and CSS Shapes are really two separate features that are useful on their own. So we have split these two features into their own specifications. Now we can work on each feature independently, and combine them when they are both ready.

CSS Exclusions

Exclusions allow you to wrap content around elements that aren’t floats. With new layout mechanisms being defined, there will be many new ways of positioning elements such that they overlap in interesting ways. Exclusions allows an overlap to be handled by wrapping content around the overlapping element. As more positioning options become available, the need for a feature like CSS Exclusions increases. This draft of CSS Exclusions defines how you can wrap content around a rectangular border box.

Exclusion pull quote between columns

CSS Shapes

Shapes allows you to wrap content around things other than rectangles. The new CSS Shapes draft allows you to customize a float’s contour using a simple CSS syntax such as circle() and polygon(), or with an image’s alpha channel. This will allow for much more interesting wrapping behaviors around floats. Future levels of CSS Shapes will let you wrap contents in other ways (such as inside a shape), and possibly create more ways to define a shape.

text wrapping around a circular float

Combining Exclusions and Shapes

Once a browser implements both CSS Exclusions and CSS Shapes, you will be able to assign shapes to your exclusions. From a web standards perspective, this will happen a bit later – after we’ve collected the ingredients (experimental implementations and progressing draft specifications) for this mixing of features. First, we’ll make sure we have the very best ingredients. Then we’ll get to combine them to make the web more delicious.

Comments are closed.