@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

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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support ?
?
?
?
?
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
537 -webkit

See also

Related articles

Regions



















  • @region














External resources