The latest update to the CSS Shapes Module Level 1 affects the specification and how browsers implement the changes. The Adobe Web Platform Team announced the syntax changes on Feb. 11, 2014 in a blog
post by Bem Jones-Bey.

Bear Travis, a Web Standards Engineer at Adobe, gave me the heads up about the update, pointing out the Alice code snippet that I presented in Cutting edge web development with CSS Shapes and CSS Regions. He wrote, in part, “Nothing major with
your Alice code snippet would change, except that shapes are no longer sized
according to the box-sizing property. However, some of the code in the Alice
demo may be updated to the new syntax.”

I’ll present an overview of the update, along with current browser
support, give steps to enable the features in all modern browsers, and offer examples using the updated syntax. All screen captures are
from my desktop monitor in Chrome 33.0.1750.117 m.

Browser support

1. Copy
and paste chrome://flags/#enable-experimental-web-platform-features
into the address bar, and then press Enter.

2. Click
the Enable link within that section.

3. Click
the Relaunch Now button at the bottom of the browser window.

  • Firefox – All features are
    enabled by default.
  • Opera
    Requires the enable experimental Web Platform features flag.

1. Copy
and paste
opera://flags/#enable-experimental-web-platform-features into the address bar, and then press Enter.

2. Click
the Enable link within that section.

3. Click
the Relaunch Now button at the bottom of the browser window.

For example, the enabled feature in Chrome is
displayed in Figure A.

Figure A

After you enable the features in your browser, you can view live
examples of the CSS Shapes and Regions features from a collection that the
Adobe Web Platform has implemented on CodePen and is displayed in
Figure B.

 

Figure B

Syntax examples

I’ve modified the example code for the Box Values Shape Outside for demonstration purposes only in this post, including the CSS with webkit vendor prefixes and HTML code snippets.

Content box example

CSS code snippet 
 .content-box {
shape-outside: content-box;
-webkit-clip-path: content-box;
margin: -10px;
}

.float {
width: 10em;
height: 10em;
float: left;
border-radius: 2em 4em 2em 2em;
border-width: 3em 1em 2em 1em;
padding: 1em 1em 1em 2em;
margin: 2em 1em 1em 1em;
background-color: #008000;
}

.box-1 {
width: 12em;
height: 12em;
float: left;
border-radius: 2em 4em 2em 2em;
border-width: 3em 1em 2em 1em;
padding: -1em -1em -1em -1em;
margin: 2em 1em 1em 1em;
background-color: #008000;
}

.container {
width: 20em;
height: 20em;
overflow: hidden;
border: 0.1em solid #0080C0;
color: ##404040;
padding: 0.3em;
margin-bottom: 0.8em;
font-family: source-sans-pro, sans-serif;
}

HTML code snippet
   <div class="container">
<div class="box-1 content-box"></div>
This example uses the content box. This text wraps around the box. "Lorem ipsum dolor sit amet..."
</div>

The code snippets above produce the
result displayed in Figure C.
Figure C

Margin box example

CSS code snippet
 .margin-box {
shape-outside: margin-box;
-webkit-clip-path: margin-box;
}
HTML code snippet
  <div class="container">
<div class="float margin-box"></div>
This example uses the margin box. This text wraps around the box. "Lorem ipsum dolor sit amet..."
</div>
The code snippets above result in the margin box
displayed in Figure D.
Figure D

 

Other
CSS Shapes options include using the padding-box and the border-box features,
with syntax examples shown in the CSS code snippets with webkit vendor prefixes
below.

 

.padding-box {
shape-outside: padding-box;
-webkit-clip-path: padding-box;
}

.border-box {
shape-outside: border-box;
-webkit-clip-path: border-box;
}

Final thoughts

 

Cutting-edge technology is a continuously moving target, as specifications
and browser implementations continue to evolve, transform, and update. If you implemented any of the CSS Shapes
syntax prior to February 2014, you may want to revisit your CSS and make
the necessary edits.