@region

< css‎ | atrules
Jump to: navigation, search

@region

This article is Ready to Use.


W3C Working Draft

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


Compatibility

There is no data available for topic "css", feature "@region". If you think that there should be data available, consider opening an issue.

Examples

Inverts paragraph text within the first region

CSS

/* 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

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft 23 August 2012

See also

Related articles

Regions


















  • @region














External resources