HTML and CSS Reference
In-Depth Information
Try resizing the browser window and note how the content keeps reflowing
inside the regions: The reason is that I've set the width of the grid rows using per-
centages. The content starts to flow into the first region in the source order and
then continues to the second region when the first is filled, and so on.
We b K i t- b a s e d b ro ws e rs c u r re nt l y s u p p o r t re g i o n s b u t w i t h a d i ffe re n t s y n t a x
that isn't limited to using an iFrame to contain the content:
#region-content {
content: -webkit-from-flow(“flow_name”);
}
.region {
-webkit-flow: “flow_name”;
}
An example of this that will work in Chrome Canary only (at the time of this
writing) can be seen in simple-regions-webkit.html. Be warned though: To enable
CSS regions in this browser, you currently need to type
about:flags
into the Chrome
Canary URL bar, enable CSS Regions in the settings, and relaunch.
TIP:
In the same manner as multi-col, you can use
break
properties to
specify where content should and shouldn't break when it is nearing the
edge of your regions. See
http://dev.w3.org/csswg/css3-regions/#region-flow-break
for more details.
EXCLUSIONS
The idea behind the CSS Exclusions and Shapes Module Level 3 (
http://dev.w3.org/
csswg/css3-exclusions)
is that you can define a shape or specify an element and
then flow content around that shape/element, thereby creating complicated lay-
outs. You might see these types of layouts in a magazine with text flowing around
an image of a mountain or a floated image halfway between two columns of text.
Yo u c a n t h i n k of f e x c l u s i of n s a s a w a y t of c r e a t e m of r e p of w e r f u l fl of a t s . I n d e e d , C S S 3
did have a feature called positioned floats, which was invented by Microsoft, but
this seems to have been merged with the Exclusions spec now.
