This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

@region

Summary

Applies CSS styles to portions of content as it appears when flowing within a specified set of regions.

The basic syntax is as follows:

 @region <region_selector> {
     <content_selector> {
         /* ... CSS properties ... */
     }
 }

The region_selector specifies a set of region elements. Within that scope, the content_selector applies to any range (or ‘fragment’) of the selected content when it appears within each region. This example produces the following result:

 /* default paragraph text */
 p { color: gray: }

 /* customized for fragments that appear within region */
 @region-style #intro {
     p { color: blue; }
 }

regionRule2.jpeg

Examples

Inverts paragraph text within the first region

/* dark gray text color by default */
p {
    color: #444;
}

/* dark gray background for first region */
div.region:first-of-type {
    background-color: #444;
}

/* white text only within first region */
@region div.region:first-of-type {
    p {
        color: #fff;
    }
}

/* associate content with CSS regions */
article.content { flow-into: main; }
div.region { flow-from: main; }

Usage

 The @region rule does not change the cascading order of content selectors.

Use the CSSRegionStyleRule interface to apply @region rules programmatically.

Notes

Only the following set of CSS properties work within @region rules:

Related specifications

CSS Regions Module Level 1
W3C Working Draft 23 August 2012

See also

Related articles

Regions

External resources