flow-into

Jump to: navigation, search

flow-into


W3C Editor's Draft

Summary

Diverts the selected element's content into a named flow, used to thread content through different layout regions specified by flow-from.

Overview table

Initial value none
Applies to Block elements, excluding pseudo-elements such as ::before or ::after.
Inherited No
Media visual
Computed value as specified
Animatable No
CSS Object Model Property flowInto

Syntax

  • flow-into: none
  • flow-into: <ident>


Values

none
The element's content remains unchanged, and is not diverted to a flow unless an ancestor element specifies it.
<ident>
String identifier that specifies a named flow into which to divert the element's content. Common keyword values such as none, inherit, default, auto, and initial are invalid flow names, as are element and content:
  • <ident> element: The element keyword explicitly specifies the entire element diverts to the named flow, not just its contents. (This is the default behavior without the keyword.)
  • <ident> content: Adding the content keyword overrides the default behavior described above, diverting only the element's nested content to the named flow.


Examples

The following CSS...

CSS

article.content {
    flow-into: main;
}

section.layout > div {
    flow-from: main;
}

...flows the article through the series of div elements, transforming them into regions and replacing the placeholder text:

HTML

<!-- CONTENT -->
 
<article class="content">
  <p>Content #1</p>
  <p>Content #2</p>
  ...
  <p>Content #n</p>
</article>
 
<!-- LAYOUT -->
 
<section class="layout">
  <div>Region #1</div>
  <div>Region #2</div>
  <div>Region #3</div>
  <div>Region #4</div>
</section>

By default, or with the element keyword, content appears as if structured as follows, but dynamically fragmenting from one layout region to another. (Note that as presented, this is not a valid DOM structure, and simply helps to visualize how content appears in output.)

HTML

<section class="layout">
  <div>
      	    <article class="content">
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
  </div>
  <div>
              ...
  </div>
  <div>
              <p>Content #n</p>
      	     </article>
  </div>
</section>

With the content keyword specified, content fragments appear as if structured as follows, without the interim article element that serves as their container:

HTML

<section class="layout">
  <div>
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
  </div>
  <div>
              ...
  </div>
  <div>
      	     <p>Content #n</p>
  </div>
</section>

Usage

The flow-into property diverts content from where it would ordinarily appear in the document to a named flow. It reappears elsewhere flowing through a series of region elements whose flow-from specifies the same named flow.

An element whose flow-into specifies a named flow takes its descendents along with it by default, with two exceptions:

  • If a descendent specifies a different named flow, it can be presented in a different series of regions specified by a corresponding flow-from.
  • If a descendent specifies the same named flow, it is moved from within the content and then appended.

Setting a descendent's flow-into to none has no effect, and cannot be used to prevent the descendent from flowing along with the ancestor.

More than one element can contribute to the same named flow, in which case their DOM order determines how they appear output within regions.

For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.


Related specifications

Specification Status Related Changes
CSS Regions Module Level 3 Editor's Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support
20 -webkit
Unsupported
8 -ms
Unsupported
534 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported


Compatibility notes

Browser Version Note
Internet Explorer 8 Supports only flow-into and flow-from properties in Compatibility Mode 5.
Internet Explorer 10 Supports only flow-into and flow-from properties in Compatibility Mode 9.

See also

Related articles

Regions





























  • flow-into





External resources