HTML and CSS Reference
In-Depth Information
Figure 12-2.
Example from Adobe using CSS regions
Keep in mind that this works only with percentage-set widths and not when you dictate a hard value like
300px
.
For this to work in the ad environment, ensure that your ad container's
div
has a width of 100 percent and wrap that
container inside another
div
element with its width set to
300px
(or whatever your ad inventory calls for). This could
be really helpful should your client want to mimic a flipbook type of creative because elements including copy can
free flow into other regions at different screen sizes.
Not
■
at the time of writing, each emerging feature discussed in this chapter will more than likely need a specific
vendor prefix to work correctly.
At the time of this writing, in order to utilize the CSS regions feature, you need to use Webkit Nightly, Chrome,
or Chrome Canary and have the CSS regions called
flags
enabled in the browser settings. For Chrome, you can do
this by typing
chrome://flags
in the address bar. Finally, restart your browser to ensure the setting took effect, and
you will be able to mess around with this cool new feature. For more information on a real-world example, I suggest
visiting
http://css-tricks.com/content-folding
,
and to learn more about the specification for CSS regions, visit
