css中div和spand,CSS Regions

CSS Regions

Published: 15th of April, 2012

This article is about the CSS regions model which allows

content to flow across multiple areas called regions.

This is an advanced content flow mechanism, which can be combined

with other properties to arbitrary position the regions where content flows.

The article also contains a set of live

(spoiler alert: only one (bad one!), others are just image)

examples of

how regions work should work.

Regions were proposed to W3C CSS (Cascading Style Sheet) by Adobe,

to extend the existing possibilities of CSS and to be able to build complex,

magazine-like layouts using web standards.

W3C Specification:

CSS Regions Module Level 3

More complex layouts require flexibility in placement of boxes for content flows,

regardles of their sizes and positions.

CSS regions provides an advanced content flow mechanism which can be divided into three categories:Threading content — content that flows from one area to another.

Arbitrarily shaped containers — text displayed in non-rectangular areas.

Region styling — styling content depending on the area in which it flows.

You can read more about the examples of each on the

CSS3 regions: Rich page layout with HTML and CSS3 article in the Adobe Developer Center.

Implementation

Consider this layout, which requires sophisticated content flow:

HTML

The following HTML code snippet shows the content to flow between the regions 1, 2, 3 and 4 as illustrated on the example above.

Region A represents an image.

Introduction

This is an example ...

More Details

This illustrates ...

Then, the example ...

Finally, this ...

This rendered layout is the desired result:

CSS

#article {

flow-into: article_flow;

}

#region1, #region2, #region3, #region4 {

flow-from: article_flow;

}

We selected an element #article whose content will be part of a "named flow", called article_flow.

Keep in mind that it could be given any name.

It is still an early stage currently

and the flow-into and flow-from properties require vendor prefixes in order to work.

You can use @LeaVerou's

-prefix-free to

help you with that and you can also read an article about the recent

vendor prefix drama.

For a better understanding I encourage you to read

prefix or posthack,

an article by Eric A. Meyer.

Then we select all the elements (#region1, #region2, #region3, #region4) that will render the content that

is part of this named flow (article_flow in our example).

These elements are now called regions and the content will be "poured" into them.

Regions styling

We can also adjust the styles of content that flows through a region.

It is a form of context-based styling, similar to Media Queries.

/* Default style of a paragraph */

p {

color: grey;

}

/* Additional styling of a paragraph when it falls into region1 */

@region #region1 {

p {

font-weight: bold;

color: #0C3D5F;

font-size: larger;

}

}

Region flow break properties

We can control where breaks occur.

Breaking content into segments fitting in regions is similar to breaking content into pages or columns, with a couple of additional values:break-before

auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region

break-after

auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region

break-inside

auto | avoid | avoid-page | avoid-column | avoid-region

For more information, visit

region flow break properties: ‘break-before’, ‘break-after’, ‘break-inside’.

The region-overflow property

region-overflow

auto | break

The image below illustrates how region-overflow work with the combination of overflow property.

API

The NamedFlow interface

There is the NamedFlow (getFlowByName) interface avaliable which provides

access to the document's named flow instances:overflow

the property is true if the named flow does not fully fit in the associated regions.

Otherwise, it is false.

contentNodes

the property returns an ordered collection of nodes that constitute the named flow.

Note that this collection is live: every time it is queried it must return the same object,

and the object is always up to date.

getRegionsByContentNode()

the method gets a collection of regions that contain at least part of the target content node.

This can be used to navigate by bookmark in paginated view:

the method returns regions containing the bookmarked element,

which are then passed to pagination UI to show desired region or page.

Region flow layout events

Region Event Targets dispatch regionLayoutUpdate events

when there is a possible layout change of their named flow segment.

Browser support

In terms of browser support, regions are not yet

well supported, except for the latest webkit browsers and

are only suitable for non-production sites, personal projects and for testing.

But as far as I've tested, none of the browsers currently

support properties besides flow-into and flow-from.

Even the overall behaviour is somehow odd and a lack of support for region styling, heights, breaks, shapes, gaps, etc.,

gives us little to no control over content.

Supported by:

Chrome 15+

Safari 5.2+

Internet Explorer 10+

After I have spend a few hours testing how CSS regions *actually* work in browser(s),

I've come to a conclusion that the current support is not suitable yet for the real use.

Neither I expected it to be, but what I at least wanted to put online was an example of

how or where CSS regions are actually useful. Eventually I gave up due to overall

unexpected behaveour and a lack of support for region styling, heights, breaks, shapes, gaps, etc.

This is what I was doing and eventually gave up

http://galjot.si/experiments/css3_regions/.

A couple of use cases of CSS regions and exlucions could also be found on the

CSS Working Group WIKI, but note that this is specification is still a draft, and the examples there lack the fineness.

Adobe has prepared some examples of how CSS regions (should) work and can also be used

in a combination with other web standards, such as using CSS media queries to build

layouts that can adapt to different device orientations, portrait and landscape.