Exclusions

Article
11/03/2017

Cascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows apps using JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

Support for CSS Exclusions in Internet Explorer 10 and Windows apps using JavaScript enables scenarios like the one illustrated in the following image, where the app shown is laid out similarly to the way in which you might design a page in a desktop publishing application like Microsoft Word or Adobe InDesign.

Furthermore, you can combine CSS Exclusions with other new layout features of Internet Explorer 10 and Windows apps using JavaScript, such as CSS Grid, CSS Multi-column, and CSS Flexbox. CSS Exclusions are defined in the World Wide Web Consortium (W3C)'s CSS exclusions and shapes draft. The following subsections provide a brief overview of CSS Exclusions and how to implement them.

Note Because of the preliminary status of CSS Exclusions, the properties described in this topic must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows apps using JavaScript in Windows 8. Also, be aware that the properties and syntax defined in the CSS Exclusions specification might not correspond exactly to those described in this topic. As development on the specification continues, this might change.

Exclusion terms defined

Note Be aware that the syntax for CSS Exclusions (previously known as "positioned floats") has changed from previous pre-releases.

When learning about exclusions, it's helpful to learn the following terms, which are defined in the Definitions section of the CSS3 Exclusions specification. It is also a good idea to be familiar the terms associated with the CSS box model.

Exclusion element

The -ms-wrap-flow property makes an element an exclusion element when it has a computed value other than auto. This property specifies that the exclusion element (the exclusion) can be positioned in various ways (described in the following sections), and that inline content will wrap around the exclusion in a way similar to how it wraps around floated elements.

Exclusion area

The exclusion area is the area used for excluding inline flow content around an exclusion element. In terms of the CSS box model, the exclusion area is equivalent to the border box. At this time, the exclusion area in Internet Explorer 10 and Windows apps using JavaScript is always a rectangle.

Float area

The float area is the area used for excluding inline flow content around a float element. By default, the float area is the float element's margin box. At this time, the exclusion area in Internet Explorer 10 and Windows apps using JavaScript is always a rectangle.

Content area

The content area is the area used for layout of the inline flow content of an element. By default, the content area is equivalent to the content box.

Wrapping context

The wrapping context of an element is a collection of exclusion areas, and is used to wrap around inline flow content. An element wraps its inline flow content in the area that corresponds to the subtraction of its wrapping context from its own content area.

An element inherits its containing block's wrapping context unless it specifically resets it using the -ms-wrap-through property.

The exclusion element

The -ms-wrap-flow property makes an element an exclusion element.

Property	Description
-ms-wrap-flow	The following keywords are valid for this property: auto Initial value. For floated elements, an exclusion is created; for all other elements, an exclusion is not created. both Inline flow content can flow on all sides of the exclusion. start Inline flow content can wrap on the start edge of the exclusion area but must leave the area after the end edge of the exclusion area empty. end Inline flow content can wrap after the end edge of the exclusion area but must leave the area before the start edge of the exclusion area empty. maximum Inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave the other side of the exclusion empty. clear Inline flow content can only wrap on top and bottom of the exclusion and must leave the areas to the start and end edges of the exclusion box empty.

-ms-wrap-flow

The following keywords are valid for this property:

auto

Initial value. For floated elements, an exclusion is created; for all other elements, an exclusion is not created.

both

Inline flow content can flow on all sides of the exclusion.

start

Inline flow content can wrap on the start edge of the exclusion area but must leave the area after the end edge of the exclusion area empty.

end

Inline flow content can wrap after the end edge of the exclusion area but must leave the area before the start edge of the exclusion area empty.

maximum

Inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave the other side of the exclusion empty.

clear

Inline flow content can only wrap on top and bottom of the exclusion and must leave the areas to the start and end edges of the exclusion box empty.

When the -ms-wrap-flow property's computed value is auto, the element does not become an exclusion element unless its float property's computed value is not none. In that case, the element contributes its border box to its containing block's wrapping context and content flows around it according to the clear property. For more information about exclusion elements' impact on content flow, see the Definitions section of the CSS3 Exclusions specification.

Wrapping content around an exclusion

The -ms-wrap-through property specifies how content should wrap around an exclusion element. You can use it to control the effect of exclusions—for instance, to cause one content block to wrap around an exclusion element and another to intersect the same exclusion element.

Property	Description
-ms-wrap-through	These keywords are defined as follows: wrap Initial value. The element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element. none The element does not inherit its parent node's wrapping context. Its descendants are only subject to exclusion shapes defined inside the element.

-ms-wrap-through

These keywords are defined as follows:

wrap: Initial value. The element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element.
none: The element does not inherit its parent node's wrapping context. Its descendants are only subject to exclusion shapes defined inside the element.

Offsetting the inner wrap shape

The -ms-wrap-margin property specifies a margin that is used to offset the inner wrap shape from other shapes.

Property	Description
-ms-wrap-margin	Offsets the inline flow content wrapping on the outside of exclusions. Offsets created by the -ms-wrap-margin property are offset from the outside of the exclusion. This property can be set to any supported length value.

The example in the next section applies the -ms-wrap-margin to the floated green div.

CSS Exclusions and the CSS Grid

You can also use CSS Exclusions with the new CSS Grid functionality in Internet Explorer 10 and Windows apps using JavaScript. For instance, the following image illustrates an exclusion inside a 3×3 grid. The grid contains one div element with inline content that spans all three rows and all three columns. The exclusion has been placed in the grid cell at row 2, column 2. The content flows around the exclusion.

You can view this page. (Internet Explorer 10 is required for this page to display correctly.)

The markup for this page follows:

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Exclusions Sample</title>
  <style type="text/css">
    .container {
      font-size: small;
      width: 98%;
      height: 100%;
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 1fr 1fr;
    }
    .exclusion {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      background-color: lime;
      -ms-wrap-flow: both;
      padding: 10px;
      -ms-wrap-margin: 15px;
    }
    .dummy_text {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
      -ms-grid-row-span: 3;
    }
  </style>
</head>
<body>
  <div class="body">
    <h1>CSS3 Exclusions Sample</h1>
    <div class="container">
      <div class="exclusion">
        Exclusion positioned at row 2, column 2.
      </div>
      <div class="dummy_text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</body>
</html>