Shulou(Shulou.com)06/03 Report--

This article is to share with you about the example analysis of CSS3's Regions extension, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

This is an adobe proposal: css Regions, which provides a way to arrange content in many different elements. First, you need to declare a unique character value of the flow attribute for the content container, and then use the from () function and the properties of the content to determine which elements the content will be arranged in:

1. .content {flow: foo;}

2..target1, .target2 {content: from (foo);}

First, the content in the content container is placed in the first element, target1, and if there is an overflow, the overflow is displayed in target2. To put it more clearly, instead of repeating content in another target, she continues to display content in the second target that is not fully shown in 1. Take a look at the following example:

Region layout effect

By the way, two target areas don't need to be adjacent to each other in DOM or layout, and if necessary, they can be two unrelated people or enemies on the same page (but this can cause accessibility problems).

Regions, like Exclusions, is not supported by any browser, but you can download it from adobe's lab and try it yourself.

Now, let's take a look at this extension, which can be divided into four categories:

Linear content (Threading content): content that flows from one area to another.

Arbitrary shape container (Arbitrarily shaped containers): displays text in a non-rectangular area.

Arbitrarily shaped exclusion around any shape: text surrounds a non-rectangular area.

Area style (Region styling): displays content based on the flow area.

Here are examples of various categories:

Content streaming (Content flow)

In a typical HTML document, text can be displayed in multiple areas, but the text in each area is irrelevant (see figure 1). If you want to display text across multiple columns, or use other more complex areas you need to manually. This may not be messed up when the user enlarges the text or the user's font is larger than the font you set. This method (css3 region) also makes it possible to have a fluid layout that is adaptive in the zoom window, or, when displayed on a flat panel, adaptive vertical (portrait) or horizontal (landscape) display.

Text is displayed across 3 columns of different widths

If you want to specify a single tray of content (such as text and pictures), how can that content be displayed (flow) in a string of areas? This is exactly what content streaming (content flow) does.

To use it, give the container of the content a name through the flow attribute, which removes the content from the normal CSS layout flow, and then you can insert the thread into one or more other areas-using from () as the value of the content property.

The code for the above three-column layout is as follows:

CSS

CSS Code copies content to the clipboard

# source {

Flow: "main-thread"

}

.region {

Content: from (main-thread)

Background: # C5DFF0

}

HTML

XML/HTML Code copies content to the clipboard

Lorem ipsum dolor [...]

You can combine multiple named flow in one page. You can also use the content-order attribute to control the order of the text stream. If not specified, the normal document order will be used.

With this simple widget, you can implement more complex layouts, including multiple columns of text, columns of different widths and heights, and areas that span multiple columns.

Text traverses stacked areas and columns

Shape surround (Wrap shape)

Using shape wrapping, you can control the shape of the area through which the text passes (see figure 3). You can also use this attribute to match the content stream or create a more interesting design separately.

The text content is displayed inside the custom shape

To use this feature, you need to use the wrap-shape attribute to define the shape and set the wrap-shape-mode attribute to the desired value. By setting the value of content, the text is displayed inside the shape.

The code for the realistic heart shape above is as follows:

CSS

.circle {/ * define the shape of the element as a circle * /

Wrap-shape: polygon (0px, 150px / *... More points * /)

Wrap-shape-mode: content

}

.heart {/ * define the shape of the element as a heart * /

Wrap-shape: polygon (150px, 32px / *... More points * /)

Wrap-shape-mode: content

}

HTML

Our WebKit-based prototype supports specifying a shape using a simple polygon, but you can imagine that other aggregates can also be used to set the shape, or even use the alpha value of a picture.

Surround (Exclusions)

By using other values of the wrap-shap-mode property, you can create different effects, including areas that the specified wrap-shape property can be understood to avoid completely

Text surrounds custom graphics

CSS

.exclusion {

/ * text surrounds the entire element * /

Wrap-shape-mode: around

}

HTML

Lorem ipsum dolor [...]

Area style (Region Styling)

It is common in magazines to specify a specific area of content that surrounds the design. We call it the area style. The example shows that the text around the first block (including the section of the introduction title) is set to dark blue, while the rest of the text is gray

The text style depends on the area it flows into.

CSS

P {color: gray:}

@ region-style # region_1 {

P {color: # 0C3D5F;}

}

HTML

Introduction

This is an example [...]

The zone style is not currently implemented in the webkit prototype of Adobe Labs.

The above is the example analysis of CSS3's Regions extension. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.