EXPLORE CSS EXCLUSIONS PROPERTIES

GET READY. To explore CSS Exclusions properties, perform the following steps:

1. Using a Web browser, go to the W3C “CSS Exclusions and Shapes Module Level 3” Web page at http://dev.w3.org/csswg/css3-exclusions/.

2. Browse the examples of CSS Exclusions.

3. In Internet Explorer 10, copy the code from an example that interests you, create a proper HTML document, and test the file in Internet Explorer 10.

4. Visit the Microsoft Positioned Floats test drive at http://bit.ly/lQulDB. Access the page using each of the major browsers. Select each setting one at a time to see the effects.

5. Close any open files and programs.

✚

To learn more about CSS Exclusions, visit the W3C “CSS Exclusions and Shapes Module Level 3” Web page at http://

dev.w3.org/csswg/css3-exclusions/. The Microsoft “Exclusions” Web page at http://bit.ly/ImadRV provides information on CSS Exclusions and Microsoft-specific properties for Windows 8 and Internet Explorer 10 applications.

S K I L L S U M M A R Y

INTHIS LESSONYOULEARNED:

• Content flow has, historically, been a manual procedure in HTML documents. Today, CSS Regions, CSS Exclusions, and multi-column layouts help you flow content dynamically.

• CSS Regions lets you flow content between neighboring or distant areas in an HTML document.

• To create and work with CSS Regions, you need to identify a content source and create content containers. You accomplish both tasks using the flow-into and flow-from CSS properties.

• CSS3 enables you to create multiple columns—newspaper style—in HTML documents that scale based on the user’s screen size.

• Hyphenation breaks words between syllables at the end of lines to create a more uniform right margin and eliminate gaps of whitespace within paragraphs.

• A positioned float is a CSS construct that enables you to position images, text, and boxes anywhere in an HTML document and then wrap text completely around these elements.

Positioned floats are called CSS Exclusions in the latest W3C specification.

Fill in the Blank

Complete the following sentences by writing the correct word or words in the blanks provided.

1. are defined areas of an HTML document where content can flow.

They’re used instead of multiple columns in more complex layouts.

2. CSS3 properties for let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns (the gap), make vertical lines (rules) appear between columns, and define where columns break.

3. A may be one or more blocks of text in the same or a separate HTML document that holds the content you want to flow through a CSS Regions layout.

4. are the part of CSS Regions into which content is flowed.

5. is the process of connecting two words with a hyphen mark (-) or breaking words between syllables at the end of a line.

6. A is a positioned float that enables you to position images, text, and boxes anywhere in an HTML document and then wrap text completely around these elements.

■

Knowledge Assessment

7. The CSS property creates a content container for CSS Regions.

8. The CSS property identifies the content source for CSS Regions.

9. A(n) is a mini HTML document embedded in an HTML document.

10. The value of the ^flow-into property is called a .

Multiple Choice

Circle the letter that corresponds to the best answer.

1. You are creating a CSS Regions content source named “main.” Which of the following is the correct syntax?

a. flow-from: main b. flow-into: main c. main: flow-into d. main: flow-from

2. You are creating a CSS Regions content container to be associated with a content source named “main.” Which of the following is the correct syntax?

a. flow-from: main b. flow-into: main c. main: flow-into d. main: flow-from

3. What are the options for handling overflow text in the last container of a CSS region?

(Choose all that apply.) a. Truncation

b. Continue overflowing and be visible c. Continue overflowing but be hidden d. Duplication

4. How does Microsoft’s implementation of CSS Regions differ from the W3C’s specification?

a. Microsoft uses the ^flow-into property.

b. Microsoft uses the ^flow-from property.

c. Microsoft does not use iframes.

d. Microsoft uses iframes.

5. Which CSS3 property creates scalable columns?

a. column-count b. add-columns c. wrap-columns d. none of the above

6. Which CSS3 property creates a line between columns in a multi-column layout?

a. break-inside b. column-fill c. ^column-gap d. column-rule

7. Which of the following is not a legal value for the CSS3 hyphens property?

a. ^none b. ^lines c. ^manual d. ^auto

8. Which of the following specifies the width of the trailing whitespace that can be left in a line before hyphenation occurs?

a. -ms-hyphenate-limit-chars b. -ms-hyphenate-limit-lines c. -ms-hyphenate-limit-zone d. none of the above

9. Which of the following is the formerly used term for CSS Exclusions?

a. left/right floats b. positioned floats c. shape changer d. the DOM

10. Which CSS3 property creates a CSS exclusion?

a. ^wrap-flow b. flow-wrapper c. shape-wrapper d. wrapper-shape

True / False

Circle T if the statement is true or F if the statement is false.

T F 1. A CSS Exclusion must be either rectangular or circular in shape.

T F 2. You must declare a language using the HTML lang or XML xml:lang attributes for correct automatic hyphenation to occur.

T F 3. You can center a heading across multiple columns using the column-span: all property.

T F 4. You combine CSS Regions with CSS layout techniques, such as columns, fl exboxes, and grid layouts.

T F 5. In CSS Regions, the value for the ^{fl ow-from} property must match the value of the fl ow-into property.

■

Competency Assessment