HTML and CSS Reference
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:
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.
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.