CSSRegionStyleRule

Jump to: navigation, search

CSSRegionStyleRule

This page has been flagged with the following issues:

High-level issues:


W3C Editor's 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.

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 3 W3C Editor's Draft

Compatibility

Desktop

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

See also

Related articles

Regions


  • CSSRegionStyleRule
































External resources