CSSRegionStyleRule

Jump to: navigation, search

CSSRegionStyleRule

W3C Working Draft

Summary

Represents an @region rule in a CSS style sheet, which applies styles to fragments of content that flow into a CSS region.

Inherits from CSSRule

Properties

No properties.

Methods

No methods.

Events

No events.

Inherited from CSSRule

Properties

API Name Summary
cssText Gets or sets a textual representation of a CSS rule.
parentRule
parentStyleSheet
type

Methods

No methods.

Events

No events.

Examples

Starting with this CSS...

CSS

@region div.region {
    p {
	color: #fff;
        background-color: #000;
    }
}

Narrow the scope of the first rule within the @region to the first paragraph, and modify its background color

JavaScript

// corresponds to @region rule above:
rule = document.styleSheets[0].cssRules[0];

// modify first nested style's selector:
rule.cssRules[0].selectorText = 'article > p:first-of-type';

// modify first nested style's background-color property:
rule.cssRules[0].style.backgroundColor = '#777';

// inspect first nested style as read-only string:
console.log(rule.cssRules[0].cssText);

// inspect CSS syntax for entire @region rule:
console.log(rule.cssText);

The cssText above now dynamically reflects these altered values:

CSS

@region div.region {
    p:first-of-type {
	color: #fff;
        background-color: #777;
    }
}



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 Unsupported
Unsupported
Unsupported
Unsupported
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


  • CSSRegionStyleRule































External resources