21

Please welcome to the stage: "Wrap-flow & the CSS Exclusions"!

Floats are pretty useful, but the only snag is that we can only float left or right and not in the center (or anywhere else for that matter). And if we have two adjecent divs or columns, we can't have the float affect the text-flow in both columns. Thankfully, this will change with CSS Exclusions.

Demo time!

The live demo only works in IE10 for now, but we've added screenshots for your viewing pleasure :)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bob, the floating alien!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bonus feature: try moving the Bob the Alien around!

But...how?

First thing to mention is that the image isn't a true float anymore, because it is actually just positioned absolute. The image is now called an exclusion, and its shape should be excluded from the text around it.

To get this thing working we have to do two things: make the exclusion have position: absolute;, and define the way the content wraps around the exclusion with the wrap-flow CSS property. You can see the possible warp-flow values in the examples above.

You can influence wether or not the surrounding content should wrap around the the exclusion or not. Setting wrap-through: none makes the element ignore any exclusion it encounters.

Useful?

Very useful, and it's just the tip of the iceberg of what CSS Exclusions has to offer in the future. These kind of features allow us to create layouts that were previously either impossible, or only possible with ginormous amounts of hacking (which makes us feel dirty inside afterwards).

Is it real world proof then?

Cool as they might be, this is where they come up short. Nope. Sorry. You could, theoretically, but the positioned floats only work in IE10. Thanks to Adobe there is experimental support in Chrome Canary for some other (truly awesome) exclusion features, but work is still in progress. And even in IE10 it's not the most stable feature out there — we managed to crash the browser once or twice while playing with multiple exclusions.

Show me the source!

Feel free to look around the differente source files we used for this example.