HTML and CSS Reference
In-Depth Information
LAYOUT MODULES
WORTHY OF
OTHER
MENTION
A few other CSS3 layout modules are also worth mentioning, although I'll just talk
about them briefly, because their browser support and finished status is even more
nonexistent than those you've learned about already.
REGIONS
The CSS Regions Module Level 3 spec (
http://dev.w3.org/csswg/css3-regions)
defines
a set of functionality for specifying different elements to flow content into. This
was supported in IE10 and Chrome/Safari nightlies at the time of this writing. But
at the time, the spec looked to be very much in flux and likely to change—hence
my unwillingness to cover it in much detail.
However, for completeness I'll walk you through it. See the file simple-regions-
ms.html in the chapter7 code download folder for an example that will work in
IE10. Here you have a set of
<div>
s for laying out content into:
<section id=”layout”>
<div id=”region1” class=”region”></div>
v g ”
p
alt=”sunset image”></div>
<div id=”region3” class=”region”></div>
<div id=”region4” class=”region”></div>
<div id=”region5” class=”region”></div>
</section>
The actual content is stored in a separate file—region-content.html—and
included at the bottom of the main example page using an iFrame:
<iframe id=”region-content” src=”region-content.html”>
The region's magic works as follows: You identify the source of the content (in
this case, the iFrame) by its ID and give it a keyword of your choosing:
#region-content {
: ;
}
