Export (0) Print
Expand All

Exclusions

Cascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows Store 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 Store 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.

Sample usage of positioned floats, where an image is laid out in the middle of a block of text.

Furthermore, you can combine CSS Exclusions with other new layout features of Internet Explorer 10 and Windows Store 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 Store 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 Store 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 Store 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.

PropertyDescription

-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.

example of -ms-wrap-side:auto
both

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

example of -ms-wrap-side:both
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.

example of -ms-wrap-side:left
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.

example of -ms-wrap-side:right
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.

PropertyDescription

-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.

PropertyDescription

-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 Store 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.

Sample usage of positioned floats used with the Grid, where an image is placed in the Grid and content flows around it.

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>


API Reference

Exclusions

Samples and tutorials

CSS Exclusions sample

Internet Explorer Test Drive demos

Hands On: Positioned Floats

IEBlog posts

IE10 Platform Preview and CSS Features for Adaptive Layouts

Specification

CSS Exclusions and Shapes

 

 

Show:
© 2014 Microsoft