CSS Exclusions: Making Boring Layouts Less Boring

In this tutorial, we are going to explore CSS Exclusions. At the first glance, CSS Exclusions may look similar to CSS Shapes in that they wrap content around an element. Technically, however, they serve a different purpose.

The CSS Shapes Module defines an element’s real shape, but content will not wrap around that shape until the element is floated. The CSS Exclusions Module, on the other hand, is specifically designed for this; allowing inline content to wrap around an element without floating it, regardless of how the element is positioned—absolute, relative, or fixed.

Properties

The CSS Exclusions Module introduces a couple of new properties and values, namely:

• wrap-flow: sets the exclusion area, as well as how the content should wrap around it.
• wrap-margin: is pretty self-explanatory, setting the margin or offset surrounding the exclusion area.

Browser Support

It is worth noting that CSS Exclusions currently only works in Internet Explorer 10 and up, and Edge, once again demonstrating how Microsoft are pushing web browser frontiers (we have them to thank for the development of CSS Grid too). For the time being, we have to prefix the new properties with -ms- when being used.

To better understand how CSS Exclusions works, we’ve prepared a simple starting page comprising a few lines of content and an avatar image at the end.

This is a fairly common pattern on the web, so let’s see if we can polish it up a bit using CSS Exclusions. Assuming your browser supports Excludes, we’re aiming for this result:

Using CSS Exclusions

First, let’s arrange the content into two columns and position the avatar image to the center. It doesn’t matter how you arrange the layout, you can use CSS Flexbox, CSS Grid, or the “traditional” approach using the float property.

We can see from the above image that the avatar image has been removed from the document flow and is positioned on top of the content, obscuring it. Using CSS Exclusions, we can force the content to flow around the avatar image. 

To do so, we set the wrap-flow property to the avatar and set the value to both.

.avatar {
   -ms-wrap-flow: both; // Works in IE and Edge.
   wrap-flow: both; // Does't not work in any browser.
}

The wrap-flow property sets the .avatar as an “exclusion area”; an area where no content should pass through. As you can see below, the content now flows to the right and left of the avatar image.

Possible Values

Other acceptable values are start, end, maximum, minimum, and clear. 

The first value, start, will wrap the content around the start of the exclusion area, but leave the end of the area empty.

.avatar {
   -ms-wrap-flow: start;
}

Given the content on our page, the result would look as follows.

The end value, as its name suggests, works conversely; it will wrap the content around the end of the exclusion area.

.avatar {
   -ms-wrap-flow: end;
}

This gives us the following outcome:

Note: the start and the end of the exclusion area is determined by the writing direction of the content. Where scripts are written right-to-left, such as often seen with Arabic and Hebrew, the content wraps starting on the right and ends on the left of the exclusion area. 

With Japanese, when written from top-to-bottom, the content wraps starting from the top and ends at the bottom.

The third acceptable value is maximum.

.avatar {
   -ms-wrap-flow: maximum;
}

This will wrap the content around the exclusion area wherever it finds the wider space within the container area.

The minimum value works in the opposite way.

.avatar {
   -ms-wrap-flow: minimum;
}

Here, the content will flow through the narrowest space available around the exclusion area.

The last value is clear.

.avatar {
   -ms-wrap-flow: clear;
}

This is quite similar to the clear you’re already familiar with from floats, in that it will clear the right and the left of the exclusion area. It therefore only lets the content flow to the top and bottom of the exclusion area.

Exclusions Margin

Similarly to CSS Shapes the CSS Exclusions Module also comes with a property for defining the margin of the exclusion area, namely wrap-margin. Unlike the margin property, the value of wrap-margin must be a positive value.

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: -10px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

Furthermore, the wrap-margin properties does not allow us to set the margin of each side (right, left, top, and bottom) individually. Whether this feature will be introduced in the future remains to be seen.

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

Once set, we should see more whitespace around the exclusion area.

@supports

Given that we’ve positioned our avatar over the content, without support for CSS Excludes we’re left with a messy layout. Therefore, it’s wise to consider the fallback, and wrap the relevant styles within a @supports rule, like so:

.site-content .avatar {
  width: 180px;
  height: 180px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 80px;
}

/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
  .site-content .avatar {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -90px;
    -ms-wrap-margin: 50px;
    -ms-wrap-flow: both
  }
}

Now our CSS Exclusion styles will only be applied if supported by the browser.

• CodePen
  Quick Tip: Add a @supports CSS File to Your CodePen Demos
  Ian Yates

Wrapping Up

CSS Exclusions, along with CSS Shapes and other bleeding edge specifications, will allow us to explore website layouts way beyond what we’ve become used to. Hopefully we will see speedy advancement in browser support, and more pushing of boundaries from the Microsoft Edge team!

• CSS Exclusions Module Level 1
• CSS Exclusions and Grid Layout by Rachel Andrew