@region

< css‎ | atrules
Jump to: navigation, search

@region


W3C Editor's 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; }
 }
Error creating thumbnail: Unable to save thumbnail to destination

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 3

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support ?
20 -webkit
?
?
?
?
534 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported

See also

Related articles

Regions



















  • @region















External resources