Web Platform Team Blog

Making the web awesome

Safari and Opera join Chrome in shipping CSS Shapes

The last few weeks have been exciting for CSS Shapes. At the end of August, Shapes shipped in Chrome 37. Then in early September, Opera 24 also shipped with support for Shapes. And now, iOS 8 just launched with Shapes support in Safari! Also, support for OS X versions of Safari will be coming soon.

What is CSS Shapes?

CSS Shapes allows you to build layouts like this on the web. In this example, the text content wraps around the contour of the hanging-lamp and the wall (photo and demo by @ZoltanWebkit). The contour of the shape is defined by a polygon with the help of the CSS Shapes Editor. (Note that this example uses the CSS Shapes Polyfill, so it works in all browsers.)

See the Pen Hanging-Lamp, with polyfill by Adobe Web Platform (@adobe) on CodePen.

If you’re not familiar with CSS Shapes, you should definitely take a look at Shapes 101 article. More information and useful links can also be found on the CSS Shapes page.

But can I really use it now?

Yes! Even though Firefox and Internet Explorer don’t support CSS Shapes yet, you can use them today in production. In browsers that don’t support Shapes, you simply get the standard float wrapping behavior. For example, view the following demo in a browser that supports shapes and one that does not.

See the Pen Monsters, without polyfill by Adobe Web Platform (@adobe) on CodePen.

For cases where having the shape is essential, you can use the CSS Shapes Polyfill, which supports many of the use cases for CSS Shapes. The polyfill is smart enough to use the built-in Shapes functionality in your browser if that is available. For example, here is the previous demo with the polyfill enabled, so it will look great in browsers that support shapes and browsers that don’t. Most notably, if you compare the source of the two demos, you will notice that nothing needs to change but to include the JavsScript for the polyfill.

See the Pen Monsters, with polyfill by Adobe Web Platform (@adobe) on CodePen.

If you’re doing something more exotic, like emulating shape-inside, then you can use Modernizr — or when they are more widely supported, Feature Queries — to remove or modify the floats when CSS Shapes support isn’t present. The following example does just that.

See the Pen Emulating Shape Inside with Shape Outside, with Modernizr fallback by Adobe Web Platform (@adobe) on CodePen.

Make something cool

We hope you’re as excited about the availability of CSS Shapes as we are. Go out and play with it, and build great things! We’d love to hear about your experiences and the things you build in the comments here, or drop us a line on Twitter @AdobeWeb!

One Comment

  1. September 21, 2014 at 4:08 am, game lebas said:

    This is very good. Powerful for improvements were together.