In order for CSS Regions to work, content flow can’t affect the height of a region—you need to define region heights in your CSS so they are not flexible. A region receives as much con-tent as it can hold and then flows the remaining concon-tent into the next region.
If there is still content left over after all regions are filled, one of three situations can occur.
The overflow content in the last region will:
• Be truncated
• Continue overflowing and be visible
• Continue overflowing but be hidden
You can control how the last region handles overflow content using the region-overflow and overflow properties.
region-overflow is set to either auto or break. Using the auto value, you can specify the overflow property as visible or hidden. For example, if you want overflow content to con-tinue to flow and be visible, you would use the following syntax:
.region {
region-overflow:auto;
overflow:visible;
}
Figure 6-6 shows visible content flowing past the end of the last region.
Using the break value for region-overflow will prevent content from overflowing the last region, truncating the content at that point. The syntax is:
.region {
region-overflow:break;
}
MICROSOFT’S IMPLEMENTATION OF CSS REGIONS
Microsoft’s method of implementing CSS Regions varies a bit from the W3C version described previously. Microsoft uses iframes, which are like mini boxes on a Web page that contain external content embedded in an HTML document, as the content source. You must also use the -ms- vendor prefix with the flow-into and flow-from properties.
Figure 6-6
Overflow content is visible
For example, the following shows an iframe element with a unique ID, which you would add to a master page:
<iframe id="main-data-source" src="source.html" />
Then you would create the named flow using a CSS selector that specifies the data source:
#main-data-source { -ms-flow-into: main; }
To create content containers, assign a class name to the elements you want to use as containers:
<div class="region"></div>
<div class="region"></div>
The use of region in both instances is not a mistake! Just like applying any CSS rule, you can identify regions using a shared classname (as in this example) or list them using indi-vidual IDs (as in the first example).
TAKE NOTE
*
Then create a CSS selector that specifies the data source from which to accept the content flow:
.region { -ms-flow-from: main; }
If you compare this Microsoft-specific code and markup to the general example shown previ-ously, you should be able to see the similarities fairly easily.
There are a few more things to be aware of regarding the Microsoft version of CSS Regions, which might appear on the 98-375 exam:
• msRegionUpdate: Allows you to manipulate regions dynamically
• msRegionOverflow: Handles content overflow, similar to the region-overflow property
• msGetRegionContent: A script method defined by Microsoft as returning “an array of Range instances corresponding to the content from the region flow that is positioned in the region”
It’s possible you’ll see these constructs when researching or developing CSS Regions for use in Windows 8 or Internet Explorer 10.
CREATE CSS REGIONS
GET READY. To create CSS Regions, perform the following steps:
1. In an editing tool or app development tool, create an HTML document that includes the following content:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Regions Example</title>
<style type="text/css">
body, html { height:100%; width:100%; } body{
font-family: serif;
color: black;
font-size: large;
}
#source{
-webkit-flow-into: main;
}
.region{
-webkit-flow-from: main;
margin: 0 25px 0 0;
background: #EEE8AA;
padding: 20px;
}
#region1{
width: 20%;
height: 50%;
float: left;
}
#region2{
width: 20%;
height: 50%;
float: left;
}
#workarea{
position: relative;
padding: 25px;
}
</style>
</head>
<body>
<div id="source">
<p>Lorem ipsum dolor . . . mollis a ipsum.</p>
</div>
<div id="workarea">
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
</div>
</body>
</html>
The ellipsis (. . .) in the Lorem ipsum paragraph means some content has been omit-ted for presentation purposes. In your HTML document, include a paragraph of dummy text that’s 8 to 10 lines long.
2. Save the file as L6-regions-exercise.html.
3. Apply inline boldface on some paragraph text that’s about halfway through the para-graph text.
4. Save the file again.
Figure 6-7
Content flowing into CSS Regions containers
5. Notice that the CSS code uses the -webkit- vendor prefix. You must use a
command-line flag to enable CSS Regions in the browser. To do so, select Start, type the browser name in the search box, right-click the browser name in the results list, and then select Properties. The Properties dialog box opens. In the Target field, cursor to the end of the field, enter a space, and then type --enable-css-regions. 6. Click OK.
7. Open L6-regions-exercise.html in the Web browser. Size the browser window so that content appears in both containers and the bolded content is in the container on the left. The results should look similar to Figure 6-7.
8. Decrease the size of the browser window to see the effect of overflow content.
9. How can you prevent content from overflowing the second container? Make the necessary changes to the CSS code, save the file again, and view the results in the browser.
10. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.
✚
MORE INFORMATIONVisit the W3C “CSS Regions Module Level 3” Web page at http://dev.w3.org/csswg/css6-regions/ for the latest information on implementing CSS Regions. You can take a test drive of CSS Regions on the Microsoft Web site at http://bit.ly/veOZX2. (Note: This page may require Internet Explorer 10 for proper rendering.)