@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 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; }
 }

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:

font properties (font-weight, font-size, font-variant, font-style, font-family)
color
opacity
background properties (background-color, background-image)
alignment and justification properties (text-align, text-align-last, word-spacing, text-justify)
letter-spacing
text-decoration
text-transform
line-height
border properties (border-color, border-style, border-width)
border-radius
border image properties: (border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat)
margin
padding
text-shadow
box-shadow
box-decoration-break
width

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

Search

@region

How to Use

@region

Summary

Examples

Usage

Notes

Related specifications

Compatibility

Desktop

Mobile

See also

Related articles

Regions

External resources