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
for more details.
The idea behind the CSS Exclusions and Shapes Module Level 3 (
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.
Search WWH ::

Custom Search