CSSRegionStyleRule
< apis | css-regions
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
- W3C editor's draft: CSS Regions Module Level 3
- Adobe Web Standards: CSS Regions
- Adobe Developer's Network: CSS3 Regions: Rich page layout with HTML and CSS3
- Sample pages
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here