The CSS Exclusions module enables you to customize the areas that text flows inside and around.
We have put together a set of simple demos for you that show off these capabilities. Be sure to check back here often as we'll be updating them regularly.
Currently CSS Exclusions is not fully implemented in any browsers though we are starting to contribute the early parsing and geometry pieces to WebKit.
We have made some progress on the shape-inside property, and invite you to take the feature for a test drive.
To try out exclusions, you will need to use Google Chrome Canary, and enable the "Experimental WebKit features" flag under chrome://flags.
After enabling the flag, you will be prompted to restart your browser for the new settings to take effect.
For more info on enabling experimental features in Chrome, check out this article.
For current browser implementation status, check out our handy CSS Exclusions browser support matrix.
CSS Exclusions provides a great benefit to both web designers as well as developers. The specification outlines a concise syntax for creating non-rectangular areas of text.
With CSS Exclusions, you can take advantage of new CSS properties that let you build rich interfaces with custom text exclusions. Custom text exclusions allow text to be excluded by shapes or images.
CSS Exclusions is easy to pick up. They build upon familiar CSS properties and structures. Additionally, CSS Exclusions are often used in conjunction with CSS Regions, a feature that lets you control how text flows across different regions in a layout.
Are you ready to roll up your sleeves and experiment with CSS Exclusions? Check out the specification for details.
Please keep in mind that the CSS Exclusions implementation is very much a work in progress.
The development so far has been done following the CSS Exclusions editor's draft. Comments and suggestions for these documents are very welcome!
For comments on the CSS Exclusions editor's draft proposal please use the www-style@w3.org mailing list on the W3C website. Please use an identifier such as "[CSS Exclusions]" in the subject of your email.
Any feedback on the proposals is very welcome. It helps us provide a feature that's both fun and useful in the modern web landscape.
Unless otherwise noted, code and content is licensed under a Creative Commons Attribution 3.0 Unported License.