The CSS Exclusions Module — Letting Your Content Flow

Posted: 19 Aug 2013 05:30 AM PDT

Last week I took a look at the coming css shapes module. It’s actually part of a more general module on css exclusions (formerly positioned floats) and I want to look at the more general exclusions today.

Like css shapes, there isn’t much in the way of browser support for exclusions. In fact there’s even less. Everything below will only work in IE10+ at the moment.

However, as is the case with css shapes, exclusions are going to change a lot about how we design websites and I think they’re worth a look. Just keep in mind it’s going to be awhile before you can use any of this beyond experimenting to see how it works.

Diagram showing the exclusion order of 3 overlapping exlusions

What are CSS Exclusions?

Exclusions define areas around which inline content can flow. They can be defined on any block level element and they extend the idea of wrapping content around elements to more than floats.

The gist is you can take a block level element, position it anywhere you want within your layout, and through a single css property tell other elements on the page how to flow around it.

The spec offers definitions for the different parts of an exclusion, though quite honestly they aren’t giving me a good mental picture of each of the parts. I’ll stick with the general idea, which is that you can control how content should flow around any block level element.

If you’ve ever wanted to place an image in the middle of a column of text and have the text flow around it on both sides, this is it.

Wow to Work with CSS Exclusions

There are only two properties for working with exclusions (unless you count the shape properties we talked about last week).

wrap-flow
wrap-through

Setting a non-floated element’s wrap-flow to anything other than auto turns that element into an exclusion. Including auto there are 7 possible values for wrap-flow defined below. Further down in the post I’ll present some images showing the result of using each.

auto — no exclusion is created.
both — content flows around both sides of the exclusion.
start — content flows around the start edge. Area around the end edge is empty.
end — content flows around the end edge. Area around the start edge is empty.
minimum — content flows around the edge of the exclusion with the smallest available space within the flow content’s containing block. The area around the other edge is left empty.
maximum — content flows around the edge of the exclusion with the largest available space within the flow content’s containing block. The area around other edge is left empty.
clear — content can only flow before and after the exclusion. The areas around both the start and end edge are left empty.

Note: Starting and ending edges depend on the writing direction of the language.

wrap-through

The other property wrap-through simply determines if elements inherit the wrapping-context of the parent. By default they do, but wrap-though lets you change that. There are only 2 values to consider

wrap — inherits the parent’s wrapping context
none — doesn’t inherit the parent’s wrapping context

Exclusion Order

Because you can position them anywhere, exclusions can overlap each other and the browser has to determine the order in which they work.

By default they follow the painting order and exclusions are applied in reverse to the document order in which they’re defined. Huh?

In other words the last exclusion in your code appears on top of the others by default. You can change this through positioning and the z-index of each positioned exclusion. Set the z-index of one to be greater than the others and it will sit on top of all of them.

The image at the top of this post shows the default exclusion order for three exclusions (left) with the z-index of the middle exclusion changes so it displays on top of the others (right).

Floats and Exclusions

Floated elements and exclusions are similar in the sense that they let other elements flow around them. There are a few differences though.

Scope — floats apply to any content that follows the float, while exclusions apply to any content that sits in the same containing block as the exclusion.
Positioning — floats are part of the inline flow. You can float objects left or right, but that’s it. Exclusions on the other hand can be positioned to be located anywhere within their container.
Separation of concerns — When you float an element you set both its position and how other content flows around it. Setting an exclusion only determines how other content flows around the element. The exclusion element is positioned separately giving you more control.

When determining where to display floats will avoid exclusion areas, while exclusions will take floats into account. Apparently exclusions are a little more considerate than floats.

Examples

As I did last week, I experimented again. Only IE10+ currently support exclusions so I tested in IE10. Unfortunately it doesn’t support shapes yet so there was only so much experimenting I could do.

I used the same code as last week, except for the changes from shapes to exclusions. Only the class name changed in the html. Once again I’m not showing the text itself, but I used the same opening from Jack Kerouac’s On the Road.

1  2  3  4

<div class="container">    <div class="exclusion"></div>      <p></p>  </div>

Below is the css I used for all the examples. It should look similar to the css I used last week when experimenting with css shapes, though naturally includes the wrap-flow property (with ms vendor prefix) instead of the css shape properties. You’ll also note instead of floating the element, it’s now positioned inside the container div.

1  2  3  4  5  6  7  8  9  10

.exclusion {   width: 150px;   height: 150px;   position: absolute;   top: 125px;   left: 75px;   background: rgba(225, 255, 225, 0.5);   border: 2px solid red;   -ms-wrap-flow: auto;  }

Example of an exclusion with wrap-flow set to auto — With wrap-flow set to auto no exclusion is created and the elements is positioned to sit on top of the text.

Below you can see the results of the other values for wrap–flow

Examples of exclusions with wrap-flow set to clear and both

The images above shows the results of setting wrap-flow: clear (left) and wrap-flow: both (right). Notice that wrap-flow: clear displays as you would expect any block level element to display.

Examples of exclusions with wrap-flow set to end and start

The images above show the results of setting wrap-flow: end (left) and wrap-flow: start (right). Notice that the edge you set wrap-flow is the edge where text will be present. The edge opposite is the one that remains empty.

The images above also show the results of setting wrap-flow: maximum (left) and wrap-flow: minimum (right). That won’t always be the case, but here the minimum side is the start and the maximum side is the end because of where I positioned the exclusion.

I added a second exclusion to make things more interesting. I thought I would try different wrap-flow values and experiment with exclusion order, but IE didn’t seem to appreciate my efforts.

I was able to add the second exclusion as long as both wrap-flow properties were set to the same value as you can see above. When I tried to use different values for the exclusions IE stopped responding.

After a few restarts and failures it didn’t seem worth the effort to continue. In fairness this is experimental and hopefully before too long we’ll be able to experiment more.

Below are two more articles with examples. The second uses javascript so browsers that don’t yet support exclusions can still see what should happen

Summary

Like css shapes, exclusions aren’t anything you’re going to use in production soon, but like shapes I think they’re worth knowing about because of the possibilities they enable.

My guess is both will be ready for production around the same time and you’ll likely use them together more often than not. They’re much more interesting when combined than when considered separately.

Exclusions are similar to floats in that they allow other elements to flow around them. They offer greater control though, in where you can position them within your design and also in the way other elements flow around them.

The post The CSS Exclusions Module — Letting Your Content Flow appeared first on Vanseo Design.