Software Development

CSS Shapes syntax changes that may require updates to your CSS

If you implemented CSS Shapes syntax prior to February 2014 when the spec changes were announced, you might need to revisit your CSS and make the necessary edits.
 
CSS_Shapes_Syntax_hero_031314.gif
 
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
 
CSS_Shapes_Syntax_FigA_031314.gif
 

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

 
CSS_Shapes_Syntax_FigB_031314.gif
 

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
 
CSS_Shapes_Syntax_FigC_031314.gif
 


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
 
CSS_Shapes_Syntax_FigD_031314.gif

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.

 

 

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
grayknight
grayknight

This is why one should not be implementing these not-yet-standardized CSS properties in production websites. I still see too many websites with "your browser is old, upgrade to blah, blah..." even when using IE 11. I have found a few sites that at least say, there may be problems, but you can proceed anyway and everything works fine.


Sure, there are lots of fun things that can be done in the not-yet-a-standard CSS/HTML/etc., but to push these out to production is just asking for trouble.

Editor's Picks